I CSS3 continuano a portare novità in ambito front-end che spingono in avanti verso esperienze utente sempre più ricche, flessibili e coinvolgenti.
I nuovi filtri CSS sono uno strumento potente per creare effetti grafici su immagini, testi o anche elementi più generici del DOM. Il principio alla base di queste tecniche è semplice: applicare modifiche bitmap utilizzando specifiche matematiche, vettoriali.
Originariamente sviluppate dal gruppo di lavoro W3C per il programma SVG (Scalable Vector Graphics), oggi sono riconosciute come parte delle specifiche CSS e sono già implementate parzialmente in alcuni browser come Google Chrome (18+).
A qualcuno verrà in mente la proprietà 'filter' utilizzata su alcuni vecchie versioni di Internet Explorer per richiamare funzioni proprietarie non-standard (es. div { filter: alpha(opacity=50); } su IE7 e IE8. Il W3C ne ha deprecato quest'utilizzo in favore di una nuova sintassi CSS3 standard. Quindi, utilizza pure 'vecchi' e nuovi filtri CSS nella stessa dichiarazione, ma attenzione alla compatibilità fra browser.
Utilizzo pratico dei nuovi filtri
Se abbiamo delle immagini a colori ma vogliamo visualizzarle a browser in bianco e nero, allora è il caso di utilizzare il filtro grayscale.
Ecco un esempio pratico con l'uso di sintassi standard W3C:
.img-container {
filter: grayscale(50%);
}
Il browser renderizzerà l'immagine correttamente seguendo l'HTML e il percorso immagine specificato nel tag img, creererà una sorta di screenshot dell'immagine e applicherà il filtro b/n leggendo la specifica CSS.
È possibile applicare anche un effetto 'blur', tipicamente creato da un web designer tramite un programma di fotoritocco come Photoshop. Ecco un esempio pratico con cui possiamo interagire direttamente su Chrome:
Possiamo modificare i valori in px della sfocatura per capire il semplice funziomento del filtro.
Possiamo intervenire anche su luminosità, saturazione, inversione colori, effetto seppia, contrasto, opacità e altro ancora. Ecco una tabella che elenca tipologia, supporto e performance attuale:
| Filter effect | Browser support | Performance |
|---|---|---|
| grayscale | Chrome | very fast |
| sepia | Chrome | very fast |
| saturate | Chrome | very fast |
| hue-rotate | Chrome | fast |
| invert | Chrome | very fast |
| opacity | Chrome | can be slow |
| brightness | Chrome | fast |
| contrast | Chrome | fast |
| blur | Chrome | slow unless accelerated |
| drop-shadow | Chrome | can be slow |
| url() | Chrome, Mozilla | Varies, fast to slow |
Fonte: http://www.html5rocks.com/en/
Altri esempi di filtri immagini CSS
Giocando con il logo di HTML.it, possiamo invertire un'immagine semplicemente combinando rotazione e proprietà 'invert':
img {
-webkit-filter: hue-rotate(360deg) invert(100%);
filter: hue-rotate(360deg) invert(100%);
}
Oppure possiamo creare un effetto combinato attraverso i valori 'brightness' e 'seppia':
img {
-webkit-filter: brightness(30%) sepia(100%);
filter: brightness(30%) sepia(100%);
}
Brightess + Sepia | Webkit Filters
Proviamo a modificare il codice dei demo linkati, utilizzando anche testi o altri elementi HTML. Le combinazioni fra filtri sono molte e i risultati possono essere stupefacenti!
Su questa pagina possiamo visualizzare la resa grafica di più effetti combinati.
Conclusioni
Attualmente solo Chrome 18+ renderizza correttamente le tecniche descritte ma si tratta di sintassi standard che verrà implementata da tutti i browser (e le nuove versioni degli stessi) a venire.
I filtri CSS sono uno strumento potente per manipolare dinamicamente valori che sono sempre stati alla portata dei programmi di fotoritocco e non dei fogli di stile CSS. Si va sempre più verso una convergenza di tecnologie (HTML/CSS/JS) che danno la possibilità al developer di avere sempre più controllo, usando standard aperti, sugli elementi di una pagina web.
Sarà possibile manipolare un testo o un immagine on-the-fly via firebug senza passare per Photoshop o modificare la resa di una pagina web tramite javascript interagendo con le richieste dell'utente.
Link utili / Risorse
