Эффект исчезновения/появления цветности CCS3

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его — «игра с цветностью».

Он не плох для выделения иконок меню, анимации выбранной картинки в списке (портфолио, список фотографий и т.п.).

Вот как он работает (наведитесь на картинку):

При наведении, обесцвеченное изображение «набирает» цветность. Так как картинка одна, то я сделал набор цветности длительным (3 секунды).

Давайте рассмотрим стили. Они очень простые:

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

Написать комментарий

Мало букафф? Читайте есчо !

Создаём ripple эффект

Апрель 29, 2017 г.

Ripple эффект - это анимация, визуально напоминающая расходящийся круг. Иногда накладывают несколько эффектов сразу и это выглядит как расходящиеся круги ...

Читать

Делаем треугольник на CSS с помощью border

Апрель 19, 2016 г.

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: ...

Читать

 

Комментарии к «Эффект исчезновения/появления цветности CCS3»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: