Pubblicato da: Max
In data:
9 Feb 2022
Tempo di lettura:
Ciao! Nel video-tutorial di oggi, realizzeremo una
Tazza di latte 3d in CSS.
Partiamo!
Dopo aver impostato come al solito la nostra pagina minima html, inseriamo all’interno del body, un container principale e al suo interno un div con classe tazza.
Passiamo al foglio di stile, tramite il selettore universale asterisco, resettiamo padding e margini dell’intero documento e impostiamo il box-sizing su border-box; passiamo a stilizzare il body, assegniamogli un background, un display:flex, settiamo i contenuti al centro e gli diamo un altezza minima del 100% del viewport: min-height:100vh.
Stilizziamo il container, assegnandogli soltanto una position:relative; e top:50px;
Passiamo alla tazza, e gli diamo:
position:relative;
width:300px;
height:200px;
Come background, diamo un gradiente lineare che parte da destra e che sfuma dal bianco al grigio chiaro.
Infine arrotondiamo di 45px il bordo inferiore-sinistro e inferiore-destro del nostro box ( tazza )
Qualche ritocco alla tazza!
Realizziamo la parte interna visibile della tazza!
Realizziamo il bordo della tazza!
È arrivato il momento del Latte!
Disegniamo il manico!
Assegniamo al body un colore di sfondo diverso che faccia risaltare di più la tazza
Un pò di ombra e riflesso!
È una tazza per la colazione!
A me il latte piace caldo!
E quindi creiamo gli elementi che formeranno il vapore che esce dal latte caldo
Stilizziamo le particelle di vapore, e animiamole per avere l’effetto del latte caldo fumante
Il Latte è pronto!
Bene! Abbiamo concluso questo video-tutorial sulla creazione di una Tazza di latte fumante 3D in CSS.
Per scaricare i file creati durante la lezione, clicca sul tasto Download, e dopo decomprimi il file ZIP
Puoi guardare il video-tutorial completo sul mio canale YouTube, dove troverai tantissimi altri video simili.
Ciao! Alla prossima 🙂
