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

17 сентября 2013 г.

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

4 комментариев
 
1 341 просмотров

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

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

Интересные посты

4 комментариев

  • Ярослав
    15:31, 8 марта 2014 #1

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

    Ответить

    Назар Токарь

    @Ярослав, это фактически он и есть, только не в js, а на html.

    Ответить

  • Михаил Новиков
    00:30, 19 марта 2014 #2

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

    Ответить

    Назар Токарь

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

    Рекомендую вам произведения Пикуля, Ярослава Гашека, Чехова, Толстого, Довлатова. После прочтения попробуйте перефразировать ваш вопрос так, чтобы он был понятен не только вам.

    Спасибо, желаю вам успехов.

    Ответить

Оставь комментарий сейчас

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

Это займет два клика и пройдет совершенно безопасно.

Войти при помощи:

Отныне и вовеки здесь можно добавлять свой код в комментариях. Для этого используйте тег <code>. Теперь-то заживем.
Форум по скриптам: отзывы, помощь, обсуждение

Заказать работу · Отзывы