Visualizzando la pagina web scatta una breve animazione che farebbe pensare all’utilizzo di due immagini PNG a 24bit con ombre in trasparenza animate con transition CSS3.

L’ispezione del codice sorgente mette invece in evidenza una tecnica di ottimizzazione grafica volta alla riduzione delle dimensioni dei file che sfrutta 4 tag <figure>  ai quali vengono assegnati via CSS “leggère” immagini JPG: due rappresentano i tablet, due le rispettive ombre.

A questo punto mi sarei aspettato di vedere l’alone bianco proprio come accaduto su Firefox, ma visualizzando il sito con Safari questo non accade… come hanno fatto a scontornare le immagini? Semplice (mica tanto), attraverso l’apposita regola css3 mask-image che sfrutta un file vettoria SVG, anch’esso leggerissimo, come maschera. Per approfondimenti rimando a questo articolo.

Il sistema è ingegnoso ed il risparmio in termini di Kb è davvero notevole, di contro la sua realizzazione è piuttosto dispendiosa in termini di tempo di realizzazione ed evidentemente ha qualche problema di compatibilità con Firefox. Devo però ammettere che su un’altra postazione Firefox rispondeva correttamente.

Spero che questa tecnica possa tornare utile a qualche collega web developer!
Sotto un dettaglio del codice sorgente ispezionato:

L'articolo CSS mask-image per JPG con effetto PNG sembra essere il primo su Cesare Bordi | Innovation Manager & Back-end Developer.