Css фільтри в дії

Відео: Фільтри зображень в css: CSS filter

CSS фільтри в дії

В основному фільтри використовуються для створення галерей з зображеннями. І в цій статті ми створимо просту галерею за допомогою фільтрів.

Ви можете подивитися приклад а також завантажити архів з прикладом:

Подивитися прімерСкачать

Найкраще показує даний ефект браузер Chrome.

Зараз доступні наступні фільтри: відтінки сірого, сепій, насичений, поворот, непрозорість, інвертування, яскравість, контраст, розмиття, тіні. Детальніше про них можна дізнатися тут(На жаль англійською).

У цій статті при створенні галереї будемо використовувати фільтр відтінки сірого і розмиття. А також ми скористаємося селектором : not в процесі розробки.

HTML частина



Створюємо список де будуть знаходитися зображення галереї:

12345678
lt;ul class="Gallery"gt;lt;ligt; lt;img src="Images / 1.jpg"gt; lt;/ligt;lt;ligt; lt;img src="Images / 2.jpg"gt; lt;/ligt;lt;ligt; lt;img src="Images / 3.jpg"gt; lt;/ligt;lt;ligt; lt;img src="Images / 4.jpg"gt; lt;/ligt;lt;ligt; lt;img src="Images / 5.jpg"gt; lt;/ligt;lt;ligt; lt;img src="Images / 6.jpg"gt; lt;/ligt;lt;/ulgt;

CSS частина

Тут нам необхідно зробити так, щоб при наведенні на весь список все елементи ставали сірими, а той, на який навели, мав звичайні властивості. Ви можете це бачити на зображенні нижче:

Ефект при наведенні

Для цього застосуємо необхідні властивості:

123456789101112131415161718192021
.gallery{list-style: none-margin: 50px auto- padding: 0-width: 642px-}.gallery li{display: inline-block-*display: inline-zoom: 1-width: 200px- height: 150px-margin: 2px-border: 5px solid #fff-box-shadow: 0 2px 2px rgba(0,0,0,.1)-transition: all .3s ease-}.gallery: hover li:not(:hover){-webkit-filter: blur(2px) grayscale(1)-opacity: .7-}

Відео: backdrop-filter - CSS filters модуль 2

зауваження

• Справа в тому, якщо браузер не підтримує CSS фільтри, то буде застосована непрозорість.

• І якщо браузер занадто старий, то нічого не станеться.

підтримка

Поки що дані фільтри підтримує повноцінно тільки браузер Chrome.

Якщо є якісь питання, задавайте їх у коментарях нижче.

Успіхів!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!