Pubblicato da: Max
In data:
14 Dic 2021
Tempo di lettura:
Ciao! Ricordi la vecchia immagine della busta del famosissimo gmail?
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à.
Questo è il container-centrale__busta dopo l’applicazione delle proprietà.
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 🙂
