Disegnare in CSS: il pollo

Come promesso nell’articolo disegnare in css: forme, oggi impareremo a disegnare un pollo in CSS!

Se ci segui da un po’ avrai riconosciuto il pollo che ho disegnato per Pasqua l’anno scorso, che è ispirato a un’illustrazione che ho trovato su Dribbble.

Iniziare: preparare il corpo

Quando disegno in CSS, ogni elemento visibile è un div che ri-stile (o un :before/:after ma sempre da un div). Quindi inizieremo in modo semplice per il nostro HTML con solo un div con una classe chicken:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Chicken</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="chicken"></div></body></html>

Qui il nostro div chicken servirà semplicemente come wrapper per il resto e non avrà alcuno stile. Lo impostiamo su position: relative per posizionare gli altri elementi rispetto a questo! E come nella maggior parte dei miei tutorial daremo uno stile al corpo per centrare il nostro design passando attraverso un display: flex!!

body {background-color: #00bcd4;display: flex;justify-content: center;align-items: center;height: 100vh;}.chicken {position: relative;}

Ora che le basi sono gettate, saremo in grado di metterci al lavoro e iniziare a disegnare il nostro pollo. Aggiungete un div con come classe body nel vostro div pollo. E per rispondere a uno dei grandi misteri dell’universo, “L’uovo o la gallina? In realtà questa domanda non ha senso perché la gallina è un uovo! Quindi come corpo disegneremo una forma di uovo:

.body {width: 150px;height: 170px;background-color: #fff;border-radius: 50% / 60% 60% 40% 40%;}

Se non avete capito bene come funziona questo codice, vi invito a leggere l’articolo della settimana scorsa in cui ho spiegato come disegnare un uovo. Dato che vogliamo disegnare una faccia all’interno, impostiamo il corpo in posizione: relativa. E per maggiore realismo aggiungeremo anche una piccola ombra, quindi aggiungete queste due linee alla vostra classe del corpo:

position: relative;box-shadow: 7px 7px 0 7px #eee;

Passo 2: la faccia

Iniziamo dando alla nostra gallina la vista. Se guardate l’illustrazione, abbiamo un occhio che appare in cima al corpo e uno in basso. Quindi creeremo due div con la classe occhio, uno nel nostro div corpo e uno nel nostro div pollo, proprio sopra il corpo. Sul nostro primo div occhio aggiungeremo anche una classe occhio-destra per distinguerlo dall’altro e posizionarlo correttamente. Poi ne faremo due cerchi neri:

.eye {position: absolute;height: 15px;width: 15px;border-radius: 50%;background-color: #000;top: 50px;}.eye-right {left: 50px;}

Se tutto va bene, dovresti ottenere questo per ora:

Un uovo che ti guarda
Un uovo che ti guarda

Ora possiamo aggiungere un becco! Separeremo il becco in due parti: la parte superiore e quella inferiore, quindi aggiungi questo al tuo corpo:

<div class="beak-top"></div><div class="beak-bottom"></div>

Per la parte superiore disegneremo un mezzo cerchio giallo. Per fare questo basta mettere un raggio-bordo sui due angoli della parte superiore della stessa dimensione dell’altezza del vostro elemento. Aggiungeremo anche un effetto “riflesso” sul becco, per questo potete usare un’ombra o un bordo. E siccome è più breve da scrivere, qui sono passato attraverso un bordo che ho semplicemente messo in bianco a sinistra del becco.

Per la parte inferiore, disegniamo semplicemente un rettangolo arancione con i due angoli inferiori arrotondati:

.beak-top {width: 27px;height: 15px;background-color: #FFDA0F;border-radius: 27px 27px 0 0;position: absolute;top: 70px;left: -10px;border-left: 3px solid #fff;}.beak-bottom {width: 20px;height: 7px;background-color: #f0ba43;border-radius: 0 0 7px 7px;position: absolute;top: 85px;left: -1px;}

E per finire il becco, dobbiamo aggiungere la parte rossa sotto il becco. E siccome non ho idea di come si chiami, ho usato sobriamente “sottobecco” come classe. Fai attenzione, poiché vuoi posizionarlo sotto il becco, il tuo div deve essere posizionato sopra i due div del becco (puoi anche giocare con gli z-index ma ti consiglio di evitarlo il più possibile)! Poi facciamo semplicemente un rettangolo rosso e giochiamo con il raggio del bordo per dare questa forma particolare:

.under-beak {height: 20px;width: 15px;background-color: #A20000;position: absolute;top: 85px;left: 5px;border-radius: 20px 2px 8px 8px;}

L’ala o la coscia

Per l’ala, disegneremo un rettangolo trasparente, arrotonderemo i suoi angoli inferiori e visualizzeremo solo i bordi inferiore e sinistro. Aggiungete il div dell’ala nel vostro corpo, e nel vostro CSS, scrivete:

.wing {width: 40px;height: 20px;border-radius: 0 0 10px 30px;position: absolute;top: 100px;left: 75px;border: 5px solid;border-color: transparent transparent #000 #000;}

Per le gambe abbiamo anche bisogno di averne una davanti al corpo e una dietro, quindi fate come per gli occhi: un div gamba/destra nel corpo e un div gamba fuori dal corpo, sopra. Poi disegniamo semplicemente due rettangoli abbastanza alti e con i bordi superiori e inferiori arrotondati:

.leg {position: absolute;width: 10px;height: 30px;border-radius: 10px;left: 55px;background-color: #f0ba43;bottom: -35px;}.leg-right {left: 80px;background-color: #FFDA0F;}

Il tocco finale

Così potremo aggiungere la cresta e la coda della nostra gallina. Dato che entrambi sono forme ripetute, creeremo semplicemente un elemento per ciascuno e poi giocheremo con il box-shadow. Aggiungi un div cresta e un div coda nel tuo HTML.

Entrambi saranno rettangoli con bordi superiori arrotondati e un bordo esposto per ottenere un effetto di riflessione come il becco. Poi con una trasformazione incliniamo ognuno di loro e duplichiamo l’elemento con un box-shadow.

Una particolarità per la cresta: per avere il riflesso su due degli elementi creeremo un’ombra extra, più leggera e sfalsata solo di qualche pixel rispetto all’altra. Questo ci dà questo:

.crest {width: 30px;height: 40px;background-color: #A20000;border-radius: 40px 40px 0 0;position: absolute;top: -25px;left: 45px;border-left: 6px solid #D30700;transform: rotate(-10deg);box-shadow: 31px 14px 0 0 #A20000, 27px 14px 0 3px #D30700, 50px 30px 0 0 #A20000;}.tail {width: 30px;height: 70px;background-color: #A20000;border-radius: 40px 40px 0 0;position: absolute;top: 90px;right: -25px;border-right: 6px solid #D30700;transform: rotate(50deg);box-shadow: -23px -10px 0 0 #A20000;}

Il piccolo extra: dare un po’ di vita

Un’animazione molto semplice che mi piace molto mettere sui miei vari disegni CSS: occhi che sbattono! Si tratta solo di ridurre le dimensioni degli occhi regolando l’altezza in modo che il centro rimanga lo stesso:

.eye {animation: 8s chickenEye 1s infinite;}@keyframes chickenEye {2%{height: 7px;top: 54px;}4%{height: 15px;top: 50px;}6%{height: 7px;top: 54px;}8%{height: 15px;top: 50px;}}

E nella mia classe degli occhi attivo semplicemente l’animazione dopo un secondo dal caricamento della pagina, e ogni 8s la mia gallina ammicca due volte!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *