Можно создать свой собственный вид подчеркивания ссылок, используя для этого графическое изображение. Рисунок подойдет не всякий, он должен обладать двумя качествами:
Высоту линии можно сделать и больше трех пикселов, если добавляем к селектору A параметр padding.
На рис. 1 показно исходное изображение, которое годится для разработки подчеркивания, а также его увеличенный вариант.
Рис. 1. Картинка для разработки подчеркивания у ссылки
После разработки рисунка в графическом редакторе, следует определить стиль, как показано в примере 1. Основным элементом для установки линии выступает стилевой параметр background. Это универсальный атрибут, который определяет характеристики фонового Имаги, в частности, путь к графическому файл, а также смещение фона относительно левого верхнего угла элемента. В данном случае требуется только сдвинуть фоновый рисунок вниз на высоту контента, для этого используется относительная единица em, равная высоте шрифта элемента. Кроме того, чтобы рисунок повторялся только по горизонтали, добавляем к параметру background аргумент repeat-x.
Пример 1. Добавление графической линии к ссылкам
Если контент ссылки дастаткова длинный и занимает две и более строки, то рисунок отображается только под первой строкой. Чтобы ликвидировать эту особенность, для селектора A введен атрибут white-space со значением nowrap, он отменяет переносы в контенте и отображает его одной строкой. Учтите, что при этом возможно появление горизонтальной полосы прокрутки. Это, пожалуй, единственный недостаток данного способа, который следует принимать во внимание.
Путь к изображению указывается с помощью ключевого слова url, после которого в скобках пишется адрес рисунка. Число 0 в данном примере означает смещение Имаги по горизонтали, а 1.1em — вниз по вертикали. Вы можете незначительно менять это число в ту или иную сторону, подбирая наилучший вариант в зависимости от используемого рисунка. Окончательный результат использования графической линии в ссылках показан ниже.
В примере у ссылок убирается нижняя полоска в контенте (text-decoration: none), чтобы оно не мешало восприятию. К тому же классическая линия под контентом плохо сочетается с линией декоративной.
Интересный эффект можно получить, если использовать анимированное изображение. Например, в качестве подчеркивания добавляем статичный рисунок, а при наведении на ссылку он будет меняться на другой. Для этого уже потребуется две картинки, первая показана на рис. 1, а вторая, статичная приведена на рис. 2.
Рис. 2. Картинка для анимации линии подчеркивания
После чего добавление линии происходит, как уже было описано в примере 1, за исключением того, что фоновый рисунок устанавливается для селектора A и псевдокласса hover (пример 2).
Пример 2. Добавление анимированной линии к ссылкам
Copyright © Все права засчищены
www.www-html.ru