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