Настройка на изображението с ефектите на CSS филтъра

Регулиране на изображението яркост и контраст, или завъртане на изображението Grayscale или Sephia е обща функция, която можете да намерите в приложението за редактиране на изображения, като Photoshop. Но сега е възможно да се добавят същите ефекти към уеб изображенията с помощта на CSS.

Тази възможност идва от филтърните ефекти, които всъщност все още са на етап работен проект. Въпреки това, браузърът Webkit изглежда е стъпка напред в прилагането на тази функция.

Затова нека опитаме и ще използваме този образ от Mehdi Kh за демонстриране на ефектите.

Ефектите

Прилагането на ефектите е много лесно. Обърнете внимание на фрагмента по-долу, за да превръщате изображенията в нива на сивото;

 img -webkit-филтър: скала на сивото (100%);  

… И това е за сепия ala Instagram.

 img -webkit-филтър: сепия (100%);  

И двете сепия и нива на сивото стойностите се посочват в проценти, където 100% е максималната и се прилага 0% ще запази образа за промяна, но когато стойността не е изрично посочена 100% ще се приема като стандартно.

Осветлението на изображението също е възможно и можем да го направим с помощта на яркост функция, както следва;

 img -webkit-филтър: яркост (50%);  

Ефектът на яркостта работи като контраст и сепия ефект над стойността на 0% ще запази образа така, както е и ще се прилага 100% ще осветли напълно изображението, което вероятно ще покаже само бяла страница вместо изображение.

Ефектът на яркост също позволява отрицателни стойности, в която ще затъмняване на изображението.

 img -webkit-филтър: яркост (-50%);  

… И ние можем да регулираме контраста на образа по този начин.

 img -webkit-филтър: контраст (200%);  

Има и малка разлика в начина, по който работи стойността, както виждате по-горе, ние поставяме разлика () от 200%, това е така, защото стойността на 100% е началната точка, където изображението ще остане непроменено. Когато стойността е по-долу 100%, да кажем 50%, изображението ще стане по-малко контрастно.

Освен това можем да комбинираме ефекта в един блок за деклариране, като например в примера по-долу. Включваме образа нива на сивото и увеличаване на контраст едновременно с 50%.

 img -webkit-филтър: контраст на сивото (100%) (150%);  

Чрез комбиниране на филтъра с CSS3 прехода можем да направим грациозен мътя ефект.

 img: hover -webkit-filter: скала на сивото (0%);  img: hover -webkit-филтър: сепия (0%);  img: hover -webkit-filter: яркост (0%);  img: hover -webkit-filter: контраст (100%);  

И накрая, имаме още един ефект, който можем да опитаме; на Gaussian Blur, което ще замъгли целевия елемент.

 img: hover -webkit-filter: размазване (5px);  

Подобно на Photoshop, стойността на размазването се посочва в пикселен радиус и ако стойността не е изрично посочена, 0 ще се приеме за подразбиране и изображението ще остане както е.

Заключителна мисъл

Има действително много повече ефекти в спецификацията. като оттенък завъртане, инвертна и насищам, но мисля, че те са по-малко приложими в реални случаи в Мрежата. Така дискусията беше ограничена до четири ефекта.

И въпреки, че дискусията е приложена към изображенията в този урок, собствеността всъщност може да се приложи и към всеки елемент в DOM.

И накрая, можете да видите демонстрацията на живо от тези връзки по-долу. Моля, обърнете внимание, че филтърът понастоящем се поддържа само в Chrome 19 и отгоре.

• Демонстрация
• Изтеглете Източник