Как реализовать на css плавное изменение цвета

Плавные переходы, которые стали возможны в версии CSS3, добавили кучу возможностей для веб-разработчиков, которые раньше можно было осуществить только на JavaScript. В этой статье давайте разбираться, как легко реализовать на css плавное изменение цвета.

Возможности свойства transition

И в этом нам поможет замечательное CSS3-свойствоtransition. Для примера создадим в html обычный блочный элемент, покрасим его в произвольный цвет (например, желтый) и зададим определенные размеры. Что теперь нужно сделать, чтобы реализовать с помощью css плавное изменение цвета у этого блока?

Во-первых, нужно дописать в его стили еще одно свойство. Оно никак не повлияет на внешний вид блока, но обеспечит нужное нам плавное изменение.
transition: 1s;

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

Block{
	Background: red
} 

Итак, если все сделано правильно, то при наведении на элемент курсора его цвет изменится с желтого на красный и это произойдет не резко, а плавно.

Возможно, вам нужно плавно изменить цвет не после наведения курсора, а после клика мышкой по блоку или другого события. Что ж, тут возможностями одного css не справится, придется подключать javascript-сценарии. Но это тема для отдельной статьи, потому что сегодня я хотел рассказать именно о плавном изменении цвета на css.

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

Поддержка в браузерах

Свойство transition поддерживается в современных браузерах, но старые веб-обозреватели о нем ничего не знают (IE 6-9, старые версии Opera, Mozilla). Поэтому если вам нужна кроссбраузерность сайта, то придется идти на дополнительные меры. В любом случае, можно просто отказаться от поддержки свойства в старых браузерах, пусть пользователи обновляют свое ПО smile

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: