Pure CSS Francine: l’immagine che cambia a seconda del browser che si usa

Pure CSS Francine: l’immagine che cambia a seconda del browser che si usa

Le pagine web vengono visualizzate in modo diverso a seconda del browser: è proprio così, ed è una delle cose più comuni ma anche più difficili da far capire all’utente medio: ogni browser interpreta o ignora gli elementi della pagina, bloccandone alcuni e cercando di rendere al meglio gli altri. A livello visuale, questo può comportare proporzioni diverse, linee più o meno dense e così via. Dettagli spesso impercettibili o minimali che fanno la differenza, e che ogni web designer dovrebbe conoscere.

Pure CSS Francine è un’opera d’arte realizzata interamente in markup HTML e CSS, e decisamente spettacolare: a seconda del browser con cui si apre l’immagine, infatti, è possibile apprezzare dettagli differenti e resa visiva molto simile, per quanto non identica. Per apprezzare l’effetto, è necessario scaricare il codice in formato ZIP da Github, e poi aprire il file index.html all’interno dello stesso con più browser.

Io ci ho provato stasera, e questo è il risultato ottenuto: ho fatto tre screenshot coi principali browser che uso.

Firefox

Questa è la resa di base su Firefox: ricordiamo che si tratta di un’immagine realizzata dall’esperta di UI e sviluppatrice Diana Smith, tutta in HTML e CSS. Fate caso soprattutto, in questa fase, a come vengono resi gli occhi e le ciglia.

Chrome

In questo caso la resa visuale è abbastanza simile, per quanto l’espressività del viso sembri leggermente più marcata. Anche l’illuminazione della figura sembra seguire un percorso differente. La linea tratteggiata della cintura, ad esempio, qui sembra più sottile del caso precedente. Ma non è tutto: addirittura le proporzioni del viso sembrano molto diverse dagli altri due rendering che ho provato.

Pubblicità:

Safari

Qui le differenze sembrano essere leggermente più marcate: la resa è diversa come è possibile vedere dal glitch sulla spalla destra della donna, e da come sono visualizzati occhi e ciglia: qui sono decisamente più marcati. La resa grafica, in generale, sembrerebbe meno di qualità dei due casi precedenti.

Per testare l’effetto potete scaricare il progetto da Github e provare ad aprirlo con vari browser.


Informazioni sull'autore

Salvatore Capolupo

Consulente SEO, ingegnere informatico e fondatore di Trovalost.it, Pagare.online, Lipercubo.it e tanti altri. Di solito passo inosservato e non ne approfitto.
Ti piace questo articolo?

1 voto

Su Trovalost.it puntiamo sulla qualità dei contenuti da quando siamo nati: la tua sincera valutazione può aiutarci a migliorare ogni giorno.

Pure CSS Francine: l’immagine che cambia a seconda del browser che si usa

Votato 10 / 10, da 1 utenti