Guida ai filtri CSS3: cosa sono e come si usano

Giovanni Canella

05/11/2013

3088

In questo articolo continuamo il viaggio alla scoperta delle novità introdotte con la nuova versione dei fogli di stile, nella precedente puntata abbiamo visto come inserire caratteri personalizzati nella nostra pagina web, ora vedremo come sfruttare appieno i nuovi filtri CSS3, per manipolare o apportare effetti molto carini alle immagini. 

Qualcuno può avere qualche reminiscenza della vecchia proprietà filter: per applicare hack nelle obsolete versioni di Internet Explorer che non supportavano appieno le nuove versioni di CSS. Quest'ultima è stata deprecata a favore a quella che andremo a vedere in questo articolo.

Guida ai filtri CSS3: cosa sono e come si usano

Prima di iniziare però è bene avvertirvi della compatibilità tra i vari browser, al momento di stesura dell'articolo (18 Ottobre 2013) questa proprietà è supportata da:

  • Google Chrome,
  • Safari,
  • Opera.

Mentre il supporto è ancora scadente o totalmente assente su:

  • Firefox,
  • Internet Explorer.

Quindi consiglio di usarli, ma non abusarne in quanto potremmo penalizzare eccessivamente la navigazione  su questi ultimi due browser citati, e non possiamo dire che non abbiamo rilevanza in questo panorama. Si, Internet Explorer, non è mai eccelso per questo tipo di supporto, ma è bene ricordare che ancora ricopre circa il 20% della quota mondiale, mentre Firefox circa il 16%.

 

grayscale

Prima della comparsa di questo effetto, per poter rendere un'immagine in bianco e nero, dovevamo per forza rivolgerci ai canvas, o caricarla direttamente già modificata, ma adesso basta:

#vecchiaFoto {
	-webkit-filter: grayscale(100%);
}

Dove all'interno delle parentesi va inserito il valore in percentuale da applicare. 

Effetto bianco nero (Grayscale)

 

sepia

 Per dare un toccco vintage alle foto possiamo utilizzare il famoso effetto seppia!

#vintage {
	-webkit-filter: sepia(100%);
}

Effetto seppia (sepia)

 

saturate

La saturazione è un effetto utilizzato molto spesso, quando si vuole enfatizzare una foto, regolando i valori di intensità dei colori, si possono ottenere immagini più "vive" rispetto a una con i nomali livelli di saturazione.

#saturazione {
	-webkit-filter: saturate(50%);
}

Effetto saturazione (saturate)

Mentre ecco un esempio con un valore più alto (500%):

Effetto saturazione 500% (saturate)

 

invert

Utilizzato appunto per invertire i colori di un'immagine, da bianca diventa nera e viceversa per esempio. Questa tecnica viene utilizzata spesso in un altro ambito, rispetto al quale stiamo parlando, ovvero la lettura di file .pdf o la navigazione nel browser per far stancare di meno gli occhi, per chi per lavoro deve passare molte ore al computer

#invertito {
	-webkit-filter: invert(100%);
}

Effetto inversione (invert)

Se messo a 0%, l'immagine resta invariata.

 

contrast

Utilizzato, come per saturate, per rendere l'immagine più accesa rispetto a prima. Naturalmente se esageriamo con i valori diventa innaturale, viceversa se restiamo troppo bassi diventerà cupa.

#contrasto {
	-webkit-filter: contrast(100%);
}

Effetto contrasto

 

brightness

Modifica la luminosità dell'immagine: 

#luminosità {
	-webkit-filter: brighness(100%);
}

Effetto illuminazione (brightness)

 

drop-shadow

Questo è uno fra i più interessanti effetti, in quanto permette di creare una sfumatura del canale alpha dell'immagine! Cosa vuol dire? In pratica si pososno creare ombre di ogni singolo carattere o forma presente nell'immagine come si trattasse di un testo, appunto modificando quel canale presente nella foto.

La sintassi è differente rispetto a quella degli effetti precedentemente visti:

drop-shadow( [x] [y] [sfocatura] [colore )

Quindi volessimo crearne una spostata di 1px sull'asse delle x e 7 su quello dell y con colore nero faremo così:

#drop-shadow {
	-webkit-filter: drop-shadow(1px 7px 1px black);
}

Effetto sfocatura canale alpha (drop-shadow)

Si può utilizzare anche la notazione esadecimale:

#000000

 

blur

Come per ultima, ma non meno importante, l'effetto blur, per sfocare l'immagine a seconda dei px passati come parametro, per creare effetti d'impatto "al volo", quindi senza dover caricare la foto già modificata.

#blur {
	-webkit-filter: blur(2px);
}

Effetto sfocatura (blur)

Unica nota negativa, è la pesantezza. Infatti per computer abbastanza vecchi senza accelerazione hardware ci potrebbero essere dei problemi di navigazione. Naturalmente dipende anche dalle dimensioni dell'immagine, per un logo o una foto di media grandezza non ci dovrebbero essere intoppi.

 

Conclusioni

Ecco tutto, questi sono gli effetti applicabili tramite i nuovi filtri CSS3 su immagini in pochi semplici passaggi: ricordo anche che è possibile combinarli tra di loro e inserirli all'interno di animazioni, in modo da far vedere il cambio:

@-webkit-keyframes bluePill {  
	0% { -webkit-filter: blur(0px) drop-shadow(0px 0px 0px black); }  
	100% { -webkit-filter: blur(3px) drop-shadow(0px 7px 1px black); }  
}

#conclusioni {  
	-webkit-animation: fusione 1s alternate infinite;  
}  

       

I più letti

Ti potrebbero interessare