Как сделать ссылку без подчеркивания

Как убрать подчеркивание ссылки CSS

По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам . Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline . Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.

  • Как убрать подчеркивание ссылки CSS
  • Предостережение относительно удаления подчеркивания
  • Не подчеркивайте текст, не связанный со ссылкой
  • Измените сплошное подчеркивание точками или пунктиром
  • Изменение цвета подчеркивания
  • Как сделать двойное подчеркивание
  • Не забывайте о различных состояниях ссылок

Как убрать подчеркивание ссылки CSS

Подчеркнутый текст может сложнее читаться, чем обычный. Многие дизайнеры просто не уделяют этому должного внимания. Но можно полностью удалить подчеркивание. Для этого мы будем использовать свойство CSS text-decoration . Вот CSS-код , с помощью которого это можно сделать:

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

Предостережение относительно удаления подчеркивания

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

Не подчеркивайте текст, не связанный со ссылкой

Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст ( с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание ( вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.

Измените сплошное подчеркивание точками или пунктиром

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию ( линия « solid « ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :

Изменение цвета подчеркивания

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

Как сделать двойное подчеркивание

Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:

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

Не забывайте о различных состояниях ссылок

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :

Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, отклики, дизлайки, подписки!

Ссылки в CSS

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

Прежде чем вы начнете изучение примеров, хочу сделать небольшое пояснение. Во всех примерах, для большей наглядности, будет использован псевдокласс CSS :hover, который применяется для изменения стилей ссылок при наведении на них курсора мыши. Надо сказать, что подобная практика является обычным явлением и в той или иной степени применяется практически на всех сайтах интернета.

Ссылки без подчеркивания и с подчеркиванием

В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.

Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок

Описание примера

  1. По умолчанию все популярные браузеры добавляют к ссылкам подчеркивание, которое регулируется свойством CSS text-decoration. То есть по умолчанию это свойство, для ссылок, имеет значение underline . Используя эти знания, мы и изменяем подчеркивание у ссылок в их разных состояниях.

Изменение стиля подчеркивания ссылок и расстояния от подчеркивания до текста

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

Пример HTML и CSS: пунктирное подчеркивание ссылок

Описание примера

  1. Сначала убираем стандартное подчеркивание у всех ссылок, так как будем использовать нестандартные методы. Затем первой ссылке добавляем нижнюю границу рамки с помощь свойства CSS border-bottom, причем делаем ее пунктирной (dashed). Это и будет наше подчеркивание. Чтобы при наведении на ссылку подчеркивание убиралось — используем псевдокласс и делаем фон рамки таким же, как и фон страницы, то есть просто скрываем ее. По идее, здесь было бы лучше вообще сделать фон рамки прозрачным (transparent), но IE6 неправильно понимает это значение.
  2. Со второй ссылкой проделываем то же, что и с первой, но только рисуем сплошную линию. Чтобы увеличить расстояние от текста до подчеркивания — задаем ссылке небольшой нижний отступ с помощью свойства CSS padding-bottom.
  3. У нашей третьей ссылки подчеркивание разноцветное, поэтому его мы будем добавлять с помощью фонового изображения. Используем для этого небольшую картинку, которую подключаем через CSS background. Позиционируем фон в нижнюю часть ссылки (0 100%) и разрешаем ему дублироваться только по горизонтали (repeat-x). Подчеркивание готово, но прилегает слишком близко к тексту, чтобы это исправить — добавляем ссылке маленький отступ снизу. Теперь все.
  4. В старичках IE6 и IE7 могут возникнуть проблемы с отображением подчеркивания у первой и второй ссылки. Для исправления добавляем свойство zoom :1, которое включает т.н. layout. Это свойство невалидно и его понимают только эти браузеры, поэтому лучше подключить его условными комментариями.

Ссылки-блоки

Очень часто для создания меню требуется сделать не просто текстовые ссылки, а ссылки-блоки, у которых активной областью будет как сам текст, так и определенная зона вокруг него.

Пример HTML и CSS: делаем ссылки-блоки

Описание примера

  1. Для создания ссылок-блоков используем свойство CSS display:block, которое превращает их в блочные элементы, создающие до и после себя перевод строки. Если переводы строк не нужны — можно заменить значение на inline-block .
  2. Так как ссылки теперь у нас являются блоками, то если необходимо, мы можем изменять у них ширину (CSS width) или высоту (CSS height).
  3. В этом примере высоту ссылок мы вообще не указываем, а просто задаем им внутренние отступы (CSS padding), которые и расширяют блоки.

Ссылки с рамками под курсором мыши

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

Пример HTML и CSS: делаем ссылки с рамками при наведении курсора мыши

Описание примера

  1. Все очень просто — с помощью свойства CSS border добавляем ссылкам под курсором нужную рамку. Однако, внимание, точно такую же рамку мы добавляем и обычным ссылкам, вот только цвет ее делаем такой же, как фон страницы. То есть попросту скрываем рамку до поры до времени. Это делается для того, чтобы при наведении курсора мыши, ссылки не начали «прыгать» из-за отрисовки рамки.
Читайте также  Как решать задачи с алгоритмом

Вместо того чтобы делать цвет рамок под фон страницы, ему можно было бы присвоить значение transparent и сделать прозрачным, но, как я уже говорил, IE6 неправильно его обрабатывает.

Трехмерные ссылки

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

Пример HTML и CSS: создание трехмерных ссылок

Описание примера

  1. С помощью свойства CSS border добавляем ссылкам рамки, а с помощью border-color — задаем им цвет. При этом для левой и верхней границы указываем светлый оттенок цвета, а для нижней и правой — темный. Именно благодаря такому распределению цветов мы и получаем ссылки, которые похожи на трехмерные кнопки.
  2. Чтобы при наведении курсора мыши казалось, что кнопки нажимаются — инвертируем у ссылок с псевдоклассом :hover цвета рамок. Для дополнительного эффекта нажатия, задаем относительное позиционирование (CSS position:relative) и делаем однопиксельное смещение вверх (CSS top:-1px).
  3. Ну и чтобы все совсем было красиво — задаем ссылкам под курсором цвет текста и фона немного темнее, чем у обычных. Готово.

Ссылки с иконками

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

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

Пример HTML и CSS: делаем ссылки с иконками

Описание примера

  1. Ради сокращения кода, задействуем в ссылках два класса — «links» (с общими свойствами) и «image» , «audio» , «video» (персональные для каждой ссылки). Этот момент подробно описан в классах справочника CSS.
  2. Наши иконки имеют размер 50×50 пикселей и будут присутствовать у ссылок в качестве фона (CSS background), который мы расположим по центру вверху (50% 0) и запретим ему размножаться (no-repeat).
  3. Добавляем ссылкам внутренние отступы (CSS padding), чтобы текст в ссылках не прилегал к краям. При этом верхний отступ делаем равным высоте иконок, чтобы текст не накладывался на них, ведь иконки у нас — это фон.
  4. Если текста в ссылках будет очень мало, то изображения иконок обрежутся по бокам. Чтобы этого не произошло, задаем ссылкам такую минимальную ширину (CSS min-width), чтобы она как минимум была равна ширине иконок. В нашем случае надо получить минимальную ширину в 50px, однако мы задаем 40px, так как еще 10px добавится благодаря боковым отступам.
  5. Чтобы минимальная ширина сработала — преобразуем ссылки во встроенные блоки (CSS display:inline-block).

IE6 придется немного «пролечить»:

  1. IE6 не понимает свойство для установки минимальной ширины, но зато он интерпретирует свойство CSS width именно, как минимальную ширину. Поэтому применяем для него простой хак, который исправит данную проблему.

Если вам нужны ссылки вообще без текста, а только с иконками, то можно поступить так. Убрать у ссылок все внутренние отступы и минимальную ширину. Задать им явную ширину и высоту равную размеру иконок.

Закругленные углы ссылок

В данном примере мы закруглим углы у ссылок с помощь одного из способов закругления углов, описанном в соседнем подразделе. Вариант с применением CSS 3 рассматривать не будем, так как там все очень просто, а лучше сделаем закругления с использованием изображений.

Для этого сначала вырежем несколько заготовок картинок в двух комплектах — для обычных ссылок и ссылок под курсором. У нас оно будут отличаться наличием/отсутствием тени у изображений.

Пример HTML и CSS: ссылки с закругленными углами

Описание примера

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

  1. Используя свойство CSS display:inline-block делаем ссылки встроенными блоками. В частности, это необходимо для того, чтобы мы могли указать ссылкам точную высоту, соответствующую высоте изображений.
  2. Убираем подчеркивание и выравниваем текст по центру (CSS text-align:center). Вообще, в нашем случае центровать текст не обязательно, так как ссылки подстраиваются под размер текста в них и ему просто некуда выравниваться. Но вот если потребуется увеличить ширину ссылок (например, до 150px), то такое выравнивание будет как нельзя кстати.
  3. Чтобы изменить внешний вид ссылок, когда они находятся под курсором мыши — добавляем в стили дополнительные селекторы с псевдоклассом CSS :hover, в которых указываем наши части изображений, но без тени.

Для IE6 и IE7 подключаем дополнительные стили с помощью условных комментариев, но сам CSS-код немного изменяем и делаем его отличным от того, который используется в способах закругления углов:

  1. Суть изменения состоит в том, что с помощью expression мы интегрируем внутрь ссылок все те же два тега , но только без атрибутов style содержащих стили. Вместо этого мы добавляем тегам классы «left_bok» и «right_bok» , а стили для них выносим и пишем ниже. Эти стили практически полностью такие же, как и в основном коде CSS, но только здесь все картинки идут в качестве фона тегов.

Закругленные углы ссылок (вариант два)

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

Пример HTML и CSS: ссылки с закругленными углами (второй вариант)

Описание примера

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

  1. С помощь свойства CSS display:inline-blok преобразуем ссылки во встроенные блоки. Затем убираем у них подчеркивание, добавляем рамку и выравниваем текст по центру.
  2. Так как псевдоэлементы, с помощь которых мы закругляем углы, находятся внутри ссылок, то их содержимое тоже выравнивается по центру, а, следовательно, уголки-картинки, добавленные свойством CSS content, не ставятся по углам, как нам надо. Чтобы это исправить, добавляем им text-align:left, возвращая значение, которое браузеры используют по умолчанию.

Руководство по ссылкам в CSS

Ссылки или гиперссылки являются неотъемлемой частью сайта. Это позволяет посетителям перемещаться по сайту. Поэтому правильное оформление ссылок является важным аспектом создания удобного веб-сайта.

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

Ссылка может иметь четыре различных состояния— link , visited , active и hover . Эти четыре состояния ссылки могут быть оформлены по-разному с помощью следующих селекторов-псевдоклассов.

  • a:link — определяет стили для обычных или не посещенных ссылок;
  • a:visited — определить стили для ссылок, которые пользователь уже посетил;
  • a:hover — определяет стили для ссылки, когда пользователь наводит на нее указатель мыши;
  • a:active — определяет стили для ссылок, когда на них нажимают.

Вы можете использовать те же CSS-свойства, что и для обычного текста например, например, color , font , background , border и т. д. для каждого из этих селекторов, чтобы настроить стиль ссылок.

Порядок, в котором вы устанавливаете стили для разных состояний ссылок важен, потому что последний стиль имеет приоритет над правилами, определенными ранее.

В общем случае порядок псевдоклассов должен быть следующим — :link , :visited , :hover , :active , :focus , чтобы они работали правильно.

Изменение стандартных стилей ссылок

Во всех основных браузерах, таких как Chrome, Firefox, Safari и т. д. , если вы не установите стили для ссылок, по умолчанию они будут подчеркнуты и будут использовать цвета ссылок браузера.

По умолчанию текстовые ссылки будут выглядеть следующим образом в большинстве браузеров:

  • Не посещенная ссылка подчеркнута и выделена синим цветом;
  • Посещенная ссылка подчеркнута и выделена фиолетовым цветом;
  • Активная ссылка подчеркнута и выделена красным цветом.

Тем не менее, нет никаких визуальных изменений ссылки в случае состояния наведения. Она остается синей, фиолетовой или красной в зависимости от того, в каком состоянии (то есть не посещенном, посещенном или активном) она находится.

Читайте также  Как рассчитать материальный ущерб

Теперь давайте посмотрим, как настроить ссылки, переопределив их стили по умолчанию.

Настройка пользовательского цвета ссылок

Просто используйте CSS-свойство color , чтобы определить цвет по вашему выбору для любого состояния ссылки. Но при выборе цвета убедитесь, что пользователь может четко различать обычный текст и цвет ссылки.

В следующем примере показано как это работает:

Удаление подчеркивания по умолчанию из ссылок

Если вам не нравится подчеркивание по умолчанию для ссылок, вы можете просто использовать CSS-свойство text-decoration , чтобы избавиться от него. Кроме того, вы можете применить другие стили к ссылкам, такие как background-color , border-bottom , font-weight: bold и т. д., чтобы ссылки визуально отличались от обычного текста.

На этом сайте используется свойство border-bottom для выделения ссылок в тексте.

В следующем примере показано, как удалить или установить подчеркивание для разных состояний ссылки.

Создание текстовых ссылок в виде кнопок

Вы также можете сделать ваши обычные текстовые ссылки похожими на кнопки, используя CSS. Для этого нам нужно использовать еще несколько CSS-свойств, таких как background-color , border , display , padding и т. д. Об этих свойствах вы узнаете подробнее в следующих главах.

Следующий пример демонстрирует код для кнопки:

Похожие посты

  • 17 декабря, 2019
  • 4-5 мин.
  • 41

Руководство по свойству opacity в CSS

  • 16 декабря, 2019
  • 7-8 мин.
  • 56

Руководство по таблицам в CSS

  • 14 декабря, 2019
  • 2-3 мин.
  • 49

Руководство по свойству margin в CSS

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Подчеркивание ссылок и текста через CSS, свойство text-decoration

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

Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна замечательная статья, где хорошо описаны все нюансы текущей темы. В реализации будем использовать разные настройки свойства text-decoration, которое отвечает за функцию подчеркивания в CSS. Этим же способом сможете выделять mailto ссылки на адрес почты на сайте.

Раньше, помнится, поддержка данной опции в стилях была очень слабая, многие браузеры вообще ее не воспринимали. Сейчас ситуация улучшилась, хотя вы все еще рискуете получить неожиданный результат на старых версиях или в IE. Вероятно, совсем скоро наступит время, когда мы сможем задавать однозначное и корректное подчеркивание HTML ссылок / текстов без применения border-bottom. Хотя в одном из примеров прошлой статьи (онлайн журнале Wired) именно оно используется при реализации тренда:

Но вернемся к нашему уроку по верстке и более традиционному методу.

Опиця text-decoration для подчеркивание текста в CSS

Ранее она принимала одно из базовых значений:

  • line-through — перечеркнутый текст;
  • underline — нижнее подчеркивание;
  • overline — линия сверху;
  • none — без оформления (отмена всех эффектов);
  • inherit — наследуется.

Однако в новой редакции стилей предлагаются несколько иные свойства:

  • text-decoration-color — задание цвета;
  • text-decoration-style — стиль подчеркивания текста / ссылок;
  • text-decoration-line — тип линии (из 5-ти вариантов выше);

Для свойства text-decoration вы можете использовать сразу несколько значений параметров, перечисляя их в одной строке. Рассмотрим их по отдельности…

text-decoration-color — CSS цвет подчеркивания ссылки

Эта опция максимально простая и здесь, в принципе, нечего особо объяснять.
В качестве значение вводите код веб-цвета.

text-decoration-line — расположение линии оформления текста

Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:

Во второй строке показано как все записывается в один ряд с text-decoration.

text-decoration-style — стиль подчеркивания текста

Опция задает внешний вид декоративной линии для оформления текста / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:

  • solid — сплошная линия;
  • double — двойная (из первого примера выше);
  • dotted — состоит из последовательности точек;
  • dashed — позволяет сделать пунктирное подчеркивание CSS;
  • wavy — эффектная волнистая линия.

text-underline-position — позиционирование CSS подчеркивания

С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:

  • auto — располагается максимально близко базовой линии текста;
  • under — под самой нижней границей шрифта;
  • left и right — слева/справа для записей, отображаемых вертикально.

Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:

Разница, думаю, вполне очевидна.

text-decoration-skip — убираем подчеркивание для элементов

С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:

То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами шрифта. Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:

Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:

Дополнительные фишки для подчеркивания ссылок

Начинающие пользователи часто задают некоторые типовые вопросы по теме, поэтому мы также решили их рассмотреть. Общий пример находится в самом низу после пояснений.

Как убрать подчеркивание ссылки

Если ссылка декоративно выделена с помощью линии, то вам нужно найти CSS стиль, в котором прописывается свойство text-decoration и заменить его значение на «none»:

Тут важно правильно определить где именно в задается оформление вашему элементу. У него могут быть сторонние классы и другие дополнительные конструкции (не только тег a). Смотрите как мы реализовали это в примере ниже — абзац с классом «nounder».

Как сделать подчеркивание ссылки при наведении

В CSS для этих целей содержится так называемый псевдокласс hover — по теме есть большая детальная статья о создании hover эффекта в кнопках / картинках и не только (советуем глянуть). Если говорить вкратце, то вам просто нужно прописать обработку события:

Оба примера ниже позволяют понять логику работы при наведении: или вы изначально указываете в CSS подчеркивание ссылок, а потом убираете его в hover, либо наоборот.

Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.

Подчеркивание ссылок

Борьба с несуществующей проблемой

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

Однако мнения дизайнеров в вопросе выделения ссылок разделились, и у каждой стороны свои аргументы.

Часть 1. О меньшинстве.

Мне нравится, как позиция сторонников расписана в статье «Хотелось бы подчеркнуть». Рекомендую ознакомиться.

Хочу привести цитату, где на мой взгляд, кроется суть:

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

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

Читайте также  Как убрать виртуальную клавиатуру

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

Звучит действительно как решение. Но давайте разберемся.

  1. В хроме есть специальные возможности (озвучивание действий, режим высокой контрастности и экранная лупа). Но включить их можно только при первом включении браузера. В противном случае рекомендуется использовать средство чтения с экрана ChromeVox. Очень странно.
  2. В Firefox, Opera и IE можно настроить шрифты, цвет текста, фона, ссылок. Но достаточно ли этого? Жирность ссылок и кнопок, как единственных элементов управления и навигации, не настроить.
  3. В Safari таких настроек вообще нет — используются настройки операционной системы. Но в MacOS, к примеру, можно лишь инвертировать все цвета и включить лупу. Крайне скудно.
  4. Добиться более близкого к желаемому результата можно только с использованием плагинов. Стандартные средства браузеров настраивают лишь минимум. Ссылки на аддоны приведены в конце статьи.
  5. В любом случае все это пагубно повлияет на дизайн всех сайтов.
  6. Чтение с экрана вообще не имеет никакого отношения к навигации и никаким образом ей не способствует.

Что имеем в итоге?

Несколько решений, которые не только полны недостатков, но и портят дизайн сайтов.

Часть 2. Большинство

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

Для остальных есть «нишевые решения», делайте с ними что хотите.

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

А какие есть варианты?

  1. Подчеркивание.
  2. Цвет.
  3. Цвет фона.
  4. Рамка.
  5. Иконка до или после.
  6. Еще? Предлагайте.

Преимущество цвета очевидно — он мусорит меньше всего. И для большинства выделения ссылок цветом будет достаточно.

Казалось бы, решение замечательное. Но я хочу показать, что и оно имеет недостатки.

Даже на MacBook Air небольшой угол наклона дает искажение цвета. Мелочь, но в таких ситуация навигация ухудшается.

Пример с углами несколько натянут. Тут скорее идея плохой передачи цвета.

Плюс большинство не умеет настраивать цветовые профили, калибровать мониторы.

Плюс снижение яркости экрана при работе от батареи.

Плюс автоматическое снижение яркости экрана при ярком освещении (уже достаточно сильно распространено на смартфонах и ноутбуках).

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

И еще: вспомните о пожилых людях. Согласно исследованиям, количество пожилых пользователей интернета растет со скоростью примерно 8-9% в год. Выявление ссылки в тексте и простота попадания по ней — очень важны.

Далее. Взглянем еще раз на скриншот Википедии.

Сейчас ссылки подчеркиваются при наведении курсора. Представьте, что вы зашли с планшета, где курсор и :hover отсутствует. Как вы определите, является ли ссылкой словосочетание «гипертекстового документа» или ссылками являются слова «гитертекстового» и «документа»?

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

Может просто использовать золотую середину? Полупрозрачное однопиксельное подчеркивание?

Опрос

Оставляйте комментарий +1 к нужному пункту (без комментариев). Свой комментарий, мнение или свой вариант предлагайте в пункте 4.

  1. text-decoration: underline;
  2. text-decoration: none;
  3. border-bottom: 1px solid rgba(color, 0.3);
  4. комментарии, мнения и свои варианты

Вывод

Разумеется не стоит фанатично относиться к какому-либо способу. Все зависит от конкретной ситуации и от кучи разных факторов.

К примеру, я сам в своем портфолио makeinrussia.com не использую подчеркивание ссылок, потому что его аудиория: молодые дизайнеры и работодатели. В данном случае мне не нужно беспокоиться о перечисленных проблемах выше.

Думайте о людях, для которых делаете интерфейсы, делайте интернет удобнее.

Стилизация: подчеркивание ссылок

Дата публикации: 2019-09-25

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

«Практическая типография» на Butterick: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или курсив. В особых ситуациях, таких как заголовки, вы также можете рассмотреть возможность использования всех заглавных букв, маленьких заглавных букв или изменения толщины. Не уверены? Я предлагаю вам найти книгу, газету или журнал, в которых акцентируется текст.

Но в Интернете все по-другому. Гиперссылки являются важной частью Интернета; и с самого начала интернета они были подчеркнуты. Это общепризнанное соглашение. Значение кристально ясно — подчеркивание означает ссылку.

Тем не менее, большое количество популярных веб-сайтов убрало подчеркивание: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году Google удалили подчеркивания со страницы результатов поиска, их ведущий дизайнер Джон Уайли заявил, что это создало более чистый вид. Тем не менее, на большинстве этих сайтов сохранилось с небольшими различиями выделение традиционным сине-голубым цветом (#0000EE), который был цветом браузера по умолчанию с самого начала Интернета. Хотя это обеспечивает для большинства пользователей визуальную подсказку, этого может быть недостаточно для обеспечения соответствия доступности WCAG.

Цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. — WCAG 2.1

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

WCAG не обязывает строго использовать подчеркивания для ссылок, но рекомендует их. Пользователи-дальтоники должны иметь возможность различать ссылки. Вы можете выделить их другими способами, например, жирным шрифтом font-weight. Или вы могли бы сохранить эту старую визуальную доступность. Но если мы собираемся использовать подчеркивание, мы хотим, чтобы оно выглядело красиво. Марчин Вичари, дизайнер из Medium, описал идеальное подчеркивание как:

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

Для достижения этого традиционно требовались хитрости CSS.

Хаки, которые мы использовали

С этим трюком должны быть знакомы все разработчики — с помощью :border-bottom. Имитируя подчеркивание с помощью border-bottom, мы получаем контроль над цветом и толщиной. Эти псевдо-подчеркивания имеют одну проблему: слишком большое расстояние от текста. Вы могли бы потенциально решить эту проблему с помощью line-height, но и это имеет свои недостатки. Аналогичная техника использует box-shadow. Марчин Вичари впервые применил самую сложную технику, которая использовала background-image для имитации подчеркивания. Это были полезные хаки, но, к счастью, они больше не нужны.

Стилизация реальных подчеркиваний

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

text-underline-offset контролирует положение подчеркивания.

text-decoration-thickness контролирует толщину подчеркивания.

Согласно блогу WebKit: Вы также можете указать from-font для обоих этих свойств, что задает получение соответствующего показателя из файла используемого шрифта.

UX- агентство Clearleft смело использует (псевдо) подчеркивания, четко обозначая ссылки с помощью красочных стилей. Вот один из примеров искусственного подчеркивания:

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: