скачать бесплатно варез, статьи по ucoz php css, новости ...
Суббота, 30.05.2026, 21:43
..::Меню сайта::..
..::Софт разделы::..
Статьи по html [3]
Новости софта [1]
Статьи по css [22]
Статьи по php [2]
Статьи по uCoz [4]
..::Новости Дня::..
..::Наш опрос::..
Оцените мой сайт
Всего ответов: 111
..::Статистика::..

Онлайн всего: 2
Гостей: 2
Пользователей: 0
Главная » Статьи » Статьи по css

Анимационное подчеркивание
Мало кто знает, что при помощи таблиц каскадных стилей подчеркивания под ссылками можно сделать анимационными.

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

<style>

a.sym:link {
text-decoration: none;
font-size: 11px;
font-family: verdana
}

a.sym:hover {
text-decoration: none;
background-image: url(line.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 2px
}

a.sym:active { text-decoration: none }
a.sym:visited { text-decoration: none }

</
style>

Мы определили класс ссылок sym. При этом по умолчанию все ссылки этого класса не имеют подчеркивание (text-decoration: none). При наведении на ссылку, она получает фоновую картинку (background-image: url(line.gif)), которая отображается в необходимой позиции (background-position: 100% 100%, в нашем случае под ссылкой).

В качестве анимационного фона задается небольшая gif-картинка.

В результате все ссылки класса sym будут иметь анимационное подчеркивание.

<a href='' class=sym>Анимационна ссылка, наведи на меня!</a>
Категория: Статьи по css | Добавил: Cheery (05.08.2009)
Просмотров: 1073 | Комментарии: 1 | Теги: Анимационное подчеркивание в css, статьи по css | Рейтинг: 0.0/0 |
Всего комментариев: 1
1 Caelyn  
0
I am forever inedtbed to you for this information.

Имя *:
Email *:
Код *:
..::Форма входа::..
..::Поиск::..
..::Софт каталог::..