Декоративные линии подчеркивания

CSS	Декоративные линии подчеркивания
меню

Ссылки Гостевая книга

Статьи > Декоративные линии подчеркивания

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

Изображение можно присвоить гиперссылке с помощью приведенного ниже кода.

   a:link, a:visited {
      color : #666;
      text-decoration : none;
      font-size :20px;
      background: url(underlinel.gif) repeat-x left bottom;
   }

Примеры: [1]

Результат показан на рис.

Использование декоративной линии подчеркивания

Для следующего примера мы создали анимационный файл GIF, выводимый при активации гиперссылки или наведении на него указателя. Файл GIF подключается средствами CSS.

   a:hover, a:active {
      background-image: url(underlinel-hover.gif);
   }

Примеры: [1]

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