Css фільтри в дії
Відео: Фільтри зображень в css: CSS filter
В основному фільтри використовуються для створення галерей з зображеннями. І в цій статті ми створимо просту галерею за допомогою фільтрів.
Ви можете подивитися приклад а також завантажити архів з прикладом:
Подивитися прімерСкачать
Найкраще показує даний ефект браузер 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.
Якщо є якісь питання, задавайте їх у коментарях нижче.