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; ;

Подкрепа браузър