Ещё раз про тонкое подчёркивание ссылок на CSS в 2018
6 March 2018, 00:20 MSK
Проблема подчёркивания ссылок в вебе стоит очень давно. Лично я согласен с Ководством Лебедева в том, что ссылки всегда должны быть подчёркнуты.
К сожалению, самый очевидный способ подчеркнуть ссылку — CSS-свойство text-decoration: underline; — имеет массу недостатков. Более-менее красиво такие ссылки будут выглядеть только у пользователей мака или айоса, причём, в любом браузере (спасибо, Эппл). Покажу на примере своего блога.
Внешний вид стандартных ссылок в ИЕ:
Это, конечно, никуда не годится. Линия очень жирная. Внешний вид стандартных ссылок на маке:
Уже лучше, линия тонкая (1 пк), но всё равно есть минусы. Во-первых, линия пересекает нижнюю часть буквы «у». Во-вторых, никаким образом кастомизировать (подвинуть по высоте, покрасить в другой цвет) линию не получится. В-третьих, работает только на яблочных девайсах. Таким образом, использовать свойство text-decoration — не вариант. Мы не будем рассматривать свойства text-decoration-style и другие, потому что их поддерживает полпроцента браузеров. Ищем другие пути.
Не менее очевидный способ подчеркнуть ссылку — воспользоваться CSS-свойством border-bottom: 1px solid #000;. Тут и толщину линии задать можно, и цвет поменять. Именно этот метод используют Студия Лебедева, Илья Бирман и ещё пол-интернета. К сожалению, такие ссылки тоже выглядят некрасиво, особенно, если размер шрифта крупный. Свойство border-bottom задаёт нижнюю границу элемента, поэтому такое «подчёркивание» располагается слишком низко. Пример:
Не трудно заметить, что линия подчёркивания получилась сильно ниже, чем в классическом варианте, что выглядит неестественно.
Существует ещё один вариант, которым почему-то мало кто пользуется, но который обладает минимумом недостатков, предоставляя широкие возможности. Это линейный градиент у фона элемента ссылки. Сразу покажу, как это выглядит:
Во-первых, линия очень тонкая. Во-вторых, она другого цвета. В-третьих, она разрывается вокруг буквы «у». В-четвёртых, работает во всех браузерах (об этом ниже).
Как это сделать на CSS? Сначала убираем стандартное подчёркивание:
a {
text-decoration: none;
}Далее добавляем градиент, который будет задан по оси Y снизу вверх. Схема градиента следующая: прозрачный фон, 1 пиксель цвета, прозрачный фон. Получается так:
a {
text-decoration: none;
background-image: linear-gradient(to top, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);
}Объясняю, что здесь за магия происходит. to top задаёт направление градиента (снизу вверх), rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px задаёт прозрачный цвет на позиции 0 пк, #555 1px задаёт линию толщиной в 1 пк тёмно-серого (#555) цвета, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 60px задаёт прозрачный цвет со 2-ого пикселя и далее (здесь до 100-ого, но это опционально). Таким образом, линию можно подвинуть на любое количество пикселей с нижнего края ссылки, а также задать любой цвет.
Лайфхак: если линии насыщенного цвета (например, чёрной) установить более тусклый цвет (например, тёмно-серый), линия будет казаться тоньше при одинаковой физической толщине в 1 пк.
Линия готова. Теперь сделаем обводку для букв, чтобы подчёркивание разрывалось вокруг них:
a {
text-decoration: none;
background-image: linear-gradient(to top, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);
text-shadow: 1px 0px #fff, -1px 0px #fff;
}CSS-свойство text-shadow задаёт тень белого цвета (#fff, потому что у меня фон белый) слева (-1px 0px) и справа (1px 0px) от букв. Поскольку не указана величина размытия, тень будет толщиной в 1 пк.
Теперь про поддержку браузерами. Согласно сайту кэнайюз линейные градиенты поддерживаются всеми фаерфоксами, хромами и операми, ИЕ11+, сафари 7+, андроидом 4.4+. Чтобы расширить поддержку более допотопными браузерами, воспользуемся префиксами:
a {
text-decoration: none;
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);
background-image: -o-linear-gradient(bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);
background-image: linear-gradient(to top, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, #555 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100px);
text-shadow: 1px 0px #fff, -1px 0px #fff;
}Здесь важно помнить, что у свойства linear-gradient с префиксами направление градиента снизу вверх задаётся не инструкцией to top, а bottom. С префиксами данный метод будет поддерживаться ИЕ10+, сафари 5.1+, андроидом 4+.
Ссылки по теме:
Поделиться
Твитнуть
Телеграмнуть
Вотсапнуть
