Сегодня я хочу рассказать, как сделать красивый эффект плавной смены цвета текста без использования 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.

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

    Отправить ответ

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

    Уведомлять
    avatar
    5000
    Лис
    Гость

    Здравствуйте Назар.
    Да вообще то, суть такова.. понадобились мне кнопки для меню сайта. Прочитал вот по этому материалу.
    Старые невзрачные, да и вообще желалось бы переделать. Ну, не боги горшки обжигают, стараюсь, но все равно много не ясного. Вот сложил разметку HTML под свои нужды. Аравильно ли, иль чего упустил? Как всю эту лабуду
    оформить в css для меня трудновато. Много читаю, изучаю и html и css но теория одно, а практики нету…
    Вот бьюсь как рыба в сетке, да и надоедать своими проблемами по совести говоря – не хочу. Никому.

    Лис

    Лис
    Гость

    Спасибо Назар.
    Так и есть, чужое оно и есть чужое ).
    Да бог с ним! Интересно ваше выпадающее меню. Вот и буду “грызть” его, чтоб подогнать под свои нужды. А вам спасибо за подсказку!
    С Ув. Лис

    Лис
    Гость

    Приветствую Назар!
    Не стоит на какого то лиса ) тратить свое время, которого у вас итак в обрез. Не горит…
    У вас итак достаточно прекрасного материала и по html и css. Впрочем речь идет о 3D кнопке.
    Как нить я найду этот материал чтобы вам показать что это и скину ссылку. С Ув. Лис
    Желаю вам творческих успехов!
    Ок?

    Лис
    Гость

    Добрый вечер Назар! Хотелось бы….
    хотелось чтобы вы осветили интересный на мой взгляд
    скрипт кода под 3D кнопки. (css). Разной формы, дизайна, цвета.
    Это было бы интересно, ежели время у вас есть конечно.

    С Ув. Лис

    Лис
    Гость

    Назару Токарю спасибо!
    Все отлично и без дополнительного класса. Изменяя в css параметры цветов и времени, можно крутить как угодно подгоняя эффекты цветовой гаммы – под себя.
    С Ув. Лис

    Лис
    Гость

    Назар! тоже рад. Спасибо!
    Не мне одному пригодится, многим. Это прочитал.. Друзья, я вкладываю душу и время в свой блог уже 6 лет и у меня к вам человеческая просьба: не воруйте контент и скрипты.
    С уважением и пониманием отношусь к просьбе. Если чего, только с разрешения Назара.
    Одно паршиво Назар, нет кнопки вставки кода на блоге. С ней намного проще понять сам код, скобки, отступы и прочеее.
    Впрочем это так, к слову.. (в чужой монастырь со своим уставом не ходят)
    Извини уж )

    Михаил Новиков
    Участник

    Мне надо поменять цвета в магазинах двищоксимпла, как это научите?

    Ярослав
    Гость

    Спасибо большое! Очень помогло. Сначала хотел сделать onMouseOver, но забил.

    wpDiscuz