![](https://secure.gravatar.com/avatar/069849e93b798a9aee2c38a6d6b6a85d?s=150&d=https%3A%2F%2Fwww.maxlaferla.it%2Fwp-content%2Fthemes%2Fmax%2Fassets%2Fgravatar.gif&r=g)
Pubblicato da: Max
In data:
14 Dic 2021
Tempo di lettura:
![Busta gmail in CSS: Realizziamola in 5 minuti!](https://www.maxlaferla.it/wp-content/uploads/2021/12/img-busta-gmail-css-300x227.png)
Ciao! Ricordi la vecchia immagine della busta del famosissimo gmail?
![Busta gmail Busta gmail](https://www.maxlaferla.it/wp-content/uploads/2021/12/old-busta-gmail.png)
Bene! Oggi proveremo a realizzarla completamente in CSS.
Mettiamoci a lavoro!
E realizziamo la busta gmail in CSS!
Iniziamo come sempre creando una pagina minima html.
Linkiamo il foglio di stile e creiamo la struttura html della nostra busta.
Passiamo al foglio di stile e stilizziamo contenitore principale (container), che conterrà tutta la busta e ci servirà per posizionarla sullo schermo. Stilizziamo il contenitore che rappresenterà l’ intera busta(container__busta), e infine il corpo centrale della busta(container-centrale__busta) , che useremo per creare la parte che si piega e chiude.
Questo è il container__busta dopo l’applicazione delle proprietà.
![](https://www.maxlaferla.it/wp-content/uploads/2021/12/Schermata-2021-12-14-alle-10.24.02-1024x463.png)
Questo è il container-centrale__busta dopo l’applicazione delle proprietà.
![](https://www.maxlaferla.it/wp-content/uploads/2021/12/Schermata-2021-12-14-alle-10.29.45-1024x423.png)
A questo punto grazie ai 2 pseudo-elementi del CSS after e before, creiamo due contenitori che non sono presenti nella struttura html, e stilizzandoli con le opportune proprietà, otteniamo i due lati della parte richiudibile della nostra busta gmail in CSS.
Spero che questo video-tutorial ti sia utile per i tuoi progetti.
Se vuoi scaricare i file creati durante i video, clicca su Download e decomprimi il file zip.
Se invece vuoi vedere il video-tutorial completo:
Ciao alla prossima 🙂