Вы здесь: Главная > CSS > Индивидуальные подчёркивания ссылок

Индивидуальные подчёркивания ссылок

Опубликовано автором Просмотры: 19

Чтобы применить подчёркивание к ссылкам, которые немного отличаются от простых text-decoration: underline, вы можете отключить подчёркивание и использовать некоторые другие приспособления для достижения эффекта подчёркивания.

Стандартные подчёркивания, границы и изображения.

Границы

Вы можете применить рамку к нижней части ссылки, что даёт вам возможность контролировать цвет подчёркивания (в то время как text-decoration подчёркивание будет применяться только того же цвета, что и текст самой ссылки), а также узор границы:

a {
    text-decoration: none;
    border-bottom: 2px dotted #0c0;
}

Изображения

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

p {
    line-height: 2;
}

a {
    text-decoration: none;
    padding-bottom: 5px;
    background: url(images/underline_greenspots.gif) bottom repeat-x;
}

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

Переходы

Базовое подчёркивание можно включать и выключать при наведении курсора на ссылку с помощью CSS, такого как этот:

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Однако переходы дают вам больше контроля над этим, и вы можете сохранить подчёркивание, но вместо того, чтобы просто показывать его и скрывать, вы можете переходить между двумя цветами:

a {
    color: rgb(0,102,204);
    text-decoration: none;
    border-bottom: 2px solid rgba(0,102,204,.2);
    -webkit-transition: .5s;
    transition: .5s;
}

a:hover {
    border-color: rgb(0,102,204);
}

Это начнётся с полупрозрачного блеклого подчёркивания, которое плавно станет сплошным синим при наведении курсора мыши на ссылку.

В предыдущем примере используется RGBa, который не будет понятен Internet Explorer 8 и ниже. Если вы хотите адаптировать старые браузеры, не забудьте включить резервный сплошной цвет рядом с вашим цветом RGBa. Итак, если бы ваши ссылки отображались, например, на белом фоне, вы могли бы разместить border-bottom: 2px solid rgb(204,224,245); перед (или вместо, если вас не беспокоит прозрачность) border-bottom: 2px solid rgba(0,102,204,.2);

Вы можете увидеть вариации на эту тему на странице примеров простых CSS-переходов.

Страницы в тему:

Примеры CSS^

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