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

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

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

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

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

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

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

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

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

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

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

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

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

Читать

 

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

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



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