4 идеи оформления ссылок при наведении через CSS

Ссылки являются основной частью Интернета, связывая всё в единую сеть. Обычно при наведении ссылка подчеркиваестя, либо наоборот, подчеркивание убирается, либо меняется цвет. Я покажу вам ещё четыре идеи оформления ссылок при наведении, используя только CSS.

1. Плавный переход цвета

В CSS3 появилось новое свойство, названное "transition". Можно попробовать использовать его для плавного изменения цвета ссылки (в браузера-дегенератах, например IE, это, конечно, не работает).

Пример: Наведи на меня

a:hover {
   color:#f00;
   -webkit-transition:color 500ms ease-in;
   -moz-transition:color 500ms ease-in;
   -o-transition:color 500ms ease-in;
   transition:color 500ms ease-in;
}

2. Тень

Другой CSS3 трюк - использование тени.

a:hover {
    text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}

Пример: Наведи на меня

3. Смещение

Простой и действенный способ - добавить смещение ссылки в любую из сторон, или сразу в несколько.

a:hover {
    position: relative;
    top: 2px;
}

Пример: Наведи на меня

4. Прозрачность

Изначально ссылки на 50% прозрачные, при наведении прозрачность пропадает. Возможно сделать и наоборот.

a {
    opacity: .5;
}
a:hover {
    opacity: 1;
}

Пример: Наведи на меня

Какие методы используете вы? Жду ваших предложений в комментариях ☺.

Ссылки

• Перевод

Похожие публикации:

1. Эмуляция border-color: transparent в Internet Explorer 6
   К сожалению, Internet Explorer 6 не поддерживает прозрачность для рамок. В CSS это выглядит как border-color: transparent. Поэтому корректно работающий...
2. Порядок записи псевдоклассов для ссылок
   Эрик Мэйер предложил несколько вариантов для запоминания порядка записи псевдоклассов для ссылок. В своей статье, он объяснил, почему он сделал...
3. Горизонтальное Dropline меню на CSS и jQuery
   Для создания Dropline меню достаточно HTML4 и CSS2, но всеми известный Internet Explorer 6 постоянно портит картину и приходится ставить...
4. CSS3PIE
   PIE - .htc файл, позволяющий браузерам Internet Explorer 6-8 отрисовывать наиболее полезные CSS3 красивости: градиенты, тени, скругленные уголки. Возможности border-radius...
5. Хакеры атаковали Google через изъян в браузере Internet Explorer
   Кибер-нападение на Google было осуществлено через брешь в устаревшей версии браузера Microsoft Internet Explorer, сообщает агентство Рейтер со ссылкой на...

Теги: CSS

Поделиться: