Corsi on-line

I Simpsons in CSS

The Simpsons in CSS” è un progetto realizzato dallo sviluppatore Chris Pattle che ha voluto riprodurre alcuni personaggi della nota serie animata creata da Matt Groening utilizzando unicamente CSS; l’autore ha lavorato per sottrazione, partendo quindi da un’elaborazione grafica i cui elementi sono stati sostituiti via via con le regole di stile.

SimpsonsIn pratica, per la costruzione dei volti Pattle ha lavorato utilizzando uno schema basato sulla suddivisione in shapes (figure geometriche), queste ultime vengono utilizzate comunemente anche da artisti e fumettisti per mostrare le basi delle tecniche di disegno; le varie shapes sono state poi assemblate per creare l’output atteso come, per esempio, il volto di Homer Simpson rappresentato nella figura successiva.

Simpsons2Naturalmente, la parte più complessa del lavoro dovrebbe essere stata quella necessaria per il rendering CSS di ciascuna shape, operazione che in alcuni casi avrebbe richiesto la digitazione di regole di stile particolarmente articolate; a questo proposito si pensi che per disegnare un particolare, apparentemente di poco conto, come la testa di Mr Burns:

Simpsons3sarebbe stato necessario un CSS come il seguente (da notare l’ampio utilizzo di prefissi per la compatibilità cross-browser):

display: block;
position: absolute;
top: -5px;
left: 15px;
display: block;
width: 37px;
height: 54px;
background: #f8dc00;
border: 1px solid #110b00;
-webkit-border-radius: 63px 63px 63px 63px/108px 108px 72px 72px;
border-radius: 50% 50% 47% 50%/48% 52% 19% 41%;
-webkit-transform: rotate(79deg);
-ms-transform: rotate(79deg);
transform: rotate(79deg);

Attualmente Pattle ha già sviluppato tutti i personaggi principali della serie (l’opera di sviluppo è cominciata nel novembre del 2013) più alcuni characters secondari, ammesso che figure come l’Uomo dei Fumetti o Apu possano essere considerate marginali nel panorama di Springfield. Tutti i sorgenti fino ad ora implementati sono disponibili sul servizio per il code hosting e il controllo di versione GitHub.

Via Simpsons in CSS – Chris Pattle

Post correlati
I più letti del mese
Tematiche