Як знебарвити картинку (зображення) засобами CSS

знебарвити зображення css

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

Робиться це за допомогою функції з дуже багатими можливостями filter. Далі код а залишимо лірику на кінець.

Знебарвити зображення з допомогою CSS – код:

Де .my_img – клас потрібного зображення.

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

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

– додає переходу плавності.

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

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

 

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *