Filtri e animazioni SVG sulle immagini con CSS

I Filtri nascono come parte della specifica SVG, ma l'utilizzo è stato poi allargato agli elementi del DOM, grazie alla proprietà CSS filter.

Nella lezione precedente abbiamo analizzato l'elemento SVG <filter> e le filter primitive, anticipando che gli stessi filtri utilizzabili sulla grafica SVG possono ora essere utilizzati su elementi HTML grazie alla proprietà filter e alla funzione url().

Il modello grafico è lo stesso della specifica SVG, ma le dichiarazioni CSS permettono una maggiore semplicità di utilizzo.

La proprietà filter

La sintassi generale della proprietà filter è la seguente:

filter: none | <filter-function> [<filter-function>*]

dove filter-function è una delle funzioni:

blur()        | brightness()  | contrast()    | drop-shadow() | grayscale()  
hue-rotate()  | invert()      | opacity()     | sepia()       | saturate() 

• blur() accetta un valore che rappresenta il raggio di sfocatura
• hue-rotate() accetta valori espressi in gradi (deg), fino al valore massimo di 360deg
• drop-shadow() accetta quattro distinti valori, che rappresentano lo scostamento verso sinistra e verso il basso, il raggio di sfocatura ed il colore.

Tutte le altre funzioni accettano valori espressi in percentuale (60%) o in cifre decimali (0.6), dove il valore 0 lascia l'immagine inalterata. I valori negativi non sono ammessi, mentre diversi filtri, come saturate(), brightness() o contrast(), ammettono anche valori superiori al 100%.

È possibile passare alla proprietà un numero arbitrario di funzioni contemporaneamente, dividendo le rispettive notazioni con uno spazio.

Oltre alle funzioni elencate, alla proprietà filter può essere passata anche la URL di un filtro SVG, tramite la funzione url(). Approfondiremo questo aspetto più avanti in questo capitolo.

Una semplice applicazione dei filtri CSS

Supponiamo di disporre di una generica immagine bitmap.

Vediamo come questa viene trasformata grazie alla proprietà filter.

<style type="text/css">
.img1 {
	filter: blur(6px);
}
</style>

Il risultato è nell'immagine successiva.

La specifica ci dice che possono essere combinate diverse funzioni, come nel seguente esempio:

filter: blur(2px) hue-rotate(45deg) drop-shadow(4px 4px 6px #000);

Ad eccezione di Internet Explorer ed Opera Mini, tutti i browser offrono un buon supporto alla proprietà filter, sebbene i client a motore Webkit richiedano il prefisso specifico. Per un maggior dettaglio sull'argomento, si fa rinvio a caniuse.com

Effetti animati con i filtri

Da specifica, la proprietà filter ammette le animazioni. Ciò significa che possiamo creare transizioni e animazioni, passando da un filtro all'altro, oppure da uno stato di presenza ad uno di assenza di filtro e viceversa.

Ad esempio, applichiamo una transizione sull'immagine del tramonto con le seguenti dichiarazioni:

.img1 {
	filter: blur(1px) hue-rotate(45deg);
	transition: filter .4s;
}
.img1:hover {
	filter: blur(0px) hue-rotate(0deg) drop-shadow(4px 4px 6px #000);
}

Il risultato è apprezzabile nella GIF che segue.

Filtri SVG su elementi HTML con CSS

Per concludere, proponiamo lo stesso esempio della lezione precedente, applicando il filtro, però, non ad una grafica SVG, ma a un elemento <p>.
Supponiamo, quindi, il seguente paragrafo:

<p class="filtered">CSS &amp; SVG</p>

Dichiariamo gli stili dell'elemento:

.filtered{
	-webkit-filter: url(#filter);
	filter: url(#filter);
	font-family: Ubuntu, sans-serif;
	color: #0F2BAA;
	font-size: 120px;
}

Infine, riproponiamo lo stesso filtro SVG del capitolo precedente:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
	<defs>
		<filter id="filter">
			<feFlood flood-color="#004" result="color" />
			<feTurbulence baseFrequency=".05,.004" top="-50%" type="fractalNoise" numOctaves="4" seed="0" result="texture_1" />
			<feColorMatrix type="matrix" values="
				0 0 0 0 0,
				0 0 0 0 0,
				0 0 0 0 0,
				0 0 0 -1.2 1.1" in="texture_1" result="texture_2" />
			<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="dilate" />
			<feConvolveMatrix order="8,8" divisor="1"
				kernelMatrix="
				1 0 0 0 0 0 0 0
				0 1 0 0 0 0 0 0
				0 0 1 0 0 0 0 0
				0 0 0 1 0 0 0 0
				0 0 0 0 1 0 0 0
				0 0 0 0 0 1 0 0
				0 0 0 0 0 0 1 0
				0 0 0 0 0 0 0 1" in="dilate" result="matrix" />
			<feOffset dx="4" dy="4" in="matrix" result="offset"/>
			<feComposite operator="out" in="offset" in2="dilate" result="composite_1"/>
			<feComposite in="color" in2="composite_1" operator="in" result="composite_2" />
			<feMerge result="merge">
				<feMergeNode in="composite_2" />
				<feMergeNode in="SourceGraphic" />
			</feMerge>
			<feComposite in2="texture_2" in="merge" operator="in"/>
		</filter>
	</defs>
</svg>

Il risultato sarà esattamente lo stesso dei filtri in puro SVG, come mostrato dall'immagine:

Tutto il codice è scaricabile come allegato alla pagina.

Riferimenti

• CSS filter
• Filter Effects Module Level 1 (W3C)
• filter (MDN)
• Applying SVG effects to HTML content (MDN)
• Using CSS transitions (MDN)