Initial create pentru folosirea impreuna cu SVG-uri, filtrele CSS sunt o metoda foarte puternica de manipulare a elementelor din website prin post-procesare, in special acum cu trend-urile de folosire de mult blur sau culori mute in design. Cu ele poti obtine rezultate spectaculare cu foarte putin cod scris si pot fi animate.

Toate browserele moderne sunt acum compatibile si desi unele filtre sunt destul de intensive in ce priveste performanta (precum blur sau drop-shadow), nu ar trebui sa existe motive pentru care sa le eviti atata timp cat site-ul se misca bine.

Filtrele ce le poti folosi sunt urmatoarele: greyscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur, drop-shadow si SVG filters prin url.

1. greyscale. Poate fi folosit pentru a ajusta culorile elementului inspre alb-negru. La 100% elementul devine complet alb-negru.

element { filter: greyscale(100%) }

2. sepia. Poate fi folosit pentru a ajusta culorile elementului aplicand un efect sepia. La 100% culorile elementului devin complet sepia.

element { filter: sepia(100%) }

3. saturate. Poate fi folosit pentru a ajusta culorile elementului aplicand un efect de saturare. se pot folosi valori mai mari de 100% pentru un efect mai puternic.

element { filter: saturate(5) }

4. hue-rotate. Poate fi folosit pentru a ajusta culorile elementului prin schimbarea culorilor un anumit unghi ca si cum ai folosi o paleta de culori (color wheel).

element { filter: saturate(45deg) }

5. invert. Poate fi folosit pentru a ajusta culorile elementului prin crearea negativului acestora. La 100% elementul devine complet negativ fata de original.

element { filter: invert(70%) }

6. opacity. Poate fi folosit pentru a face elementul transparent. Acesta e similar cu “opacity” normal din CSS, dar este mai bine accelerat hardware de anumite browsere. La 0% elementul devine complet transparent.

element { filter: opacity(.4) }

7. brightness. Poate fi folosit pentru a face elementul mai mult sau mai putin luminat. La 0% elementul devine complet negru iar la 200% este de doua ori mai luminos fata de original.

element { filter: brightness(150%) }

8. contrast. Poate fi folosit pentru a creste sau scadea contrastul elementului. La 0% elementul devine negru, iar la 200% este de doua ori mai mare contrastul fata de original.

element { filter: contrast(150%) }

8. blur. Poate fi folosit pentru a aplica un efect de blur elementului. Numarul de pixeli ales decide cati pixeli sa fie folositi in jurul pixelului original pentru a crea efectul de blur. La 0 ramane elementul original.

element { filter: blur(2px) }

9. drop-shadow. Poate fi folosit pentru a aplica un efect de umbra la element. Acesta este similar cu “box-shadow”. Se poate controla pozitia, raspandirea, blur-ul si culoarea umbrei.

element { filter: drop-shadow(5px 5px 6px #111) }

10. url ce face referinta la un filtru SVG. Se pot folosi filtrele prezente in SVG pentru a crea efecte speciale, acestea fiind accesate folosind o referinta url.

element { filter: url(#hello) }

In viitorul apropiat vor fi introduse filtre custom, denumite CSS Shaders, ce vor putea folosi puterea enorma pe care o au procesoarele grafice (GPU) in ziua de astazi pentru a crea efecte puternice precum deformari 3D si animatii mult mai complexe.