Рамка вокруг ссылки


Как убрать пунктирную рамку вокруг ссылок?

Нередко приходиться использовать изображения в качестве ссылок. Например, изображения на странице Индивидуальный дизайн сайта служат ссылками и указывают: одни на более крупные картинки, другие являются ссылками на сайты.

При активном состоянии ссылки (в том числе изображения-ссылки), то есть при нажатии на неё курсором или после того, как Вы перешли по ссылке и вернулись на исходную страницу, многие браузеры добавляют вокруг неё рамку — пунктирную линию.

Обратите внимание на изображение ниже. Это изображение-ссылка. Если перейти по ней и снова вернуться на эту страницу, то вокруг изображения будет обозначена пунктирная линия.

С одной стороны это нормально: ведь пунктирная рамка, вокруг ссылки предназначена для привлечения внимания. Таким образом, осуществляется демонстрация текущего фокуса.

Но лично мне это не очень понравилось, и у меня возник вопрос: как убрать пунктирную рамку вокруг ссылок?

Оказывается всё очень просто. Для этого для ссылки, то есть для тега a, необходимо задать стилевое оформление, в котором прописать свойство outline со значением none .

Теперь снова вернёмся к изображению-ссылке. Теперь я для него применил свойство outline со значением none . И если перейти по нижерасположенному изображению-ссылке и снова вернуться на эту страницу, то вокруг изображения пунктирной линии Вы не увидите.

Таким образом, при помощи свойства outline, мы можем избавиться от пунктирной рамки вокруг ссылки!

Как убрать ненужную рамку с ссылки.

06.04.2012, 23:39

Как убрать пунктирную рамку вокруг ссылки
Как убрать пунктирную рамку вокруг ссылки ?

Как убрать рамку
Подскажите пожалуйста как убрать вот эту рамку? 1 .

как убрать рамку страници
Всем доброго времени суток. Подскажите, что я делаю не так. У меня есть php страничка с кодом .

Как убрать рамку у кнопок
В браузерах Яндекс и Опера, появляется рамка, когда кнопка нажата, как убрать эту синею рамку.

Как в Bootstrap 3 убрать рамку в navbar в Less?
Добрый день, Запарился с css правилами для разметки: .navbar* < border:none .

Илон Маск рекомендует:  Реализация механизма разграничения прав доступа к админ части


06.04.2012, 23:47 2

Добавлено через 2 минуты
ну попробуй задать в сss ссылкам

Как убрать рамку вокруг ссылки-картинки

При клике по картинке-ссылке некоторые браузеры отображают вокруг этой картинки пунктирную линию — фокус. Эта пунктирная рамка предназначена специально для того, чтобы привлечь внимание пользователя сайта к тому, где именно был произведен клик. Также рамкой показывается фокус на ссылке при навигации сайта с клавиатуры. Но некоторые разработчики сайтов и дизайнеры хотят убрать этот эффект…

Якобы чтобы сделать сайт однообразным в различных браузерах или еще непонятно для каких целей, возможно с точки зрения дизайнера такая рамка неэтично смотрится. В общем для того чтобы убрать рамку нужно в CSS свойстве тега A добавить свойство outline со значением none:

Убираем рамку вокруг ссылки в Mozilla Firefox и Internet Explorer

Как убрать пунктирную рамку, появляющуюся при щелчке мышью по графической или текстовой ссылке

Пунктирная рамка вокруг ссылок в популярных браузерах Mozilla Firefox и Internet Explorer раздражает многих посетителей веб-сайтов. Поэтому для того, чтобы ваши потенциальные заказчики или клиенты были довольны на 100%, об этом вопросе необходимо позаботиться.

Решение 1: JavaScript

Из-за зависимости от JS и потенциально возможного замедления загрузки веб-сайта, далеко не лучший выход из положения.

Решение 2: Псевдокласс :focus

Становится теплее. Данный css-код нацелен только на браузеры, базирующиеся на Mozilla. Для пользователей Internet Explorer придется использовать совершенно непродуктивное Решение 1.

Решение 3: Чистый CSS

Здесь существует несколько вариаций, но, чтобы не томить, приведу универсальное решение:

Дополнительно к outlne в свойствах можно указать все, что угодно. Данное решение эффективно работает по обе стороны баррикад: как в Firefox, так и в Internet Explorer.

Что еще?


Для того, самому себе обеспечить комфортный просмотр веб-сайтов в Mozilla Firefox введем в командной строке

и изменим его значение с 1 на 0.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

Тема: Сделать рамку вокруг ссылки

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Сделать рамку вокруг ссылки

Добрый день.
Есть нужно сделать его в таком оформлении: special.jpg
У меня в лучшем случае получается: ScreenShot.jpg
Сам шрифт не важен, нужно рамка вокруг элемента была как на 1 изображении. Подскажите пожалуйста, как это можно реализовать?


что мне подсказывает что это одно и тоже, только надо как-то по другому сыграть с параметрами стилей — отступы, размер теней.

*В идеале для похожести тень правого бока положить бэграундом справа, убрав правый бордер.

