A szűrők használata CSS3 - stúdió Palycha
CSS3 szűrők (szűrő) - egy hatékony eszköz, amely lehetővé teszi, hogy elérjék lenyűgöző vizuális hatásokat, mint például a képek. Különösen hasznos, hogy hozzon létre útmutatást hatások (hover) elemek. Szűrők adjon nekünk egy módosításának módszere az alapvető rendering DOM-elem. Ezek lehetővé teszik, hogy a dolgokat, mint egy elmosódott. változtatni a kontrasztot. meg is változtatja a színét a elemet.
szűrők létrehozásának
Ha belegondolok grafikus szűrők, az első dolog, ami eszembe jut egy fekete-fehér szűrő. Fogott egy színes képet, akkor kiderül, hogy egy fekete-fehér változat. Ez az első szűrő, amit meg kell nézni.
Ahhoz, hogy ezt a szűrőt CSS3, már csak be kell írni a következő:
Mint látható, most neobohodimo használja -webkit prefix - (ez a funkció elérhető eddig csak WebKit mobil böngésző), a kulcsszó szűrő. majd beállíthatja a többi szűrő, vesszővel elválasztva.
Ebben az esetben a kiválasztott szürkeárnyalatos (1). elem, hogy teljesen fekete-fehér, de szeretnék kérni egy 0,5, majd a kép lenne színezetű 50% telítettség.
Valami, ami mindig jól néz ki a kép homályos (blur), így adja hozzá.
Mint látható, csak használja több szűrőt. Ha bejelöli a böngészőben, akkor láthatjuk, hogy mind a két szűrő alkalmazása megfelelően a képet. Eddig minden egyszerű volt, nem? De ha azt akarjuk, hogy kiszűrje a Photoshop. CSS is ezt az Ön számára. Kezdjük a kontrasztot.
Alkalmazza a kép kontrasztját, mint egyszerűen:
Abban az esetben, a kontraszt meg kell gondolni, 100% kiindulópontként. Ha beállítja a 100% érték, a kép nem fog változni. Ha kevesebb, mint ez az érték, például 50%, a kontraszt csökken. Ha több, mint 100%, például 150%, akkor hogy a kép világosabb.
Egy másik nagyon érdekes szűrő, ami a rendelkezésünkre áll - egy árnyalatot forgatás (színárnyalat forgatás). Úgy működik, nagyon hasonlít a Hue / Saturation panel a Photoshop.
Ehhez a szűrőt kell használni az értéket fok. Ez talán egy kicsit bonyolultnak első pillantásra, de ahhoz, hogy megértsük, mi ez a szűrő nem elegendő ahhoz, hogy meghatározza az értékét minden egyes pixel színét a kép, és forgassa el a színkör. Például, ha a pixel - kék, akkor, amikor bekapcsolja a színárnyalatot a 180 fokos, kiderül narancs.
Mi is van egy telítettség (telített), a másik hatás, általánosan használt Photoshop. Ezzel a szűrővel, amelynek értéke meghaladja a 100% -ot, akkor lehetséges, hogy a szín élénkebb az elem, hiszen ez a szűrő is 100% -osan, mint egy kiindulási pont:
És persze, van más szűrők is, mint Sepia (szépia), amely működik a leírt módon, hogy fokozatosság szürkeárnyalatos szűrő, ahol meg egy értéket 0 és 1 között:
Mi is a nem-átláthatóság (opacitás), és ezt a szűrőt is működik értékek 0-tól 1:
Tovább CSS3 szűrő, hogy van - ez a negatív (invert), hogy felhívja színű pixelek a eleme, hogy ha beállított érték 100%, akkor a kimenet néz ki, mint egy fotó negatív. Az értékek a tartományban 0% és 100%.
Az egyik szűrők, amelyben már a funkcionalitás - a rejtett szűrő (drop-árnyék). Tart ugyanazokat az értékeket, hogy a box-árnyék CSS. A fő különbség az, hogy ha ezt egy PNG fájlt átlátszó háttérrel, egy árnyék fogják alkalmazni az egész pixel, és nem az egész PNG fájl elérési útját. CSS változata a szűrő is hardveresen gyorsított.
Végül, van egy fényerő (fényerő) és ez is pontosan azt, amit talán korábban használt Photoshop. Ez a szűrő tekintjük 100%, mint a kezdeti érték. Ha a 100% -ot, semmi sem fog változni az elem, de az értéke 0% fog fordulni a tételt a fekete, és a 200% teszi kétszer olyan fényes:
következtetés
CSS3 szűrők egy nagyon hatékony módja, hogy változtassa meg a tételeket a légy, anélkül, hogy be kell vonni a további képeket. Ezt mind a CSS. Ez ad nekünk korlátlan lehetőségeket, amikor a kezelő felhasználói eseményeket vizuálisan. Kár, hogy eddig csak a WebKit.