Ефекти фільтра CSS
У цій статті ми розглянемо ефекти CSS фільтрів, що вони роблять і як їх використовувати. Будуть приклади фільтрів CSS3, поговоримо про продуктивність фільтрів на настільних та мобільних пристроях, оскільки швидкість важлива для роботи користувачам. І насамкінець розглянемо, стан сучасних браузерів відобразити ефекти фільтра CSS3.
Ефекти фільтра CSS
Фільтри CSS є потужним інструментом, який веб-розробники можуть використовувати для цікавих візуальних ефектів.
Минуле, сьогодення та майбутнє фільтрів CSS
Ефекти фільтра виникли як частина специфікації Scalable Vector Graphics (SVG). Вони були створені для застосування різних ефектів на основі растрових зображення у векторний малюнок. Згодом, виробники браузерів додали підтримку фільтра SVG у свої браузери, корисність цього стала очевидною. Роберт O'Callahan від Mozilla виступив ідею використання SVG фільтра шляхом застосування CSS для контенту. Це була блискуча ідея, прототипи показали, наскільки потужні можуть бути CSS фільтри. Робоча група W3C вирішила схвалити використання фільтрів для HTML і SVG за допомогою стилів CSS і, таким чином, народився, filter з властивостями CSS. Зараз є тонни робіт із фільтрами, що працюють на CSS та SVG.
Як працюють фільтри CSS
Коли браузер завантажує веб-сторінку, він має застосувати стилі, підключені до цієї сторінки. Фільтри перед завантаженням сторінки копіюються на екран. У цей час, фільтри роблять знімок зображення на сторінці, що завантажується у вигляді растрового зображення, а потім результат з'являється поверх оригінального зображення сторінки.
Якщо їх використовувати правильно, вони не вплинуть на швидкість вашого сайту!
Визначити фільтри за допомогою SVG та CSS
Оскільки фільтри CSS спочаткуприйшли з SVG існують різні способи визначення та використання фільтрів. Сам елемент SVG, який забезпечує визначення різних ефектів фільтра, використовує синтаксис XML. Набір фільтрів визначається CSS так їх легше використовувати.
Більшість CSS-фільтрів схожі на фільтри SVG, навіть у таблиці стилів можуть бути посилання на фільтр SVG, якщо хочете. Дизайнери доклали багато зусиль, щоб зробити застосування CSS фільтрів простіше, в цій статті приклади фільтрів, доступні безпосередньо з CSS.
Застосувати фільтр CSS
фільтр працюватиме у всіх сучасних браузерах. Щоб використовувати фільтри, необхідно використовувати префікс постачальників для властивості filter. Немає нічого складного нижче простий приклад.
Зображення усередині всіх елементів
Вихідне зображення.. Фільтр відтінки сірого (grayscale)
Більшість фільтрів використовують деякі параметри контролю, на скільки виконати фільтрацію. Наприклад, якщо ви хочете виконати половину початкового кольору з відтінками сірого, потрібно зробити так:
Якщо ви хочете застосовувати різні фільтри один за одним, це просто, достатньо помістити їх у CSS наступним чином:
Цей приклад спочатку зробить відтінки сірого кольору, а потім застосує ефект сепії, і матиме вигляд:
Все залежить від вашої уяви, експериментуйте.
Доступні ефекти фільтрів у CSS
CSS вводить купу стандартних ефектів фільтра, які роблять їх використання набагато легше. Давайте подивимося на кожен із них, і що вони роблять.
Фільтр відтінку сірого - greyscale (контролюється)
Перетворює кольори назображення у відтінках сірого. Контролюється, скільки застосувати сірого. Якщо це 100%, то все буде з відтінками сірого, якщо це 0% кольору залишаються незмінними, 0 працює так само, як 0%, в той час як 1,0 працює так само, як 100%.
Фільтр сепія - sepia (контролюється)
Фільтр сепія змінити кольори з відтінками сепію, як на старих фотографіях. Контролюється так само, як і фільтр відтінки сірого (grayscale), але ефект слід застосовувати у меншій кількості.
Фільтр насиченість - saturation (контролюється)
Цей ефект додасть насиченості кольорів і робить їх яскравішими. Це класний ефект, який може робити фотографії привабливими. Ефект дозволяє використовувати значення більше 100%, щоб побачити насиченість.
Фільтр відтінку освітлення - hue-rotate (angle)
Це один біт ефекту, який можна використовувати для цікавих речей, і при цьому не потрібний фотошоп. Ефект (angle) змінює кут освітлення, щоб зображення виглядало з іншим кольором. Ось що цей ефект робить із зображенням.
Фільтр інвертувати – invert (контролюється)
Цей ефект перевертає кольори – кількість ефекту контролюється. Як і раніше, використовуйте значення від 100% і менше, щоб змінити ефект інвертування.
Фільтр непрозорість - opacity (контролюється)
Якщо ви хочете, щоб зображення виглядало напівпрозорим, встановіть потрібну кількість непрозорості. 100% повністю непрозорий, менше 100% зображення стане менш непрозорим (прозорішим), і його буде видно все менше і менше. Кількість 0% означає, що зображення повністю зникне — це потрібно, якщо ви хочете створити активну область, нічого не показуючи, що на кшталт overflow:hidden Непрозорість працює так само,як і властивість opacity у CSS3. Прозорість CSS не є апаратним прискоренням, але деякі браузери, які підтримують фільтри, використовують апаратне прискорення для прискорення прозорості фільтра для більш високої продуктивності.
Фільтр яскравість – brightness (контролюється)
Фільтр яскравості схожий на регулювання яскравості екрана телевізора. Він регулює колір між чорним та повністю оригінальним кольором у міру додавання параметрів. Якщо ви встановите 0%, ви побачите тільки чорний, якщо збільшувати кількість до 100%, все більше і більше буде проясняється вихідне зображення, на 100% буде вихідне зображення. Можна продовжувати і встановити до 200%, що зробить зображення вдвічі яскравіше, це можна використовувати для темних зображень!
Фільтр контрастність - contrast (контролюється)
Фільтр контрастність дозволить регулювати різницю між темними та найсвітлішими тонами вихідного зображення. Якщо встановити значення 0% буде все чорне, як і з яскравістю. Але якщо ви зміните значення до 100%, зміняться тони кольору. Можна встановити значення більше 100% це такий самий ефект, який збільшує різницю між світлими та темними кольорами.
Фільтр розмиття - blur (радіус)
Якщо ви хочете зробити для контенту м'які краї, можна застосувати фільтр розмиття (blur). Він розмиє всі кольори, це схоже, коли фон не у фокусі. Параметр 'radius' (радіус) визначає, скільки пікселів розмити, що більше значення тим більше розмиття. Значення 0 залишає зображення без змін.
Фільтр тінь drop-shadow (shadow)
Параметр тінь (shadow) передається трохи складніше, і не тільки одне значення. Це ряд значень, розділених пробілом, і деякі значення є обов'язковими! Значення, які потрібновстановлювати - де тіні знаходиться, скільки застосувати розмиття, колір тіні і т.д. У прикладі показано, як можна контролювати тіні. Для отримання коду тіні перейдіть за посиланням інструменти CSS3 специфікація визначає тінь у найдрібніших подробицях. Нижче наведено кілька прикладів, які повинні дати вам ідеї про тень.
Фільтр тінь drop-shadow(16px 16px 20px Black)
Це ще один фільтр, схожий на існуючий у CSS3 box-shadow. Якщо використовувати фільтр, це означає, що він може використовувати апаратне прискорення деяких браузерів.
URL посилання SVG фільтри
Так як фільтри сталися як частина SVG, це цілком логічно, що ви повинні вміти додати вміст за допомогою фільтра SVG . Це легко з поточними фільтрами. Всі фільтри SVG визначаються з атрибута ID, який можна використовувати для отримання ефекту фільтра. Таким чином, щоб використовувати будь-який фільтр SVG у CSS, вам потрібно послатися на нього за допомогою 'URL' синтаксису.
Наприклад, розмітка фільтр SVG може бути такою:
Потім з CSS ви можете зробити щось просте:
Після цього всі елементи
Продуктивність
Фільтри CSS є потужним інструментом для візуальних ефектів, але в той же час може вплинути на продуктивність вашого сайту, особливо якщо ви хочете, щоб ваш сайт добре працював на мобільних пристроях.
По-перше, не всі фільтри однакові, за продуктивністю! Насправді більшість фільтрів будуть працювати дуже швидко, на будь-якій платформі і не сильно впливають на продуктивність. Тим не менш, фільтри, які роблять будь-яке розмиття, як правило, повільніше, ніж інші. Але це не означає, що ви не повинні використовувати їх.
Якщо ви використовуєте фільтри наоснові «URL», які посилаються на SVG фільтри, вони можуть містити довільний ефект фільтра так що треба знати, що вони теж можуть бути повільними, тому постарайтеся переконатися, що ви знаєте, що ефект фільтра робить і продуктивність в порядку.
Підтримка браузерами
Наразі не всі браузери підтримують усі ефекти фільтрів. В даний час фільтри CSS доступні у браузерах на основі WebKit та Mozilla. Ми очікуємо побачити їх найближчим часом в опері, а також IE10. Оскільки специфікація перебуває на стадії розробки, деякі виробники браузерів впровадили цей матеріал з використанням постачальників префіксів. Таким чином, потрібно використовувати префікси -webkit-filter, -moz-filte і стежте за іншими реалізаціями браузера в міру їх появи.
Зазначимо, що низка сучасних браузерів починають впроваджувати фільтри CSS на апаратне забезпечення (з GPU-прискоренням). Коли їх застосують за допомогою GPU, продуктивність буде значно покращена.