O tehnică obișnuită de design în ultima vreme este crearea unui efect fold, în cazul în care se pare ca o rubrică se înfășoară în spatele containerului. Acest lucru se realizează în general prin utilizarea unor imagini minuscule; Cu toate acestea, cu CSS, putem imita acest efect destul de ușor. Îți arăt cum în patru minute.

Abonați-vă la pagina noastră YouTube pentru a viziona toate tutorialele video!

Mai degrabă urmăriți pe Screenr.com?

---

HTML final

         
 
 Poziția mea  
 
  

---

CSS finală

 #container background: # 666; marja: auto; lățime: 500px; înălțime: 700px; padding-top: 30px; font-family: helvetica, arial, sans-serif;  h1 background: # e3e3e3; fundal: -moz-linear-gradient (sus, # e3e3e3, # c8c8c8); fundal: -webkit-gradient (liniar, stânga sus, stânga jos, de la (# e3e3e3), la (# c8c8c8)); padding: 10px 20px; margin-stânga: -20px; marginea superioară: 0; poziție: relativă; lățime: 70%; -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; box-shadow: 1px 1px 3px # 292929; culoare: # 454545; text-shadow: 0 1px 0 alb;  .arrow width: 0; înălțime: 0; linia-înălțime: 0; marginea stângă: 20px solid transparent; frontieră: 10px solid # c8c8c8; top: 104%; stânga: 0; poziția: absolută;