Una tecnica di progettazione comune ultimamente consiste nel creare un effetto di piegatura, in cui appare come se un'intestazione si stesse avvolgendo dietro il suo contenitore. Questo è generalmente ottenuto attraverso l'uso di piccole immagini; tuttavia, con i CSS, possiamo imitare questo effetto abbastanza facilmente. Ti mostrerò come fare in quattro minuti.

Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!

Piuttosto guarda su Screenr.com?

---

HTML finale

         
 
 La mia intestazione  
 
  

---

CSS finale

 #container background: # 666; margine: auto; larghezza: 500 px; altezza: 700 px; padding-top: 30px; font-family: helvetica, arial, sans-serif;  h1 background: # e3e3e3; background: -moz-linear-gradient (in alto, #e3e3e3, #c8c8c8); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# e3e3e3), a (# c8c8c8)); imbottitura: 10px 20px; margin-left: -20px; margin-top: 0; posizione: relativa; larghezza: 70%; -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; box-shadow: 1px 1px 3px # 292929; colore: # 454545; text-shadow: 0 1px 0 bianco;  .arrow width: 0; altezza: 0; altezza della linea: 0; border-left: 20px solid transparent; border-top: 10px solid # c8c8c8; superiore: 104%; a sinistra: 0; posizione: assoluta;