CSS3-фільтри відтворюють в браузері візуальні ефекти, схожі на фільтри Photoshop. Фільтри можна додавати не тільки до зображень, але і до будь-яких непустою елементам.
Набір фільтрів не обмежується встановленим в браузері. Ви також можете використовувати фільтри SVG, завантаживши їх за посиланням разом з елементом svg.
Спочатку фільтри були створені як частина специфікації SVG. Їх завданням було застосування ефектів, заснованих на піксельної сітці до векторної графіки. З підтримкою SVG браузерами з'явилася можливість використовувати ці ефекти безпосередньо в браузерах.
Браузери обробляють сторінку попиксельно застосовуючи задані ефекти і малює результат поверх оригіналу. Таким чином, застосовуючи кілька фільтрів можна досягати різних ефектів, вони як би накладаються один на одного. Чим більше фільтрів, тим більше часу потрібно браузеру, щоб отрисовать сторінку.
Можна застосовувати кілька фільтрів одночасно. Класичний спосіб застосування таких ефектів - при наведенні на елемент: hover.
підтримка браузерами
IE: не підтримує
Edge: 13.0 крім url ()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-
| filter | |
|---|---|
| blur () | Значення задається в одиницях довжини, наприклад px, em. Застосовує розмиття по Гауса до вихідного зображення. Чим більше значення радіуса, тим більше розмиття. Якщо значення радіуса не задано, за умовчанням береться 0. |
| brightness () | Значення задається в% або в десяткових дробах. Змінює яскравість зображення. Чим більше значення, тим яскравіше зображення. Значення за замовчуванням 1. |
| contrast () | Значення задається в% або в десяткових дробах. Регулює контрастність зображення, тобто різницю між самими темними і найсвітлішими ділянками зображення / фону. Значення за замовчуванням 100%. Нульове значення приховає вихідне зображення під темно-сірим фоном. Значення, що збільшуються від 0 до 100% або від 0 до 1, будуть поступово відкривати вихідне зображення до оригінального відображення, а значення понад збільшуватимуть контраст між світлими і темними ділянками. |
| drop-shadow () | Фільтр діє подібно властивостям box-shadow і text-shadow. Використовує такі значення: зсув по осі Х зсув по осі Y розмитість розтягнення колір тіні. Відмітна особливість фільтра полягає в тому, що тінь додається до елементів і його вмісту з урахуванням їх прозорості, тобто якщо елемент містить текст всередині, то фільтр додасть тінь одночасно для тексту і видимих \u200b\u200bкордонів блоку. На відміну від інших фільтрів, для цього фільтра обов'язково завдання параметрів (мінімальне - величина зміщення). |
| grayscale () | Витягує все кольору з картинки, роблячи на виході чорно-біле зображення. Значення задається в% або десяткових дробах. Чим більше значення, тим сильніше ефект. |
| hue-rotate () | Змінює кольори зображення в залежності від заданого кута повороту в колірному колі. Значення задається в градусах від 0deg до 360deg. 0deg - значення за замовчуванням, означає відсутність ефекту. |
| invert () | Фільтр робить негатив зображення. Значення задається в%. 0% не застосовує фільтр, 100% повністю перетворює кольори. |
| opacity () | Фільтр працює за аналогією з властивістю opacity, додаючи прозорість елементу. Відмітна особливість - браузери забезпечують апаратне прискорення для фільтра, що дозволяє підвищити продуктивність. Додатковий бонус - фільтр можна одночасно поєднувати з іншими фільтрами, створюючи при цьому цікаві ефекти. Значення задається тільки в%, 0% робить елемент повністю прозорим, а 100% не робить ніякого ефекту. |
| saturate () | Управляє насиченістю кольорів, працюючи за принципом контрастного фільтра. Значення 0% прибирає кольоровість, а 100% не робить ніякого ефекту. Значення від 0% до 100% зменшують насиченість кольору, вище 100% - збільшують насиченість кольору. Значення може здаватися як в%, так і цілим числом, 1 еквівалентно 100%. |
| sepia () | Ефект, що імітує старовину і «ретро». Значення 0% не змінює зовнішній вигляд елемента, а 100% повністю відтворює ефект сепії. |
| url () | Функція приймає розташування зовнішнього XML-файла з svg-фільтром, або якір до фільтру, що знаходиться в поточному документі. |
| none | Значення за замовчуванням. Чи означає відсутність ефекту. |
| initial | Встановлює це властивість в значення за замовчуванням. |
| inherit | Успадковує значення властивості від батьківського елемента. |
Найпростіший спосіб знебарвлення кольорового зображення - за допомогою CSS. Зазвичай фільтр застосовується до класу, так як нерідко потрібно створити однаковий ефект у декількох зображень:
100 % ) ; }
Задати клас зображенню теж просто:
Додавання фільтра SVG
Код CSS, показаний вище, працює у всіх сучасних версіях браузерів, як на настільних комп'ютерах, так і на мобільних пристроях, включаючи браузер Microsoft Edge.
Щоб домогтися такого ж ефекту в браузері Firefox до версії 35, знадобиться використовувати фільтр SVG, який створимо в окремому файлі під назвою desaturate.svg. У цьому файлі буде наступний код:
Якщо код SVG вище виглядає злегка лякаюче і масив в ньому занадто складний, не хвилюйтеся. Це один з фрагментів коду, який ми радимо просто копіювати і вставляти як стандартний рецепт для створення чорно-білого зображення.
Разом з цим файлом SVG, які є поруч зі сторінкою HTML і потрібним зображенням, код CSS доповниться такий рядком:
Img.desaturate (filter: grayscale ( 100 % ); filter: url (desaturate .svg #greyscale) ; }
Додавання підтримки браузера Internet Explorer
Щоб ефект працював в браузері Internet Explorer від 6 до 9 версій, застосуємо простий власний фільтр корпорації Microsoft:
Img.desaturate (filter: gray; filter: grayscale ( 100 % ); filter: url (desaturate .svg #greyscale) ; }
Якщо потрібно додати підтримку застарілих версій браузерів на движку Webkit, розширимо код таким чином:
Img.desaturate (-webkit-filter: grayscale (1); -webkit-filter: grayscale ( 100 % ); filter: gray; filter: grayscale ( 100 % ); filter: url (desaturate .svg #greyscale) ; }
Цей метод не працює в браузерах Internet Explorer 10 і 11 версій. Якщо потрібно створити однаковий візуальний ефект зовсім в усіх браузерах, можна скористатися рішенням на мові програмування Javascript для різних браузерів або, наприклад, скриптом Greyscale.js.
Код CSS, написаний вище, дозволяє нам на льоту візуально перетворити зображення в чорно-біле в браузері, без необхідності в збереженні нових версій в програмі Photoshop. За допомогою коду CSS також можна набагато простіше змінювати зображення: наприклад, якщо зменшити відсоток в значеннях властивості фільтра зі 100% до 50%, то ми отримаємо змішання ефекту знебарвлення і початкового кольорового зображення.
Трохи більш простий підхід для застарілих версій браузера Firefox передбачає включення коду SVG прямо в код CSS без необхідності додавати щось в окремий файл і в тег
:Img.desaturate (-webkit-filter: grayscale ( 100 % ); filter: grayscale ( 100 % ); filter: gray; filter: url ( "Data: image / svg + xml; utf8, #greyscale ") ; }
Переклад - Вартівня
CSS3 фільтри є досить цікавим відгалуженням від SVG, що дозволяє змінювати HTML-елементи і зображення, застосовуючи фільтри розмиття, яскравість і багато інших. У цьому уроці ми коротко розглянемо, як саме вони працюють.
Як це працює?
Використовуючи тільки CSS ми можемо створювати деякі досить складні ефекти. Вони можуть бути застосовані як до зображень, так і до HTML-елементів. Властивість, яке використовується для управління всіма цими ефектами - це filter.
filter: filter (value);
Як і слід було очікувати, для цього властивості потрібне використання префікса браузера. Але на даний момент, тільки -webkit- (Chrome і Safari) є єдиним двигуном браузерів, що підтримують цю властивість.
Webkit-filter: filter (value);
-moz-filter: filter (value);
-o-filter: filter (value);
-ms-filter: filter (value);
фільтрація
Існує цілий ряд фільтрів, тому, щоб отримати більш повне уявлення про кожного з них, давайте розглянемо їх окремо. Кілька фільтрів можуть бути застосовані до одного елементу (через пробіл), наприклад, brightness і blur:
filter: blur (5px) brightness (0.5);
Є кілька фільтрів, які не будуть розглянуті нижче, але їх можна легко реалізувати з уже існуючими CSS (прозорість і тіні). Ось оригінальне зображення, яке ми будемо використовувати для демонстрації роботи фільтрів:
Я буду приводити фото c застосуванням фільтра (перше фото) та результат роботи фільтру у вигляді статичного зображення (друге фото), якщо ви використовуєте браузер, який не підтримує фільтри і не можете побачити результат.
Розумієте
Завжди хотіли зробити гауссовское розмиття для зображення або тексту тільки за допомогою одного CSS? З фільтрами ви це зможете! Розумієте вимірюється в пікселях, так що ви можете зробити щось на зразок цього:
filter: blur (5px);
// Browser Specific
-webkit-filter: blur (5px);
-moz-filter: blur (5px);
-o-filter: blur (5px);
-ms-filter: blur (5px);
яскравість
Яскравість вимірюється від нуля до одиниці, 1 - це повна яскравість (білий колір), а 0 - початкова яскравість.
filter: brightness (0.2);
// Browser Specific
-webkit-filter: brightness (0.2);
-moz-filter: brightness (0.2);
-o-filter: brightness (0.2);
-ms-filter: brightness (0.2);
насиченість
Насиченість вимірюється у відсотках.
filter: saturate (50%);
// Browser Specific
-webkit-filter: saturate (50%);
-moz-filter: saturate (50%);
-o-filter: saturate (50%);
-ms-filter: saturate (50%);
поворот тони
Цей фільтр дозволяє змінювати тон, повернувши його (уявіть собі колесо квітів, які ви потім повертаєте). Він вимірюється в градусах.
filter: hue-rotate (20deg);
// Browser Specific
-webkit-filter: hue-rotate (20deg);
-moz-filter: hue-rotate (20deg);
-o-filter: hue-rotate (20deg);
-ms-filter: hue-rotate (20deg);
контрастність
Констрастності, знову ж таки, вимірюється у відсотках. 100% є значенням за замовчуванням, 0% дозволить створити повністю чорне зображення. Все, що понад 100% додає контраст!
filter: contrast (150%);
// Browser Specific
-webkit-filter: contrast (150%);
-moz-filter: contrast (150%);
-o-filter: contrast (150%);
-ms-filter: contrast (150%);
інверсія
Також вимірюється у відсотках. Доступні значення від 0% до 100%. Як не дивно, на даний момент, webkit не підтримує інверсії, якщо вони менше, ніж 100%.
filter: invert (100%);
// Browser Specific
-webkit-filter: invert (100%);
-moz-filter: invert (100%);
-o-filter: invert (100%);
-ms-filter: invert (100%);
знебарвлення
Знову ж, вказуєте значення у відсотках, на яке ви хочете знебарвити зображення. Доступні значення від 0% до 100%.
filter: grayscale (100%);
// Browser Specific
-webkit-filter: grayscale (100%);
-moz-filter: grayscale (100%);
-o-filter: grayscale (100%);
-ms-filter: grayscale (100%);
сепія
Я вважаю, це дуже корисно, якщо ви хочете опублікувати щось в Instagram. Хоча я також вважаю, ви не будете використовувати CSS для цього. У всякому разі, подібні відтінки сірого і негативу, в сумі, дозволять вам додати сепію до зображення. 100% - це буде завершена сепія, 0% - вихідне зображення.
filter: sepia (100%);
// Browser Specific
-webkit-filter: sepia (100%);
-moz-filter: sepia (100%);
-o-filter: sepia (100%);
-ms-filter: sepia (100%);
підтримка браузерами
| Webkit | Mozilla | Trident | Presto | |
| Розумієте | експериментальна | немає | немає | немає |
| яскравість | ||||
| насиченість | ||||
| поворот тонів | ||||
| контрастність | ||||
| інверсія | Тільки повна інверсія |
|||
| знебарвлення | експериментальна | |||
| Sepia |
Якщо у Вас виникли питання, то для якнайшвидшого отримання відповіді рекомендуємо скористатися нашим
CSS властивості досягли такого рівня розвитку, що здатні впоратися з деякими важливими функціями графічних редакторів. Приклад тому - CSS-фільтри, за допомогою яких можна створювати красиві ефекти для зображень.
Якщо раніше важко було це навіть уявити, то зараз в каскадної таблиці реалізовані практично всі програмні фільтри, починаючи від розмиття і закінчуючи художньо-колірними моделями.
Але все ж в CSS-фільтрах є один невеликий недолік - не всі веб-браузери підтримують візуальні ефекти. Зрозуміло, це лише питання часу. І до настання години «х» розробникам потрібно бути готовим. А поки розглянемо те, що на даний момент вже реалізовано.
Підтримка CSS фільтрів браузерами
В основному всі ходові браузери, Firefox, Chrome, Opera, мають «дружнє» ставлення з фільтр-ефектами. Чого не скажеш про IE, який геть відмовляється підтримувати ефекти, навіть в самих пізніх версіях.
| браузер | Explorer | Chrome | Firefox | Safari | Opera | Android | iOS |
|---|---|---|---|---|---|---|---|
| версія | no | 31+ | 35+ | 7+ | 18+ | 4.4+ | 6+ |
| filter | — | (-Webkit-) | + | (-Webkit-) | (-Webkit-) | (-Webkit-) | (-Webkit-) |
Функції і синтаксис CSS фільтрів
У всіх властивостях CSS є певні параметри, що поєднують в собі порядок прописування значень. Властивість filter не є винятком, як і інші, воно може використовувати комбінацію декількох правил в одному застосуванні. Наприклад, додати фільтр яскравості для зображення, а через пробіл вказати ще один - контрастність. Ми розглянемо всі в цій статті з декількома прикладами для кращого розуміння.
синтаксис
Filter: назва фільтру (відсоток значення); filter: url (img.svg); filter: blur (10px); filter: brightness (0.9); filter: contrast (150%); filter: drop-shadow (5px 5px 10px black); filter: grayscale (80%); filter: hue-rotate (60deg); filter: invert (80%); filter: opacity (50%); filter: saturate (50%); filter: sepia (40%); / * Застосування декількох фільтрів * / filter: contrast (150%) grayscale (80%);
список фільтрів
| Фільтр | опис |
|---|---|
| blur (px) | Фільтр для розмиття зображення. Ступінь розмиття вказується в пікселях. Якщо число не задано, то за замовчуванням використовується 0. |
| drop-shadow () | Тінь. Альтернатива властивості box-shadow з аналогічними параметрами і тим же порядком прописування. Винятком є \u200b\u200bчетверте значення «розтягнення»: майже всі браузери його не підтримують. |
| grayscale (%) | Фільтр «знебарвити». Застосовуються відтінки сірого кольору до зображення в залежності від зазначеного відсотка. Не допускається від'ємне значення, а оригінальність картинки дорівнює 0. |
| brightness (%) | Налаштування яскравості зображення. Значення в 100% показує вихідну точку яскравості. Регулювання здійснюється як негативно (-50%), так і позитивно (150%). |
| contrast (%) | Налаштування контрастності зображення. Як і в попередньому фільтрі, значення в 100% покаже вихідну точку. Зміни можна задавати негативні (-20%) і позитивні (120%). |
| hue-rotate (deg) | Поворотний накладення тону кольору. Залежно від зазначеного градуса (від 0deg до 360deg) на зображення буде налагоджується колір, який визначається по колірному кругу. |
| invert (%) | Інверсія зображення. Застосовується значення від 0 до 100% без негативного параметра. |
| saturate (%) | Насиченість зображення. Початкове положення визначається в 100% і не має негативного значення. |
| sepia (%) | Ефект сепія. Оригінальність картинки визначається в 0% і доступна до значення 100% без заперечення. |
| opacity (%) | Прозорість картинки. Ще один фільтр, у якого є аналогічне властивість opacity з таким же способам у використанні. Налаштування допускається від 0 до 100% без негативного параметра. |
| url () | CSS посилання на SVG елемент з певним ідентифікатором #id. |
| initial | Встановлює значення властивості за замовчуванням. |
| inherit | Успадковує всі значення властивості свого батьківського елемента. |
Приклади CSS filters
Ми підійшли до найцікавішої частини статті, в якій розглянемо кожен фільтр окремо з прикладами його застосування. Для наочності будуть використовуватися три картинки. Перша покаже вихідну точку, вигляд оригінальності. Друга послужить статичним прикладом в застосуванні фільтра, а третя покаже hover-ефект, наведення курсору миші на зображення.
Фільтр розмиття
У графічних редакторах фільтр розмиття є незамінним інструментом і часто вживаним в роботі. Він здатний непросто створювати розпливчасте зображення, а робити ефект фокусування на певному елементі при цьому інша частина зображення потрапляє під розмиття. І багато іншого.
В оформленні сайту (наприклад - розмиття) можна використовувати як підкладку для кращої читання тексту, розташованого на зображенні. Власне, розмиття відбувається по Гауса від значення 0 px і до повного зникнення.
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efbl1 img (filter: blur (2px); -webkit-filter: blur (2px);) / * для hover-ефекту * / .efbl2 img (transition: all 0.6s ease 0s;). efbl2: hover img (filter: blur (4px); -webkit-filter: blur (4px); transition: all 0.6s ease 0s;)
Фільтр тінь
Властивість тінь прийшло до нас ще з третьою версією каскадної таблиці. Безумовно, воно знайоме всім, хто займається сайтобудування, так як box-shadow в дизайні грає далеко не останню роль. Фільтр drop-shadow можна назвати неповноцінною альтернативою з аналогічними параметрами, а їх всього 5, беручи до уваги внутрішню тінь.
Порядок прописування такий: 5px / -5px (зміщення по горизонталі), 5px / -5px (зміщення по вертикалі), 15px (радіус розмиття тіні), 5px / -5px (розтягування тіні), black (колір). Фільтр підтримує весь синтаксис крім розтягування і значення inset (внутрішня тінь), а також додавання декількох тіней через кому. Але незважаючи на все це, присутні свої достоїнства, наприклад, фільтр враховує псевдоелементи, що дозволяє відображати точну форму тіні елемента.
Також цікавим є те, що коли у блоку немає фону, а лише задана обведення border, то при використанні box-shadow буде відображатися тінь з нібито урахуванням фону, тобто суцільна. А в разі використання drop-shadow тінь приймає форму обведення без урахування фону.
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efdrswd1 img (filter: drop-shadow (6px 7px 3px rgba (0, 0, 0, 0.4)); -webkit-filter: drop-shadow (6px 7px 3px rgba (0, 0, 0 , 0.4));) / * для hover-ефекту * / .efdrswd2 img (transition: all 0.6s ease 0s;) .efdrswd2: hover img (filter: drop-shadow (6px 7px 3px rgba (0, 0, 0, 0.4)); -webkit-filter: drop-shadow (6px 7px 3px rgba (0, 0, 0, 0.4)); transition: all 0.6s ease 0s;)
Фільтр знебарвлення
Класичний стиль фотографії для всіх часів в правильному напрямку. Фільтр допускає лише одне значення - позитивне. Залежно від зазначеного відсотка відтінки сірого будуть плавно замінювати колір зображення. Також замість відсотків можна застосовувати дріб до цілого числа (0.01 / 1).
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efgrays1 img (filter: grayscale (90%); -webkit-filter: grayscale (90%);) / * для hover-ефекту * / .efgrays2 img (transition: all 0.6s ease 0s; ) .efgrays2: hover img (filter: grayscale (90%); -webkit-filter: grayscale (90%); transition: all 0.6s ease 0s;)
Фільтр яскравості
Додавання світла до «незвіданим» чорним кутах зображення. В обробці фотографій застосовується нерідко, так як аматорські знімки, як правило, відбуваються в погано освітлених місцях. Яскравість фільтра регулюється від 0% (повністю чорна картинка) до майже повного зникнення зображення. Оригінальна точка визначається в 100%, а значення також можна вказувати дробом.
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efbrig1 img (filter: brightness (150%); -webkit-filter: brightness (150%);) / * для hover-ефекту * / .efbrig2 img (transition: all 0.6s ease 0s; ) .efbrig2: hover img (filter: brightness (150%); -webkit-filter: brightness (150%); transition: all 0.6s ease 0s;)
Фільтр контрастності
Нехитрий спосіб зробити зображення більш виразним, поекспериментувавши з настройками яскравості найсвітліших і темних частин картинки. Фільтр contrast готовий цьому зарадити. Його параметри, як і у багатьох, виключають від'ємне значення (-150%), а вихідне положення позначається в 100%. Крім відсотків, допускається також дріб (1.5).
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efcontr1 img (filter: contrast (150%); -webkit-filter: contrast (150%);) / * для hover-ефекту * / .efcontr2 img (transition: all 0.6s ease 0s; ) .efcontr2: hover img (filter: contrast (150%); -webkit-filter: contrast (150%); transition: all 0.6s ease 0s;)
Фільтр тони кольору
Відмінний дизайнерський прийом в оформленні зображення, під стиль основного дизайну ресурсу. Суть полягає в накладенні відтінку вибраного кольору на вихідну картинку. Співвідношення виходять в залежності від заданого градуси, який вказує точку кольору на колірному колі.
Якщо значення вказано позитивне (150deg), то поворот відбувається за годинниковою стрілкою. Відповідно, якщо негативне, то проти годинникової. У двох положення починається від 0deg до 360deg.
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efhrotai1 img (filter: hue-rotate (180deg); -webkit-filter: hue-rotate (180deg);) / * для hover-ефекту * / .efhrotai2 img (transition: all 0.6s ease 0s;) .efhrotai2: hover img (filter: hue-rotate (180deg); -webkit-filter: hue-rotate (180deg); transition: all 0.6s ease 0s;)
Фільтр інверсія
Специфічний ефект, що дозволяє привернути колір зображення верх дном. У графічних редакторах має певну роль і буває так, що без його участі не домогтися потрібного результату. Параметр фільтра инвертирования вказується лише в позитивну сторону від значення 0% до 100%.
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efinve1 img (filter: invert (100%); -webkit-filter: invert (100%);) / * для hover-ефекту * / .efinve2 img (transition: all 0.6s ease 0s; ) .efinve2: hover img (filter: invert (100%); -webkit-filter: invert (100%); transition: all 0.6s ease 0s;)
Фільтр насиченість
Коли зображення втрачає свій природний колір фарб з невідомих причин (щось на зразок вигорілій футболки на сонці), то збільшенням насиченості можна вмить відновити колишній вигляд. А якщо цей фільтр використовувати в поєднанні з іншими фільтрами, результат буде досить задовільним. Налаштування відбувається від 0 початковий вигляд, до великих чисел.
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efsatut1 img (filter: saturate (165%); -webkit-filter: saturate (165%);) / * для hover-ефекту * / .efsatut2 img (transition: all 0.6s ease 0s; ) .efsatut2: hover img (filter: saturate (165%); -webkit-filter: saturate (165%); transition: all 0.6s ease 0s;)
Фільтр сепія
Імітація ефекту старовинних фотографій (злегка коричневий відтінок). Таким чином досягається ретро стиль зображення, який користується особливою популярністю. Фільтр сепія регулюється від 0% (початкове положення) до 100%.
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efsepiaa1 img (filter: sepia (100%); -webkit-filter: sepia (100%);) / * для hover-ефекту * / .efsepiaa2 img (transition: all 0.6s ease 0s; ) .efsepiaa2: hover img (filter: sepia (100%); -webkit-filter: sepia (100%); transition: all 0.6s ease 0s;)
Фільтр прозорість
Фільтр аналогічний властивості opacity з каскадної таблиці 3-й версії. Синтаксис такий же, а значення прозорості регулюється від 0% до 100% (вихідне положення).
оригінал
Фільтр
Hover-ефект
/ * Статичне правило * / .efopaty1 img (filter: opacity (50%); -webkit-filter: opacity (50%);) / * для hover-ефекту * / .efopaty2 img (transition: all 0.6s ease 0s; ) .efopaty2: hover img (filter: opacity (50%); -webkit-filter: opacity (50%); transition: all 0.6s ease 0s;)
Фільтр посилання
Створюється власний фільтр на основі SVG елементів з певним ідентифікатором, який згодом можна використовується в CSS через фільтр посилання. Ефекти можуть дуже сильно відрізнятися від стандартних фільтрів починаючи від маски-накладення до банальної прозорості.
Генератор CSS filters
Вже давно повелося створювати генератори різних CSS властивостей. , і багато багато іншого. Вони служать як інструмент, який спрощує роботу. А для початківців вебмайстрів можуть нести подвійну користь. Ними дуже легко користуватися: переміщаєте повзунки, і відразу ж видно результат. А після закінчення залишається лише скопіювати згенерований код. Те ж і з генераторами CSS фільтрів. Ось два з них для ознайомлення:
висновок
Огляд вийшов досить немаленький, але сподіваюся, що комусь стане в нагоді на практиці. Також не забувайте комбінувати фільтри, один - добре, а два буде краще, в певних випадках.
Буває необхідно зробити зображення сірим якомога швидше і не використовуючи графічні редактори. Звичайно можна скористатися графічним редактором Adobe Photoshop (можна задати навіть глибину і тон). У браузері звичайно не можна налаштовувати такі параметри, але наше око (якщо, звичайно, ви не професіонал) майже не помітить різниці.
У цій статті ми розглянемо способи як зробити зображення сірим.
1. CSS фільтр
Використання властивості filter, Мабуть, є найпростішим способом створити чорно-біле зображення. Для створення чорно-білого зображення в IE, необхідно використовувати також властивість filter.
Сьогодні, властивість filter є частиною технології CSS3, яке підтримується такими браузерами як Firefox, Chrome і Safari. Webkit фільтри можуть не тільки створювати ефект чорно-білого зображення, але також можуть надати ефект сепія та розмиття.
Для того щоб зробити зображення сірим, необхідно прописати наступні властивості:
Дані код буде працювати в IE6-9, Chrome18 +, Safari 6.0+ і Opera15 +.
2. Javascript
Альтернативою вищенаведеним кодом є Javascript, який працює у всіх браузерах, якщо він включений, включаючи IE6 і нижче.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var imgObj \u003d document.getElementById ( "js-image"); function gray (imgObj) (var canvas \u003d document.createElement ( "canvas"); var canvasContext \u003d canvas.getContext ( "2d"); var imgW \u003d imgObj.width; var imgH \u003d imgObj.height; canvas.width \u003d imgW; canvas.height \u003d imgH; canvasContext.drawImage (imgObj, 0, 0); var imgPixels \u003d canvasContext.getImageData (0, 0, imgW, imgH); for (var y \u003d 0; y< imgPixels.height ; y++ ) { for (var x = 0 ; x < imgPixels.width ; x++ ) { var i = (y * 4 ) * imgPixels.width + x * 4 ; var avg = (imgPixels.data [ i] + imgPixels.data [ i + 1 ] + imgPixels.data [ i + 2 ] ) / 3 ; imgPixels.data [ i] = avg; imgPixels.data [ i + 1 ] = avg; imgPixels.data [ i + 2 ] = avg; } } canvasContext.putImageData (imgPixels, 0 , 0 , 0 , 0 , imgPixels.width , imgPixels.height ) ; return canvas.toDataURL () ; } imgObj.src = gray(imgObj) ; |
Використовуючи Javascript, ми можемо задавати зображенню чорно-білий ефект, наприклад, при наведенні і кліці по зображенню. Спільно можна використовувати jQuery, щоб створити плавний ефект переходу до сірого. Єдиним недоліком є \u200b\u200bте, що Javascript може бути відключений в браузері.
3. SVG
Іншим спосіб є використання SVG фільтрів.
Все що вам потрібно це створити SVG файл і використовувати код нижче:
Також весь код можна написати прямо в CSS:
| 1 2 3 4 | img (filter: url ( "Url (" data: image / svg + xml; utf8, |
Результат буде схожим.
висновок
Для підтримки даного ефекту усіма браузерами, необхідно комбінувати всі способи. Даний код буде працювати в Firefox 3.5+, Opera15 +, Safari, Chrome і IE.
| 1 2 3 4 5 6 7 8 | img (-webkit-filter: grayscale (100%); -webkit-filter: grayscale (1); filter: grayscale (100%); filter: url ( "../img/gray.svg#grayscale"); filter : gray;) |
Даний код можна використовувати разом з Javascript, і в разі, якщо Javascript відключений, буде працювати даний код. У цьому може допомогти Modernizr.
Modernizr додає js клас для body, якщо Javascript включений в браузері, і пропише клас no-js якщо Javascript відключений. А в CSS залишилося прописати сдедует:
| 1 2 3 4 5 6 7 8 | .no-js img (-webkit-filter: grayscale (100%); -webkit-filter: grayscale (1); filter: grayscale (100%); filter: url ( "../img/gray.svg#grayscale "); filter: gray;) |
