Een veelgebruikte ontwerptechniek is de laatste tijd om een ​​vouweffect te creëren, waarbij het lijkt alsof een kop zich achter de container bevindt. Dit wordt meestal bereikt door het gebruik van kleine afbeeldingen; Met CSS kunnen we dit effect echter vrij eenvoudig nabootsen. Ik zal je laten zien hoe in vier minuten.

Abonneer u op onze YouTube-pagina om alle videozelfstudies te bekijken!

Kijk liever op Screenr.com?

---

Laatste HTML

         
 
 Mijn richting  
 
  

---

Laatste CSS

 #container background: # 666; marge: automatisch; breedte: 500 px; hoogte: 700 px; padding-top: 30px; font-family: helvetica, arial, sans-serif;  h1 background: # e3e3e3; achtergrond: -moz-linear-gradient (bovenaan, # e3e3e3, # c8c8c8); achtergrond: -webkit-gradiënt (lineair, links bovenaan, links onderaan, vanaf (# e3e3e3), naar (# c8c8c8)); opvulling: 10px 20px; marge links: -20px; margin-top: 0; positie: relatief; breedte: 70%; -moz-doos-schaduw: 1px 1px 3px # 292929; -webkit-doos-schaduw: 1px 1px 3px # 292929; vakschaduw: 1px 1px 3px # 292929; kleur: # 454545; tekstschaduw: 0 1px 0 wit;  .arrow width: 0; hoogte: 0; regelhoogte: 0; border-left: 20px solid transparant; border-top: 10px solid # c8c8c8; top: 104%; links: 0; positie: absoluut;