17 сентября 2013 г.
1 991
Рубрика: уроки

Плавная смена цвета ссылки без скриптов

Xочу рассказать, как сделать красивый эффект плавной смены цвета текста без использования javascript, при помощи html и css

Сегодня я хочу рассказать, как сделать красивый эффект плавной смены цвета текста без использования javascript, при помощи html и css.

animate css

Такой эффект после редизайна используется повсеместно на сайте Лента.ру — при наведении на любую ссылку ее цвет плавно меняется с серого на темно-красный. Попробуем повторить.

Этого эффекта мы сможем добиться при помощи jQuery и плагина jQuery.Color, но его функционал намного объемнее, чем просто менять цвет текста и задача усложнится. Поэтому мы можем обойтись без дополнительных средств.

Создание эффекта

Для всех ссылок, цвет которых должен плавно меняться при наведении нужно добавить класс. Назовем его changeme:

<a href="/index.html" class="changeme">Пример ссылки</a>

Далее нужно добавить в CSS обработку ссылок. В этом примере я использовал свойство transition-duration, которое задает длительность анимации и hover, в котором будет указано, на какой цвет должн меняться текст.

Код получится таким:

a { /* обычная ссылка */
color: grey;
}
a.changeme { /* анимация */
-webkit-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
transition-duration: 0.5s;
}
a.changeme:hover { /* цвет при наведении */
color: red;
}

В результате при наведении курсора на ссылку ее цвет в течение 0.5 секунды будет меняться с серого на красный. Если курсор убрать, ссылка вернется к серому цвету. Таким же образом можно менять множество характеристик текста. Например: прозрачность, цвет фона, отступы и так далее.

Если же вы хотите, чтобы все ссылки на сайте менялись при наведении, дополнительный класс можно отбросить и код CSS будет таким:

a { /* обычная ссылка */
color: grey;
}
a { /* анимация */
-webkit-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
transition-duration: 0.5s;
}
a:hover { /* цвет при наведении */
color: red;
}

Нестандартные свойства -webkit-transition-duration, -o-transition-duration, -moz-transition-duration здесь используются для устаревших версий браузеров, не поддерживащих CSS3.

Демо и скачать

уроки
css html