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.

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.

👇 Da non perdere 👇

• Domini Internet 🌍
• Internet 💻
• Lavoro 🔧
• Marketing & SEO 🌪
• Mondo Apple 🍎
• monitoraggio servizi online 📈
• Programmare 🖥
• 💬 Il nostro canale Telegram: iscriviti
• 🔴 Pioggia di caratteri stile Matrix in JS (con codice)
• 🟢 Cos’è la PEC e come funziona
• 🔴 Cosa vuol dire piano nobile?

Pubblicità – Continua a leggere sotto :-)

Seguici su Telegram: @trovalost