Как обесцветить картинку (изображение) средствами CSS

обесцветить изображение css

Довольно заурядная и простая в реализации задача – обесцвечивание изображения средствами только CSS, но вот синтаксис почемуто постоянно вылетает зи головы. Небольшая заметка о том как обесцветить изображение с помощью CSS в качестве напоминания и как небольшой урок для верстальщиков.

Делается это с помощью функции с очень богатыми возможностями filter. Далее код а лирику оставим на конец.

Обесцветить изображение с помощью CSS – код:

Где .my_img – класс нужного изображения.

Далее таким же способом просто сделать эффект перехода от обсесцвеченной картинки к цветной при наведении (или наоборот):

Данный код из обесцвеченной картинки при наведении корсура делает ее цветной, код после /* анимация плавного перехода */

– добавляет переходу плавности.

Вот впринципе и весь “мудреный”  урок CSS с пмощью котогоро можно сделать симпатичные эффекты для сайта с использованием только ЦСС с обесцвечиванием картинки и наоборот с возвращением цвета обесцвеченной картинки (ну и памятка-шпаргалка для себя любимого).

Код работает во всех популярных браузерах (извращенцы  любители IE как всегда отдыхают), не требует подключения дополнительных библиотек, тем самым, не нагружает сайт и позволяет создать “крутые” эффекты с минимумом усилий и знаний.

 

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *