Stuart Robertson и A List Apart
	Мамяшев Марат
	WEBMASCON

Несмотря на то, что веб-дизайнеры имеют в своем распоряжении широкую палитру возможностей управления внешним видом документов, основные функции CSS не предусматривают того же относительно вида подчеркивания ссылок на страницах. Но благодаря нескольким новым приемам, вы сможете изменить так же и вид ваших гиперссылок.

Такой "обогащенный" вид ссылок позволяет внести некоторое разнообразие, что, безусловно, может быть полезно. Этот прием так же может быть использован для разграничения различных типов ссылок внутри самого сайта.

Итак, начнем.

Начните с создания вашей собственной черты. Графика должна повторяться горизонтально, и если Вы хотите, чтобы сквозь нее был виден фон сайта, то создайте прозрачный .gif файл.

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

p { line-height: 1.5; }

Прежде чем мы займемся созданием собственных линий подчеркивания для ссылок, нам надо отключить вариант, установленный по умолчанию:

a { text-decoration: none; } 

Чтобы создать свой собственный вид подчеркивания ссылки, возьмем нарисованную нами картинку в качестве фона:

a { background-image: url(underline.gif); }

Нам нужно, чтобы наша графика повторялась только горизонтально под нашим текстом, и ни в коем случае не вертикально, т.к. тогда она будет отображаться позади текста самой ссылки. Ограничим повтор фона горизонтальной осью.

a { background-repeat: repeat-x; }

Чтобы быть уверенным в том, что наша графика отображается под текстом независимо от размера шрифта, мы будем использовать свойство "background-position", которое и "привяжет" изображение к нижней части строки. Для различных видов изображений - таких, например, как стрелки, - можно использовать другие варианты выравнивания. В нашем случае будет использоваться выравнивание по правому нижнему углу.

a { background-position: 100% 100%; }

Для того, чтобы добавить чуть-чуть свободного пространства между графикой и текстом, нужно увеличить нижний отступ. Текущая позиция нашего изображения под текстом ссылки будет варьироваться в зависимости от размера шрифта. Я предлагаю для начала сделать нижний отступ равным высоте вашего изображения, а потом отрегулировать его в зависимости от ваших вкусов:

a { padding-bottom: 4px; }

Так как картинка помещена внизу нашего элемента, нам следует позаботиться о том, чтобы ссылка не переходила на другую строку. (Если перенос будет разрешен, подчеркнутой будет только нижняя строка). Используем свойство CSS "white-space property", чтобы запретить перенос.

a { white-space: nowrap; }

Теперь все эти свойства можно объединить:

a {
      text-decoration: none; 
      background: url(underline.gif) repeat-x 100% 100%;
      padding-bottom: 4px;
      white-space: nowrap;
}

Если же вы хотите, чтобы этот эффект появлялся только при наведении курсора на ссылку, просто присвойте свойство "background" и его описание псевдо-классу ":hover".

a {
      text-decoration: none;
      padding-bottom: 4px;
      white-space: nowrap;
}

a:hover {
      background: url(underline.gif) repeat-x 100% 100%;
}

Примеры

Вот несколько примеров того, что можно создать при помощи этого приема.

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

А вот посмотрите на эту крутую статичную ссылку и ту же ссылку с rollover-эффектом.

А этот статический и анимированный rollover-вариант можно использовать для обозначения внешних ссылок (правда, анимированные гифы поддерживаются не всеми браузерами: например, Safari 1.0 показывает только первый фрэйм анимированного .gif'а).

Стюарт Робинсон

Stuart Robertson is a web designer living in Ontario, Canada.

При перепечатке любого материала с журнала или с сайта, видимая ссылка на источник http://altwebdeveloper.nm.ru и все имена, ссылки авторов обязательны.

© 2004 CAS "altDesign"
© Валерий В. Макеев (deepInfinity)

CAS "altDesign" - создание сайтов от простых домашних страничек до крупных сетевых порталов.