На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

CSS-дизайн: нестандартное подчеркивание ссылок

CSS Design: Custom Underlines

Несмотря на то, что веб-дизайнеры имеют в своем распоряжении широкую палитру возможностей управления внешним видом документов, основные функции 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.

Автор: Stuart Robertson и A List Apart
Перевод: Мамяшев Марат
Источник: webmascon

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100