|
Декоративное подчеркивание у
ссылок
Можно создать свой собственный вид подчеркивания ссылок, используя для этого
графическое изображение. Рисунок подойдет не всякий, он должен обладать двумя
качествами:
- картинка должна быть бесшовной, иными словами, состыковываться сама с
собой по горизонтали, это необходимо для получения плавной неразрывной линии;
- высота линии не должна превышать 3 пиксела, все остальное будет
«обрезано».
Высоту линии можно сделать и больше трех пикселов, если добавить к селектору A параметр padding.
На рис. 1 показно исходное изображение, которое годится для создания
подчеркивания, а также его увеличенный вариант.
Рис. 1. Картинка для создания подчеркивания у ссылки
После создания рисунка в графическом редакторе, следует определить стиль, как
показано в примере 1. Основным элементом для установки линии выступает
стилевой параметр background. Это универсальный
атрибут, который определяет характеристики фонового изображения, в частности,
путь к графическому файл, а также смещение фона относительно левого верхнего
угла элемента. В данном случае требуется только сдвинуть фоновый рисунок вниз на
высоту текста, для этого используется относительная единица em, равная высоте
шрифта элемента. Кроме того, чтобы рисунок повторялся только по горизонтали,
добавляем к параметру background аргумент repeat-x.
Пример 1. Добавление графической линии к ссылкам |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
A {
text-decoration: none;
padding: 3px;
white-space: nowrap
}
A:hover {
background:
url('/images/arrow.gif')
0px 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, после которого в скобках пишется адрес рисунка. Число
0px в данном примере означает смещение изображения по горизонтали, а 1.1em —
вниз по вертикали. Вы можете незначительно менять это число в ту или иную
сторону, подбирая наилучший вариант в зависимости от используемого рисунка.
Окончательный результат использования графической линии в ссылках показан
ниже.
В примере у ссылок убирается подчеркивание (text-decoration: none), чтобы оно не мешало восприятию. К
тому же классическая линия под текстом плохо сочетается с линией декоративной.
Интересный эффект можно получить, если использовать анимированное
изображение. Например, в качестве подчеркивания добавить статичный рисунок, а
при наведении на ссылку он будет меняться на другой. Для этого уже потребуется
две картинки, первая показана на рис. 1, а вторая, статичная приведена на рис.
2.
Рис. 2. Картинка для анимации линии подчеркивания
После чего добавление линии происходит, как уже было описано в
примере 1, за исключением того, что фоновый рисунок устанавливается для
селектора A и псевдокласса hover (пример 2).
Пример 2. Добавление анимированной линии к ссылкам |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
A {
text-decoration: none;
padding: 3px;
background: url('/images/arrow1.gif')
0px 1.1em
repeat-x
}
A:hover {
background: url('/images/arrow2.gif')
0px 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> |
У стилевого параметра background для разных
селекторов меняется только значение url. Остальные
аргументы совпадают, чтобы не произошло смещения рисунков. Полученный результат
данного примера показан ниже.
Примечание |
Приведенные способы не работают в браузере Opera версии 6 и ниже,
поскольку он не применяет свойство background к тегу <A>. В браузере Internet Explorer 5 и ниже для
ссылок не устанавливаются поля, задаваемые атрибутом padding. По этой причине смещение линии вниз следует
уменьшить, например, до 0.9em. В любом случае это значение индивидуально и
связано с используемым рисунком. |
|
|
|