Последний раз редактировалось Copyright; 15.01.2015 в 15:18 .

Вам нужно просто правильно настроить тени, и цвет рамки сделать более светлей.

Свойство CSS border

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

Илон Маск рекомендует:  Iis о сертификатах

1. Синтаксис CSS border

  • border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style — стиль выводимой рамки. Может принимать следующие значения
    • none или hidden — отменяет границу
    • dotted — рамка из точек
    • dashed — рамка из тире
    • solid — простая линия (применяется чаще всего)
    • double — двойная рамка
    • groove — рифленая 3D граница
    • ridge , inset , outset — различные 3D эффекты рамки
    • inherit — применяется значение родительского элемента
  • border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Примечание

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

Изображения — ссылки

Мы уже изучили с вами как создаются обычные текстовые ссылки, а в этом уроке вы узнаете, как сделать ссылки — изображения. В основном такие ссылки используются в дизайне сайта для создания различных кнопок навигации, но естественно их можно применять где угодно, а точнее где вам нужно.

Как сделать в HTML ссылки — изображения?


Вы знаете, наверное, это будет одним из самых простых уроков. Потому что, чтобы сделать из картинки ссылку надо в тег поместить тег . Все.

Пример создания ссылок — изображений в HTML

Результат в браузере

Самое главное не забывайте указывать обязательные атрибуты тега — alt и src . А также необязательные, но настоятельно рекомендуемые width и height , даже когда вы не меняете размеры изображений.

Как убрать рамку вокруг изображения — ссылки?

Некоторые браузеры по умолчанию рисуют вокруг изображений — ссылок небольшие рамки, по цвету совпадающие с цветом обычных ссылок на HTML-странице. В примере указанном выше вы их в любом случае не увидите, так как я убрал эти рамки на всей странице. Но как это примерно выглядит, вы можете посмотреть:

Отображение рамок вокруг изображений.

Согласитесь не очень красиво. В старом HTML у тега имелся специальный атрибут border , который мог убрать рамку, но в новом его нет, поэтому снова используем стили (CSS). Итак, убрать у изображения рамку можно несколькими способами, я покажу вам два (если решите когда-то вплотную взяться за CSS, то узнаете еще один).

Илон Маск рекомендует:  Что такое сетка сайтов

Первый. Можно указать в теге атрибут style= «border:0» , как мы это делали, когда убирали рамки у линий в уроке Горизонтальные линии.

Но лучше использовать второй вариант и убрать их сразу на всей HTML-странице. Для этого надо в «шапке» документа ( ) установить тег , как мы делали в уроке по изменению цвета ссылок, и написать внутри него такую строку:

Здесь мы говорим браузеру, что у всех тегов на странице не должно быть рамок, а точнее их толщина должна составлять ноль.

Кстати, если в «шапке» страницы у вас уже имеется

Как убрать пунктирную рамку вокруг ссылок?

В новом шаблоне моего сайта, при нажатии на ссылки вокруг нее остается пунктирная рамка. Можно как-то это устранить?

Ответ


Действительно, при активации ссылок некоторые браузеры добавляют вокруг них пунктирную рамку, которая предназначена для привлечения внимания к нажатой ссылке и демонстрации текущего фокуса курсора.

Если она вам мешает, то ее можно убрать. Для этого следует к селектору «a» добавить стилевое свойство outline со значением none:

Убираем пунктирную рамку у ссылки

По умолчанию, когда ссылка находится в активном состоянии или при наведении, появляется пунктирная линия (или сплошная рамка) вокруг нее, примерно как показано на рисунке ниже.

Это используется в качестве указателя для пользователей, которые имеют доступ к сайту только с клавиатуры, технически с помощью клавиши табуляции Tab . Контур показывает пользователям, что они в настоящее время фокусируются на определенном элементе. Тем не менее, иногда это может сильно навредить дизайну сайта, поэтому с помощью следующих правил CSS можно избавиться от такого эффекта.

Стилизация Outline

Однако мы также можем и управлять этим эффектом по своему усмотрению. Мы можем указать стиль контура, ширину и цвет. Учитывая пример из предыдущего рисунка, мы можем установить стиль контура, следующим образом.

Или вовсе заменить выделение линией на фоновый цвет или картинку.

Тема: Сделать рамку вокруг ссылки

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Сделать рамку вокруг ссылки

Добрый день.
Есть нужно сделать его в таком оформлении: special.jpg
У меня в лучшем случае получается: ScreenShot.jpg
Сам шрифт не важен, нужно рамка вокруг элемента была как на 1 изображении. Подскажите пожалуйста, как это можно реализовать?

что мне подсказывает что это одно и тоже, только надо как-то по другому сыграть с параметрами стилей — отступы, размер теней.

*В идеале для похожести тень правого бока положить бэграундом справа, убрав правый бордер.

Последний раз редактировалось Copyright; 15.01.2015 в 15:18 .

Вам нужно просто правильно настроить тени, и цвет рамки сделать более светлей.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL