Декоративное подчеркивание у ссылок
Можно создать свой собственный вид подчеркивания ссылок, используя для этого графическое изображение. Рисунок подойдет не всякий, он должен обладать двумя качествами:
- картинка должна быть бесшовной, иными словами, состыковываться сама с собой по горизонтали, это необходимо для получения плавной неразрывной линии;
- высота линии не должна превышать 3 пиксела, все остальное будет «обрезано».
Высоту линии можно сделать и больше трех пикселов, если добавить к селектору A параметр padding.
На рис. 1 показно исходное изображение, которое годится для создания подчеркивания, а также его увеличенный вариант.
Рис. 1. Картинка для создания подчеркивания у ссылки
После создания рисунка в графическом редакторе, следует определить стиль, как показано в примере 1. Основным элементом для установки линии выступает стилевой параметр background. Это универсальный атрибут, который определяет характеристики фонового изображения, в частности, путь к графическому файл, а также смещение фона относительно левого верхнего угла элемента. В данном случае требуется только сдвинуть фоновый рисунок вниз на высоту текста, для этого используется относительная единица em, равная высоте шрифта элемента. Кроме того, чтобы рисунок повторялся только по горизонтали, добавляем к параметру background аргумент repeat-x.
Пример 1. Добавление графической линии к ссылкам
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Линия у ссылок</title>
<style type="text/css">
A {
text-decoration: none; /* Убираем подчеркивание у ссылок */
padding: 3px; /* Поля вокруг текста ссылки */
white-space: nowrap; /* Нет переноса текста */
}
A:hover {
background: url('/images/arrow.gif') /* Картинка для подчеркивания */
0 1.1em /* Смещение рисунка по горизонтали и вертикали */
repeat-x; /* Повторение фона по горизонтали */
}
</style>
</head>
<body>
<p><a href="link1.html">Ссылка 1</a></p>
<p><a href="link2.html">Ссылка 2</a></p>
<p><a href="link3.html">Ссылка 3</a></p>
</body>
</html>
Если текст ссылки достаточно длинный и занимает две и более строки, то рисунок отображается только под первой строкой. Чтобы ликвидировать эту особенность, для селектора A введен атрибут white-space со значением nowrap, он отменяет переносы в тексте и отображает его одной строкой. Учтите, что при этом возможно появление горизонтальной полосы прокрутки. Это, пожалуй, единственный недостаток данного способа, который следует принимать во внимание.
Путь к изображению указывается с помощью ключевого слова url, после которого в скобках пишется адрес рисунка. Число 0 в данном примере означает смещение изображения по горизонтали, а 1.1em — вниз по вертикали. Вы можете незначительно менять это число в ту или иную сторону, подбирая наилучший вариант в зависимости от используемого рисунка. Окончательный результат использования графической линии в ссылках показан ниже.
В примере у ссылок убирается подчеркивание (text-decoration: none), чтобы оно не мешало восприятию. К тому же классическая линия под текстом плохо сочетается с линией декоративной.
Интересный эффект можно получить, если использовать анимированное изображение. Например, в качестве подчеркивания добавить статичный рисунок, а при наведении на ссылку он будет меняться на другой. Для этого уже потребуется две картинки, первая показана на рис. 1, а вторая, статичная приведена на рис. 2.
Рис. 2. Картинка для анимации линии подчеркивания
После чего добавление линии происходит, как уже было описано в примере 1, за исключением того, что фоновый рисунок устанавливается для селектора A и псевдокласса hover (пример 2).
Пример 2. Добавление анимированной линии к ссылкам
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Линия у ссылок</title>
<style type="text/css">
A {
text-decoration: none; /* Убираем подчеркивание у ссылок */
padding: 3px; /* Поля вокруг текста ссылки */
background: url('/images/arrow1.gif') /* Путь к исходному изображению */
0 1.1em repeat-x; /* Положение фона */
}
A:hover {
background: url('/images/arrow2.gif') /* Путь к анимированному изображению */
0 1.1em repeat-x; /* Положение фона */
}
</style>
</head>
<body>
<p><a href="link1.html">Ссылка 1</a></p>
<p><a href="link2.html">Ссылка 2</a></p>
<p><a href="link3.html">Ссылка 3</a></p>
</body>
</html>
| Статья опубликована: 03.10.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Sam
12.04.2007
Пользуйте вложенные div и другие при?мы. Лично меня бесит такая "колбаса".
Yoon (Latvia)
18.04.2007
comx
28.04.2007
Jana
30.04.2007
Интересный пример!GeorgeDrive
07.06.2007
LuLok
18.09.2007
Стефан
03.03.2008
Nika
06.03.2008
netrino
28.03.2008
