Налаштування зображення за допомогою ефектів фільтра CSS
Налаштування зображення Яскравість і Контраст, або перетворення зображення в Відтінки сірого або Сефія це загальна функція, яку ви можете знайти в програмі редагування зображень, наприклад Photoshop. Але тепер можна додати ті ж ефекти до веб-зображень за допомогою CSS.
Ця можливість походить від фільтрових ефектів, які фактично все ще перебувають у стадії робочого проекту. Однак браузер Webkit, здається, є кроком на шляху реалізації цієї функції.
Отже, давайте спробуємо і ми використаємо цей образ від Мехді Х до демонстрації ефектів.
Ефект
Застосування ефектів дуже просте. Погляньте на фрагмент нижче, щоб перетворити зображення на відтінки сірого;
img -вебкіт-фільтр: відтінки сірого (100%);
… І це для сепія ala Instagram.
img -вебкіт-фільтр: сепія (100%);
Обидва сепія і відтінки сірого Значення вказані у відсотках, де 100% є максимальним і застосовується 0% буде тримати зображення незмінним, але коли значення явно не вказано 100% буде прийнято за замовчуванням.
Освітлення зображення також можливе, і ми можемо це зробити за допомогою яскравість функція, наступна;
img -вебкіт-фільтр: яскравість (50%);
Ефект яскравості працює як ефект контрасту і сепії вище, ніж значення 0% збереже образ, який він є і застосовує 100% повністю покращить зображення, яке, можливо, покаже лише чисту білу сторінку замість зображення.
Ефект яскравості також допускає негативні значення, в якому воно буде затемнюють зображення.
img -вебкіт-фільтр: яскравість (-50%);
… І ми можемо налаштувати контраст зображення таким чином.
img -вебкіт-фільтр: контраст (200%);
Існує невелика різниця в тому, як цінність працює, як ви можете бачити з вищесказаного, ми встановлюємо контраст () від 200%, це тому, що значення 100% є відправною точкою, де зображення залишатиметься незмінним. Коли значення нижче 100%, скажімо, 50%, зображення стане менш контрастним.
Крім того, ми можемо комбінувати ефект в одному блоці декларації, наприклад, у прикладі нижче. Ми перетворюємо зображення в відтінки сірого і збільшити контраст на 50% одночасно.
img -вебкіт-фільтр: відтінки сірого (100%) контрасту (150%);
Комбінуючи фільтр з переходом CSS3, ми можемо зробити витончений hover ефекту.
img: hover -webkit-filter: відтінки сірого (0%); img: hover -webkit-filter: сепія (0%); img: hover -вебкіт-фільтр: яскравість (0%); img: hover -вебкіт-фільтр: контраст (100%);
Нарешті, є ще один ефект, який ми можемо спробувати; Gaussian Blur, який розмиває цільовий елемент.
img: hover -webkit-filter: розмиття (5px);
Як і в Photoshop, значення розмитості виражається в радіусі пікселів, і якщо значення не вказано явно, значення 0 буде прийнято за замовчуванням, а зображення залишається таким, яким він є.
Заключна думка
Є насправді набагато більше ефектів у специфікації. як от hue-rotate, інвертувати і насичують, але я думаю, що вони менш застосовані в реальних веб-випадках. Таким чином, обговорення було обмежено лише чотирма ефектами.
І, незважаючи на те, що обговорення застосовується до зображень у цьому підручнику, властивість може також бути застосована до будь-якого елемента DOM.
Нарешті, ви можете переглянути демонстрацію в прямому ефірі за цими посиланнями нижче. Зауважте, що фільтр наразі підтримується лише в Chrome 19 і вище.
- Демо
- Завантажити джерело
