CSS3 фільтри (filter) - це потужний інструмент, що дозволяє досягати дивовижних візуальних ефектів, наприклад для зображень. Особливо він може стати в нагоді для створення ефектів наведення (hover) елементів. Фільтри надають нам спосіб модифікації рендеринга основного елемента DOM. Вони дозволяють робити такі речі, як розмиття. змінювати контрастність. навіть міняти колір вашого елемента.
створення фільтрів
Коли я думаю про графічних фільтрах, перше, що спадає на думку, це чорно-білий фільтр. Беручи повнокольорове зображення, він перетворює його в монохромну версію. Це перший фільтр, на який ми повинні поглянути.
Щоб використовувати цей CSS3 фільтр, нам просто потрібно написати наступне:
Як видно, в даний час необоходимо використовувати префікс -webkit - (ця функція доступна до сих пір тільки в WebKit-браузер), ключовому слові filter. а потім можна задати інші фільтри через кому.
В даному випадку вибрали grayscale (1). щоб елемент став повністю чорно-білим, але я могла б задати 0.5 і зображення тоді було б забарвлене з 50% насиченням.
Те, що завжди виглядає красиво на картині це розмитість (blur), так що додамо її.
Як бачите, використовувати кілька фільтрів просто. Якщо ви перевірите це в браузері, то зможете побачити, що обидва ці фільтра застосовуються належним чином до зображення. До сих пір все було просто, чи не так? Але якщо ви хочете фільтри як в Photoshop. CSS також може зробити це для вас. Давайте почнемо з контрасту.
Застосувати контраст до зображення так само просто:
У разі контрасту ви повинні думати про 100% як про відправної точки. Якщо ви встановите значення 100%, то зображення не зміниться. Якщо менше цього значення, наприклад, 50%, то буде зменшуватися контрастність. Якщо більше 100%, наприклад, 150%, то це зробить зображення більш яскравим.
Ще один дуже цікавий фільтр, який є в нашому розпорядженні - це поворот відтінку (hue-rotate). Він працює дуже схоже на панель Hue / Saturation в Photoshop.
Для цього фільтра необхідно використовувати градуси для установки значення. Це може здатися трохи складним на перший погляд, але для того, щоб зрозуміти, що цей фільтр робить, досить визначити значення кольору кожного пікселя в зображенні і обертати його в колірному колі. Наприклад, якщо ваш піксель - синій, то при повороті відтінку на 180 градусів, він стане помаранчевим.
У нас є також насичення (saturate), інший ефект, широко використовуваний в Photoshop. За допомогою цього фільтра, зі значенням вище 100%, можна зробити кольори вашого елемента більш яскравими, так як цей фільтр також використовує 100% в якості відправної точки:
І, звичайно, у нас є інші фільтри, такі як сепія (sepia), який працює таким же чином, в градаціях як у фільтра grayscale, де ви вводите значення від 0 до 1:
У нас також є непрозорість (opacity) і цей фільтр також працює зі значеннями в діапазоні від 0 до 1:
Ще один CSS3 фільтр, який у нас є - це негатив (invert), він звертає кольору пікселів на елементі так, що якщо ви задаєте значення 100%, вихід буде виглядати як негатив фотографії. Значення задаються в діапазоні від 0% до 100%.
Один з фільтрів, в якому вже є функціональність - це фільтр тіні (drop-shadow). Він приймає ті ж значення, що box-shadow в CSS. Головна відмінність в тому, що при застосуванні до PNG файлу з прозорим фоном, тінь буде накладена навколо пікселів, а не навколо контуру файлу PNG. Версія CSS фільтра також апаратно прискорена.
Нарешті, у нас є яскравість (brightness) і це також саме те, що ви, ймовірно, й раніше використовували в Photoshop. У цього фільтра 100% прийнято в якості початкового значення. Якщо ви встановите 100%, то нічого в елементі зміниться, а от значення 0% перетворить ваш елемент в чорний, а значення 200% зробить його в два рази яскравіше:
висновок
CSS3 фільтри є дуже потужним способом змінювати ваші елементів на льоту, без необхідності залучення додаткових зображень. Все це робиться за допомогою CSS. Це дає нам необмежені можливості, коли мова йде про обробку призначених для користувача подій візуально. Шкода, що поки тільки в WebKit.