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

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

RGBA

С появлением формата RGBA (Red Green Blue Alpha) в CSS3 можно считать данную проблему решенной. Используя расширенный формат представления цвета, у веб-дизайнеров появилась возможность использовать альфа-прозрачность для цвета.

В отличие от свойства opacity его можно применить и к шрифту и к бордерам и к фону блока без изменения прозрачности содержимого блока. Цветовые значения RGBA являются продолжением цветовых значений RGB только с альфа-каналом — который определяет непрозрачность объекта.

Синтаксис

color: rgba(0,96,160); / * синий цвет */
color: rgba(0,96,160,0.2); / * синий цвет с прозрачностью */

Значение цвета RGBA задается: ​​RGBA (красный, зеленый, синий, альфа).
Параметр альфа представляет собой число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Совместимость

Цветовые значения RGBA поддерживаются браузерами: IE9 +, Firefox 3 +, Chrome, Safari, и Opera 10 +.

Кто внедрил

Данной возможностью сразу же воспользовалась Студия Лебедева, Дизайн-бюро Артёма Горбунова, Илья Бирман… На их сайтах подчеркивание ссылок осталось, но оно стало более изящным.

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

Пример кода

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

a:link {
 color: #0060a0;
 border-bottom: 1px solid;
 border-bottom-color: rgba(0,96,160,0.2);
}
a:hover {
 color: #d04000;
 border-bottom-color: rgba(255,218,202,0.5);
}

Понравилась статья? Поделиться с друзьями:
Комментарии: 2
  1. EKT

    Спасибо! 2 час поиска пока не нашел этот совет. Статья уникальная в своем роде. Удачи!

    1. fortress-design

      Спасибо за благодарность.

Добавить комментарий

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