A molti il tutorial di oggi potrà sembrare  un semplice esercizio di stile (letteralmente… ;)), senza nessuna o quasi applicazione pratica e utilità.

Beh, in primo luogo se anche fosse, il bello della sperimentazione è esplorare possibilità senza dover per forza pensare ad applicazioni concrete nell’immediato. I pensieri e gli spunti si depositano nell’inconscio di ogni programmatore e restano lì, concimando idee che sbocceranno in altri momenti e altri luoghi, nutrendosi di letture apparentemente scollegate ma sempre e comunque stimolanti.

In più, a dirla tutta, alla fine di questo piccolo tutorial vedremo che la proprietà CSS di cui stiamo per parlare un’applicazione pratica e pure utile ce l’ha… eccome!

Di che stiamo parlando?

Stiamo parlando della proprietà mix-blend-mode. Questa proprietà CSS descrive il modo in cui due immagini o elmenti che si sovrappongono devono “mischiarsi” (per l’appunto, “blend”). La sintassi è molto semplice:

e i possibili valori per la tipologia di blending molto numerosi:

Noi in questo tutorial ci concentreremo sul valore “difference”, che è quello più supportato e immediato da visualizzare.

L’esempio: “trova le differenze”

Facciamo un esempio. Prendiamo due immagini molto simili ma non perfettamente identiche, tipo queste due:

image_example

Come facciamo, visivamente, ad evidenziare le differenze fra le due immagini? Semplice! (Passa il mouse sopra l’immagine per la magia):

Il codice usato per ottenere questo risultato è davvero semplicissimo. L’HTML è composto dalle due immagini:

mentre il CSS usa la proprietà che abbiamo appena descritto, e poco altro:

Fico, no? 😉

Supporto e risorse

Il supporto di questa proprietà è abbastanza buono – anzi, direi ottimo se non fosse per quell’accidenti di IE (ed Edge) che ce l’ha “under consideration”:

caniuse

Le risorse di riferimento sono:

Sì, ma a che serve?

Dicevamo all’inizio che questa proprietà può sembrare un puro e semplice “esercizio di stile”. Eppure con un po’ di fantasia, no lo è, anzi…

Il primo utilizzo che ci è venuto in mente riguarda la conversione di un design in una pagina web.

Spesso il lavoro di un front-end developer consiste nel ricevere l’immagine di una certa pagina per convertirla in HTML, CSS e tutto il resto. Come rilevare allora le differenze fra il design originale e il risultato? Beh, un possibile modo estremamente preciso è fare uno screenshot della pagina finale e poi vederne le differenze rispetto al modello con il metodo che abbiamo indicato qui sopra, evidenziando immediatamente tutti i punti in cui le due immagini non coincidono.

Semplice, veloce e soprattutto precisissimo… no?

 

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis