5.14 Filter

Ez a lehetőség a CSS-ben a képek utólagos filterezésére van lehetőség, hasonlóan a Photoshop-hoz. A lehetőségek:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

blur(px) Elhomályosítás effekt. Nagyobb szám homályosabb eredményt ad. A 0 esetén nincs hatás.  
brightness(%) A fényesség beállítása

0% - teljesen fekete.
100% (1) - alapértelmezett az eredeti képet kapjuk.
100%-nál nagyobb érték esetén világosabb lesz a kép.

 
contrast(%) A kontraszt beállítása

0% - Teljesen fekete.
100% (1) - alapértelmezett. Az eredeti képet kapjuk.
100%-nál nagyobb, kontrasztosabb kép.

 
drop-shadow(h-shadow v-shadow blur spread color) Árnyékolt kép.

Lehetséges értékek:
h-shadow - kötelező. Vízszintes árnyék mértéke pixelben. Negatív szám balra vet árnyékot.

v-shadow - kötelező. Függőleges árnyék mértéke. Negatív szám felül vet árnyékot.

blur - Opcionális. Pixelekben megadható. Ennek hatására elmosódottá teszi az árnyékot. 0 esetén éles lesz a határ.

spread - Opcionális. Pixelben adandó. Pozitív értékre nagyobbá válik az árnyék és elmosódott.
Megkegyzés: Nem minden böngésző támogatja.

color - Opcionális. Színt ad az árnyéknak. Ha nem aduk meg, akkor a böngésző alapértelmezett színe.

az alábbi példában piros árnyék lesz, az elmosódottság 10px:

filter: drop-shadow(8px 8px 10px red);

 
grayscale(%) Szürkeárnyalatos kép.

0% (0) alapértelmezett és az eredeti képet kapjuk.
100% teljesen szürke lesz a kép.

 
hue-rotate(deg) Hue forgatás. Alapértelmezett 0 fok, változatlan kép.

Megjegyzés: Maximum érték 360 fok.

 
invert(%) A kép invertálása.

0% (0) - alapértelmezett, az eredeti kép. the original image.
100% - teljesen invertált kép.

 
opacity(%) Sets the opacity level for the image. The opacity-level describes the transparency-level, where:

0% is completely transparent.
100% (1) is default and represents the original image (no transparency).

Megjegyzés: Negatív szám nem lehetséges
Tip: Hasonló az opacity tulajdonsághoz.

 
saturate(%) Saturates the image.

0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provides super-saturated results.

Megjegyzés: Negatív szám nem lehetséges

 
sepia(%) Szépia színű lesz a kép.

0% (0) alapértelmezett, eredeti kép lesz.
100% - Teljesen szépia színű kép.

Megjegyzés: Negatív szám nem lehetséges

 
url()

az url() függvénnyel egy XML fájlt adunk meg, amely SVG filtert definiál.

Example: filter: url(svg-url#element-id)