Pubblicato da: Max
In data:
8 Dic 2021
Tempo di lettura:
Angolo piegato in css:
Ti piacerebbe sapere come realizzare in CSS un effetto di piegatura foglio? Bene! Guarda i video che seguono, e scoprirai come realizzarlo facilmente.
Iniziamo impostando la pagina minima html.
Inseriamo il titolo principale della pagina(<h1>), e stilizziamo body e h1.
Creiamo la struttura del nostro foglio, inserendo una classe che chiameremo appunto “foglio”. All’interno di questo contenitore con classe “foglio”, inseriamo 3 paragrafi(<p>) , che come testo avranno il mitico Lorem ipsum dolor sit amet…
Inseriamo le dichiarazioni di stile per il selettore di classe “foglio”, e assegniamo anche un colore al paragrafo <p>.
Ecco cosa abbiamo ottenuto a questo punto
Adesso è arrivato mil momento di creare la nostra piega sul lato superiore destro del foglio. Per farlo utilizzeremo la tecnica del pseudo-elemento CSS :before, che inserisce un contenuto prima dell’elemento a cui lo applichiamo.
Vediamo il video!
Abbiamo ottenuto il nostro bel foglio piegato. Ovviamente puoi personalizzarlo come vuoi, ad esempio aumentando la piega o diminuendola, puoi modificare i colori o le ombre, cercando sempre di mantenere un aspetto visivo quanto più realistico possibile.
Spero che questo articolo ti sia utile per i tuoi progetti.
Ci vediamo alla prossima 🙂
Ti allego il download dei file utilizzati.
Clicca sul tasto download e dopo decomprimi il file zip.
Se vuoi puoi anche guardare il video completo:
