Главная страница статей --> Хитрости при программировании php, заметки по базам данных

Анимационное подчеркивание

Источник: realcoding.net

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

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

<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>



Похожие статьи:
- Установка Apache с поддержкой SSL
- Рекламный лозунг сайта
- Технология Drag & Drop
- Анимационная Favicon
- Работа с SQLite
- Киберсквотинг и киберсквотеры
- Ода раскрутке
- Определение размера удаленного файла
- Эффект плавного перехода на JavaScript
- Комплекс Denwer: Apache+PHP+MySQL+Perl за 5 минут
- Опрос с помощью AJAX
- Фиксирование шрифтов на странице с помощью таблицы стилей
- Свойства текста


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]