Хочу рассказать Вам все о сайтах, что узнал сам за 15 лет.
Блог Виталия Жукова Vitalik.WS Свой сайт с нуля - легко!
Обо мне, как об авторе блога.
Подробнее
Vitalik.WSЗаметки → Прозрачное подчеркивание текста при помощи CSS свойства border

Прозрачное подчеркивание текста при помощи CSS свойства border
Заметка на тему: CSS

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

Основная цель CSS свойства border - это создание границы (как правило какого-то цвета) внутри таблицы. Но энтузиасты-верстальщики могу использовать это и для div блоков, и даже для строк. Как раз последнее нам и нужно.

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

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

Но тут на выручку приходит свойство border, в с которого я и начал эту заметку. Для решения описанной мною выше задачи можно просто сделать нижнюю границу (border-bottom) для текста и она будет смотреться 1 в 1 как подчеркивание, которое нам и требуется. Тут можно указать и цвет этой границы/подчеркивания, и даже тип: линия, точки, черточки и т.д. (читайте подробнее про CSS свойство border).

Но я пошел еще дальше, ведь мне нужно было сделать это подчеркивание прозрачным. Тут на выручку пришло все то же rgba, которое использовалось и в прозрачном фоне (я уже упоминал о нем в начале заметки). В общем выглядеть это будет в итоге вот так:

border-bottom: 1px solid rgba(0, 0, 0, 0.7);

В этом примере показано подчеркивание черным цветом с прозрачностью 30%.

По аналогии можно сделать любую прозрачность для любого цвета, главное найти rgb нужно цвета.

Вот, с прозрачностью для подчеркивания разобрались. Всем удачи с работе с CSS! Если есть какие-то вопросы или дополнения, то буду рад видеть их в комментариях.

Все комментарии к заметке "Прозрачное подчеркивание текста при помощи CSS свойства border"

  • Иван Иванович
    Ответить
    Комментарий #59.1
    Спасибо за информацию, но мне вот надо сделать наоборот - текст прозрачный, а подчёркивание нет. Выставляю тексту opacity: 0.3, а подчёркиванию 1. и никакой реакции.
    добавлен 20 августа 2016 в 18:30
Написать свой комментарий:
Отправить
ВНИМАНИЕ! Пожалуйста НЕ пишите в комментариях рекламу, оскорбления, бессмыслицу и прочие проявления интернет-нечисти, так как эти сообщения всеравно не будут опубликованы. Пишите исключительно по теме и ваш комментарий обязательно будет опубликован, а возможно и прокомментирован.
 Подписывайтесь на мой блог
Хотите первыми узнавать о самом интересном? Тогда подпишитесь на рассылку новостей.
Подписаться
Подписавшись на рассылку, Вы всегда будете в первую очередь узнавать о самой важной и полезной для блоггеров и веб-мастеров информации.