10 design di personaggi creati interamente con HTML e CSS

Sono costantemente sorpreso di quanto puoi fare con i CSS. Gli sviluppatori Web sanno che CSS ti consente di creare layout di pagina incredibili ed effetti di animazione personalizzati.

Ma puoi usarlo anche per molti progetti divertenti. Come, ad esempio, la creazione di design dei personaggi con solo CSS. Suona strano vero?

Beh, lo è sicuramente. E ho raccolto alcuni dei design dei personaggi più strani (ma anche i più belli), tutti realizzati con codice HTML e CSS puro al 100%.

1. Uccelli arrabbiati

Chi non ama Angry Birds? Hanno iniziato come un gioco e in qualche modo hanno ottenuto il loro film dopo aver perforato la cultura pop.

E questa penna di Rachel Bull dimostra che gli Angry Birds possono persino farsi strada nei CSS.

Ironia della sorte, c'è un'immagine in questa pagina ed è usata per incorporare il tipo personalizzato in cima. Ogni altro elemento, dalle curve di quegli uccelli ai gradienti personalizzati, funziona tutto su puro CSS.

Forse non lo snippet di codice più pratico, ma sicuramente un'ispirazione.

2. Frankenstein

Il Frankenstein di Mary Shelley è ampiamente conosciuto come la creatura dalla pelle verde rianimata. Anche se tecnicamente è il mostro di Frankeinstein, non scivola via così bene dalla lingua.

E sebbene questa creatura di Frankenstein possa essere in qualche modo erroneamente chiamata, è comunque uno dei migliori design dei personaggi che abbia mai visto.

Funziona su sole 40 righe di HTML e lo sviluppatore Victoria Ninni Bergquist ha persino aggiunto alcuni CSS per aiutare il mostro a battere le palpebre. Piuttosto pulito!

3. Toy Story Alien

Toy Story della Pixar ha così tanti personaggi memorabili e questi strani ragazzi alieni fanno sicuramente parte di quel cast.

Sunyoung Park ha creato questa penna come demo per CSS e per testare i confini della codifica frontend. Dovrebbe essere visualizzato correttamente in tutti i principali browser e anche in alcuni browser meno recenti. Anche se si basa un po' sulla proprietà rotate().

Fortunatamente questo fa parte della funzione di trasformazione CSS che supporta i browser risalenti a IE9+. Quindi questo piccolo alieno verde può deliziare la maggior parte del mondo connesso a Internet.

4. Aku Aku

Se hai una PlayStation, probabilmente conosci Crash Bandicoot. Bene, questo pazzo di nome Aku Aku è una replica perfetta della maschera... creatura... cosa.

Ogni elemento ha il proprio div con una classe pertinente che definisce quella caratteristica (es. occhio, labbro del naso).

Direi che la parte più difficile di tutto questo progetto è la corona di piume sulla sua testa. Inoltre, le fantastiche animazioni che potrebbero incoraggiare i giocatori a riprendere i loro vecchi giochi Crash.

5. Baby Squirtle

Ecco un altro ottimo esempio di animazione mescolata con il design dei personaggi CSS.

Josh Bader ha codificato questo personaggio Squirtle usando puro CSS e solo 15 righe di HTML. Degno di nota!

Per ottenere l'effetto di camminata, Josh ha aggiunto la pseudo-classe :after su ogni elemento con un'animazione ripetuta. Un'impresa sorprendentemente semplice una volta che guardi sotto il cofano ed è ancora più sorprendente come sia richiesto così poco codice per costruire personaggi come questi.

6. Rick Senza Morty

In questa penna troverai il lavoro stravagante dello sviluppatore James Gilmore che ha creato un Rick chibi in puro CSS.

Il design in realtà utilizza alcune belle ombre discendenti CSS per creare profondità e dare vita a questo personaggio. Per non parlare dell'animazione ripetuta che si fonde bene anche con il design.

Nota che funziona anche su Sass e se vuoi armeggiare con esso ci sono variabili personalizzate nel codice. È molto ben formattato, quindi questo sarebbe un fantastico frammento da studiare per imparare Sass.

7. Brian Griffin

Ecco un altro design del personaggio di Rachel Bull, questo con Brian Griffin di I Griffin.

È sorprendente quanti dettagli puoi ottenere con solo CSS puro. L'intero stile di Brian corrisponde strettamente allo stile artistico dello spettacolo e utilizza ombre esterne che sembrano incredibilmente realistiche.

Anche se questo è piuttosto tecnico con oltre 150+ righe di CSS e utilizza la libreria Compass per l'avvio.

8. Emmet

Da The Lego Movie è Emmet in tutto il suo splendore. Rachel ancora una volta ha creato questo snippet da zero utilizzando CSS e Haml, il modo semplificato di scrivere HTML moderno.

Alcuni di questi elementi sono davvero impressionanti per l'esecuzione solo su CSS. In particolare, i vortici di capelli sembrano davvero pezzi di plastica Lego. Pazzesco che questo sia anche possibile!

C'è un sacco di grande logica Sass nel CSS, e se sei un secchione di sviluppo, ti divertirai a frugare in questa penna. Sia il codice che il risultato sono gloriosi.

9. CSS Eevee

Costruito attorno al fenomeno Pokemon Go è questo Eevee in puro CSS realizzato da David Khourshid.

Utilizza uno sfondo e uno stile di pagina simili a quelli dell'applicazione mentre ricrea l'intero Pokemon in puro CSS. Con un po' di texture e un po' di stratificazione intelligente, David ha fatto sembrare questo Eevee davvero 3D!

Anche le animazioni sono un bel tocco e rendono il tutto più realistico. Che tu sia un fan dei Pokemon o che non abbia mai toccato il gioco, devi ammettere che questo è un buon lavoro.

10. Topolino

Anche se questa testa di Topolino è un po' più semplice, è anche un'impresa. Potresti pensare che sarebbe più facile da gestire perché è statico, tuttavia la penna spinge oltre 450+ righe di Sass.

La parte più tecnica è mettere in ordine tutte le forme e riorganizzare gli elementi per allinearli correttamente uno sopra l'altro.

Eppure il risultato è fantastico e puoi vedere la somiglianza con i primi cartoni animati di Topolino.

11. La principessa Zelda

Ho salvato il meglio per ultimo con questo design del personaggio di Zelda. È un po' bassa nelle gambe ma nel complesso lo stile è accurato.

Lo sviluppatore Charlie Marcotte usa Sass e trasformazioni CSS personalizzate per organizzare tutti gli elementi. Inoltre, l'HTML grezzo è un po' semplificato grazie al preprocessore Pug.

Se stai cercando di spingere i limiti della tua conoscenza CSS, perché non intraprendere un progetto simile? È un ottimo modo per mettere alla prova le tue abilità e puoi sempre condividere qualsiasi cosa costruisci nei commenti qui sotto.