CSS3 szűrők módosítani képeket stílusok

CSS3 szűrők nagyon érdekes inda SVG, ami lehetővé, hogy módosítsa a HTML-elemeket és a képeket, alkalmazása blur szűrő, a fényerő, és még sokan mások. Ebben a bemutató, akkor tekintsük át röviden, hogyan működnek.

Hogyan működik ez?

Használata csak CSS, mi is létrehozhatunk egy elég bonyolult hatásokat. Ők lehet alkalmazni a képeket és a HTML-elemeket. Az ingatlan, amit használnak, hogy ellenőrizzék az összes ezeket a hatásokat - egy szűrőt.

szűrőt. szűrő # 40; érték # 41; ;

Amint az várható, az ingatlan használatát igényli az előtag böngészőt. De abban a pillanatban, csak -webkit- (Chrome és a Safari) böngészőt az egyetlen motor, amely támogatja ezt a funkciót.

-WebKit-szűrőt. szűrő # 40; érték # 41; ;
-moz-szűrőt. szűrő # 40; érték # 41; ;
-o-szűrő. szűrő # 40; érték # 41; ;
-ms-szűrőt. szűrő # 40; érték # 41; ;

szűrő

Számos szűrők, így kap egy jobb ötlete mindegyikről, nézzük meg őket egyenként. Számos szűrők lehet alkalmazni egy elem (a térben), például fényerő és elmosódás:

szűrőt. elhomályosít # 40; 5px # 41; fényesség # 40; 0.5 # 41; ;

Számos szűrők, amelyek az alábbiakban tárgyaljuk, de könnyen megvalósítható a meglévő CSS (fényelnyelés és árnyék). Itt az eredeti kép, amely azt fogja használni, hogy bizonyítani a működését a szűrők:

CSS3 szűrők módosítani képeket stílusok

Hozok egy fotó c szűrő alkalmazásával (az első fotó), és az eredmény a szűrő, mint egy statikus kép (második kép), ha böngészőt használ, amely nem támogatja a szűrőket, és nem lehet látni az eredményt.

CSS3 szűrők módosítani képeket stílusok
CSS3 szűrők módosítani képeket stílusok

Mindig is akartam egy Gauss blur a képet vagy szöveget csak egy CSS? Ezzel a szűrővel lehet! Blur, mértékegysége a képpont, így nem valami ilyesmi:

szűrőt. elhomályosít # 40; 5px # 41; ;
// böngészőspecifikus
-WebKit-szűrőt. elhomályosít # 40; 5px # 41; ;
-moz-szűrőt. elhomályosít # 40; 5px # 41; ;
-o-szűrő. elhomályosít # 40; 5px # 41; ;
-ms-szűrőt. elhomályosít # 40; 5px # 41; ;

CSS3 szűrők módosítani képeket stílusok
CSS3 szűrők módosítani képeket stílusok

A fényerő mért nulla vagy egy, 1 - a teljes fényerő (fehér) és 0 - az eredeti fényerő.

szűrőt. fényesség # 40; 0.2 # 41; ;
// böngészőspecifikus
-WebKit-szűrőt. fényesség # 40; 0.2 # 41; ;
-moz-szűrőt. fényesség # 40; 0.2 # 41; ;
-o-szűrő. fényesség # 40; 0.2 # 41; ;
-ms-szűrőt. fényesség # 40; 0.2 # 41; ;

telítettség

CSS3 szűrők módosítani képeket stílusok
CSS3 szűrők módosítani képeket stílusok

Telítettség mérjük százalékában.

szűrőt. telít # 40; 50% # 41; ;
// böngészőspecifikus
-WebKit-szűrőt. telít # 40; 50% # 41; ;
-moz-szűrőt. telít # 40; 50% # 41; ;
-o-szűrő. telít # 40; 50% # 41; ;
-ms-szűrőt. telít # 40; 50% # 41; ;

tone csavar

CSS3 szűrők módosítani képeket stílusok
CSS3 szűrők módosítani képeket stílusok

Ez a szűrő lehetővé teszi, hogy változtatni a hang forgatva (elképzelni a színskálája, amit majd kapcsolja). Ez fokban mérik.

szűrőt. Hue-forgatás # 40; 20deg # 41; ;
// böngészőspecifikus
-WebKit-szűrőt. Hue-forgatás # 40; 20deg # 41; ;
-moz-szűrőt. Hue-forgatás # 40; 20deg # 41; ;
-o-szűrő. Hue-forgatás # 40; 20deg # 41; ;
-ms-szűrőt. Hue-forgatás # 40; 20deg # 41; ;

kontraszt

CSS3 szűrők módosítani képeket stílusok
CSS3 szűrők módosítani képeket stílusok

Konstrastnost ismét százalékában mért. 100% az alapértelmezett érték 0% lesz egy teljesen fekete képet. Minden hozzáteszi, hogy több mint 100% a kontraszt!

szűrőt. kontraszt # 40; 150% # 41; ;
// böngészőspecifikus
-WebKit-szűrőt. kontraszt # 40; 150% # 41; ;
-moz-szűrőt. kontraszt # 40; 150% # 41; ;
-o-szűrő. kontraszt # 40; 150% # 41; ;
-ms-szűrőt. kontraszt # 40; 150% # 41; ;

CSS3 szűrők módosítani képeket stílusok
CSS3 szűrők módosítani képeket stílusok

Mért százalékos. Ez tartománya 0% és 100%. Furcsamód, ebben a pillanatban, hogy nem támogatja a WebKit inverzió, ha kevesebb, mint 100%.

szűrőt. invert # 40; 100% # 41; ;
// böngészőspecifikus
-WebKit-szűrőt. invert # 40; 100% # 41; ;
-moz-szűrőt. invert # 40; 100% # 41; ;
-o-szűrő. invert # 40; 100% # 41; ;
-ms-szűrőt. invert # 40; 100% # 41; ;

elszíneződés

CSS3 szűrők módosítani képeket stílusok
CSS3 szűrők módosítani képeket stílusok

Ismét meg kell adni a százalékos arány, amellyel szeretné deszaturálja a képet. Ez tartománya 0% és 100%.

szűrőt. szürkeárnyalatos # 40; 100% # 41; ;
// böngészőspecifikus
-WebKit-szűrőt. szürkeárnyalatos # 40; 100% # 41; ;
-moz-szűrőt. szürkeárnyalatos # 40; 100% # 41; ;
-o-szűrő. szürkeárnyalatos # 40; 100% # 41; ;
-ms-szűrőt. szürkeárnyalatos # 40; 100% # 41; ;

CSS3 szűrők módosítani képeket stílusok
CSS3 szűrők módosítani képeket stílusok

szűrőt. szépia # 40; 100% # 41; ;
// böngészőspecifikus
-WebKit-szűrőt. szépia # 40; 100% # 41; ;
-moz-szűrőt. szépia # 40; 100% # 41; ;
-o-szűrő. szépia # 40; 100% # 41; ;
-ms-szűrőt. szépia # 40; 100% # 41; ;

böngésző támogatása