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

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

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

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

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

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

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

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

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

Эффект размытия blur средствами CSS

Декабрь 23, 2015 г.

В интернете много решений, я попробовал, наверное, все :) Основная проблема - не удаётся достичь кросс-браузерности. Как всегда, отличился IE. Для ...

Читать

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

Апрель 29, 2017 г.

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

Читать

 

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

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



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