Категории раздела
Статьи по html [7]
Статьи по php [8]
Раскрутка сайта [9]
Базы данных [3]
Поисковые системы [6]
Статьи по css [9]
Мини-чат
Наш опрос
Общая оценка сайта
Всего ответов: 34
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пятница, 29.03.2024, 12:07
Приветствую Вас Гость
Поиск
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Мой сайт
    Главная » Статьи » Статьи по 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 | Добавил: stazis (15.05.2009)
    Просмотров: 777 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Copyright MyCorp © 2024

    Сделать бесплатный сайт с uCoz