Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Filtri immagini CSS, manipolare grafica bitmap

Manipolare le bitmap per creare effetti d'impatto sulle immagini come sfocature, effetto seppia o controlli su luminosità e contrasto.
Manipolare le bitmap per creare effetti d'impatto sulle immagini come sfocature, effetto seppia o controlli su luminosità e contrasto.
Link copiato negli appunti

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:

Blur | Webkit Filters

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%);
}

Invert | Webkit Filters

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


Ti consigliamo anche