10 modele de caractere create în întregime cu HTML și CSS

Sunt în mod constant surprins de cât de mult poți face cu CSS. Dezvoltatorii web știu că CSS vă permite să creați niște aspecte incredibile de pagină și efecte de animație personalizate.

Dar îl poți folosi și pentru multe proiecte distractive. Cum ar fi, de exemplu, construirea de modele de caractere doar cu CSS. Sună ciudat, nu?

Ei bine, cu siguranță este. Și am adunat unele dintre cele mai ciudate (dar și mai tari) modele de caractere, toate realizate din cod HTML și CSS 100% pur.

1. Angry Birds

Cine nu iubește Angry Birds? Au început ca un joc și și-au luat cumva propriul film după ce au spart cultura pop.

Și acest stilou de Rachel Bull dovedește că Angry Birds își pot găsi chiar drumul în CSS.

În mod ironic, există o imagine pe această pagină și este folosită pentru a încorpora tipul personalizat în partea de sus. Toate celelalte elemente, de la curbele acelor păsări până la gradienții personalizați, rulează pe CSS pur.

Poate că nu este cel mai practic fragment de cod, dar cu siguranță o inspirație.

2. Frankenstein

Frankenstein al lui Mary Shelley este cunoscut pe scară largă drept creatura cu pielea verde reînviată. Deși din punct de vedere tehnic este monstrul lui Frankeinstein, asta nu se rostogolește atât de bine.

Și, deși această creatură Frankenstein poate fi oarecum greșită, este încă unul dintre cele mai bune modele de personaje pe care le-am văzut.

Funcționează pe doar 40 de linii de HTML, iar dezvoltatorul Victoria Ninni Bergquist a adăugat chiar și niște CSS pentru a ajuta monstrul să clipească. Destul de curat!

3. Toy Story Alien

Toy Story de la Pixar are atât de multe personaje memorabile și acești extratereștri nebunești fac cu siguranță parte din distribuția respectivă.

Sunyoung Park a construit acest stilou ca o demonstrație pentru CSS și pentru a testa limitele codării frontend. Ar trebui să se redeze corect în toate browserele majore și chiar în unele browsere mai vechi. Deși se bazează destul de mult pe proprietatea rotate().

Din fericire, acest lucru vine ca parte a funcției de transformări CSS, care acceptă browsere care datează de la IE9+. Deci, acest mic extraterestru verde poate încânta cea mai mare parte a lumii conectate la internet.

4. Aku Aku

Dacă ai avut o PlayStation, atunci probabil știi despre Crash Bandicoot. Ei bine, acest tip nebun pe nume Aku Aku este o replică perfectă a măștii... creaturii... chestiei.

Fiecare element are propriul său div cu o clasă relevantă care definește acea caracteristică (adică ochi, buza nasului).

Aș spune că partea cea mai dură a întregului design este coroana de pene de pe cap. Plus animațiile interesante care ar putea încuraja jucătorii să-și ia vechile jocuri Crash.

5. Baby Squirtle

Iată un alt exemplu grozav de animație amestecată cu design de caractere CSS.

Josh Bader a codificat acest caracter Squirtle folosind CSS pur și doar 15 linii de HTML. Impresionant!

Pentru a obține efectul de mers pe jos, Josh a adăugat pseudo-clasa :after pe fiecare element cu o animație care se repetă. O performanță surprinzător de simplă odată ce te uiți sub capotă și este și mai surprinzător cum este necesar un cod atât de mic pentru a construi personaje ca acestea.

6. Rick fără un Morty

În acest stilou veți găsi munca ciudată a dezvoltatorului James Gilmore, care a creat un Rick chibi în CSS pur.

Designul folosește de fapt niște umbre frumoase CSS pentru a crea profunzime și pentru a da viață acestui personaj. Ca să nu mai vorbim de animația care se repetă, care se îmbină frumos și cu designul.

Rețineți că acest lucru rulează și pe Sass și, dacă doriți să vă jucați, există variabile personalizate în cod. Este foarte bine formatat, așa că acesta ar fi un fragment minunat de studiat pentru a învăța Sass.

7. Brian Griffin

Iată un alt design al personajului de către Rachel Bull, acesta avându-l pe Brian Griffin din Family Guy.

Este surprinzător cât de multe detalii puteți obține doar cu CSS pur. Întregul stil al lui Brian se potrivește îndeaproape cu stilul artistic al spectacolului și folosește umbre care par incredibil de realiste.

Deși acesta este destul de tehnic, cu peste 150 de linii de CSS și folosește biblioteca Compass pentru a porni.

8. Emmet

Din filmul Lego este Emmet în toată gloria lui. Rachel a construit din nou acest fragment de la zero folosind CSS și Haml, modalitatea simplificată de a scrie HTML modern.

Câteva dintre aceste elemente se evidențiază într-adevăr ca fiind destul de impresionante pentru rularea doar pe CSS. În special, vârtejele de păr arată într-adevăr ca niște piese Lego de plastic. Nebun că acest lucru este chiar posibil!

Există o mulțime de o logică Sass grozavă în CSS și, dacă sunteți un tocilar dezvoltător, vă va bucura să aruncați în jurul acestui stilou. Atât codul, cât și rezultatul sunt glorioase.

9. CSS Eevee

Construit în jurul fenomenului Pokemon Go, este acest Eevee CSS pur creat de David Khourshid.

Folosește un fundal și un stil de pagină similar cu aplicația, în timp ce recreează întregul Pokemon în CSS pur. Cu puțină texturare și niște straturi inteligente, David a făcut ca acest Eevee să arate de fapt 3D!

Animațiile sunt, de asemenea, o notă plăcută și fac ca totul să pară mai realist. Indiferent dacă ești fan Pokemon sau nu te-ai atins niciodată de joc, trebuie să recunoști că este o treabă bună.

10. Mickey Mouse

Deși acest cap de Mickey Mouse este puțin mai simplu, este și o adevărată ispravă. Ai putea crede că ar fi mai ușor de gestionat, deoarece este static, totuși stiloul împinge peste 450 de linii de Sass.

Partea cea mai tehnică este aranjarea tuturor formelor și rearanjarea elementelor pentru a se alinia corect unele peste altele.

Cu toate acestea, rezultatul este fantastic și puteți vedea asemănarea cu primele desene animate cu Mickey.

11. Prințesa Zelda

Am păstrat tot ce este mai bun pentru final cu acest design al personajului Zelda. Este puțin scurtă la picioare, dar în general stilul este corect.

Dezvoltatorul Charlie Marcotte folosește Sass și transformări CSS personalizate pentru a aranja toate elementele. În plus, HTML-ul brut este simplificat destul de mult datorită preprocesorului Pug.

Dacă încerci să depășești limitele cunoștințelor tale CSS, de ce să nu faci un proiect similar? Este o modalitate excelentă de a-ți testa abilitățile și poți oricând să împărtășești orice ai construi în comentariile de mai jos.