CSS3 филтри са много интересно издънка на SVG, което позволява да се променят HTML-елементи и образи, като се прилагат размазване филтри, яркост, както и много други. В този урок, ние ще разгледаме накратко как те работят.
Как става това?
Използвайки само CSS, можем да създадем някои доста сложни ефекти. Те могат да се прилагат и за двете изображения и за HTML-елементи. Имотът, който се използва за контролиране на всички тези ефекти - филтър.
филтър. филтър # 40; стойност # 41; ;
Както може да се очаква, този хотел изисква използването на браузъра префикс. Но за момента, само -webkit- (Chrome и Safari) браузър е единственият двигател, който поддържа тази функция.
-WebKit-филтър. филтър # 40; стойност # 41; ;
-Moz-филтър. филтър # 40; стойност # 41; ;
-о-филтър. филтър # 40; стойност # 41; ;
-MS-филтър. филтър # 40; стойност # 41; ;
филтриране
Има редица от филтри, така че да получите по-добра представа за всеки един от тях, нека да разгледаме тях поотделно. Няколко филтри могат да се прилагат един елемент (през пространството), например, яркостта и замъгляване:
филтър. мъгла # 40; 5px # 41; яркост # 40; 0.5 # 41; ;
Има няколко филтри, които са разгледани по-долу, но лесно могат да бъдат изпълнени със съществуващото CSS (непрозрачност и сянка). Тук е оригиналната снимка, която ще използвате, за да докаже, че системите на филтрите:
Ще донесе снимка в използване на филтър (първа снимка) и в резултат на филтъра като статично изображение (втората картинка), ако използвате браузър, който не поддържа филтри, и не можете да видите резултата.
Винаги съм искал да направя Gaussian Blur с изображение или текст само с един CSS? С този филтър можете! Blur се измерва в пиксели, така че можете да направите нещо подобно:
филтър. мъгла # 40; 5px # 41; ;
// Browser Специфична
-WebKit-филтър. мъгла # 40; 5px # 41; ;
-Moz-филтър. мъгла # 40; 5px # 41; ;
-о-филтър. мъгла # 40; 5px # 41; ;
-MS-филтър. мъгла # 40; 5px # 41; ;
Яркостта се измерва от нула до един, 1 - пълна яркост (бял) и 0 - оригиналния яркостта.
филтър. яркост # 40; 0.2 # 41; ;
// Browser Специфична
-WebKit-филтър. яркост # 40; 0.2 # 41; ;
-Moz-филтър. яркост # 40; 0.2 # 41; ;
-о-филтър. яркост # 40; 0.2 # 41; ;
-MS-филтър. яркост # 40; 0.2 # 41; ;
насищане
Насищане се измерва като процент.
филтър. насищам # 40; 50% # 41; ;
// Browser Специфична
-WebKit-филтър. насищам # 40; 50% # 41; ;
-Moz-филтър. насищам # 40; 50% # 41; ;
-о-филтър. насищам # 40; 50% # 41; ;
-MS-филтър. насищам # 40; 50% # 41; ;
тон обрат
Този филтър позволява да промените тона като го завъртите (представете си цвят колело, което след това включване). Тя се измерва в градуси.
филтър. оттенък завъртане # 40; 20deg # 41; ;
// Browser Специфична
-WebKit-филтър. оттенък завъртане # 40; 20deg # 41; ;
-Moz-филтър. оттенък завъртане # 40; 20deg # 41; ;
-о-филтър. оттенък завъртане # 40; 20deg # 41; ;
-MS-филтър. оттенък завъртане # 40; 20deg # 41; ;
контраст
Konstrastnost отново, изчислено като процент. 100% е стойността по подразбиране, 0%, ще се създаде напълно черен образ. Всичко, което добавя повече от 100% на контраста!
филтър. контраст # 40; 150% # 41; ;
// Browser Специфична
-WebKit-филтър. контраст # 40; 150% # 41; ;
-Moz-филтър. контраст # 40; 150% # 41; ;
-о-филтър. контраст # 40; 150% # 41; ;
-MS-филтър. контраст # 40; 150% # 41; ;
Както е измерена в проценти. Тя варира от 0% до 100%. Странното е, че за момента тя не поддържа WebKit инверсия, ако те са по-малко от 100%.
филтър. инвертна # 40; 100% # 41; ;
// Browser Специфична
-WebKit-филтър. инвертна # 40; 100% # 41; ;
-Moz-филтър. инвертна # 40; 100% # 41; ;
-о-филтър. инвертна # 40; 100% # 41; ;
-MS-филтър. инвертна # 40; 100% # 41; ;
обезцветяване
Отново, вие определяте процента, с който искате да десатурира изображението. Тя варира от 0% до 100%.
филтър. нива на сивото # 40; 100% # 41; ;
// Browser Специфична
-WebKit-филтър. нива на сивото # 40; 100% # 41; ;
-Moz-филтър. нива на сивото # 40; 100% # 41; ;
-о-филтър. нива на сивото # 40; 100% # 41; ;
-MS-филтър. нива на сивото # 40; 100% # 41; ;
филтър. сепия # 40; 100% # 41; ;
// Browser Специфична
-WebKit-филтър. сепия # 40; 100% # 41; ;
-Moz-филтър. сепия # 40; 100% # 41; ;
-о-филтър. сепия # 40; 100% # 41; ;
-MS-филтър. сепия # 40; 100% # 41; ;
Подкрепа браузър