In letzter Zeit ist es üblich, einen Falteffekt zu erzeugen, bei dem es so aussieht, als würde eine Überschrift hinter ihrem Container liegen. Dies wird im Allgemeinen durch die Verwendung von kleinen Bildern erreicht. Mit CSS können wir diesen Effekt jedoch sehr leicht nachahmen. Ich zeige dir wie in vier Minuten.

Abonniere unsere YouTube-Seite, um alle Video-Tutorials anzusehen!

Schau lieber auf Screenr.com?

---

Finales HTML

         
 
 Meine Richtung  
 
  

---

Finales CSS

 #container Hintergrund: # 666; Marge: auto; Breite: 500px; Höhe: 700px; Polsterauflage: 30px; Schriftfamilie: helvetica, arial, serifenlos;  h1 Hintergrund: # e3e3e3; Hintergrund: -moz-linearer Gradient (oben, # e3e3e3, # c8c8c8); Hintergrund: -webkit-gradient (linear, links oben, links unten, von (# e3e3e3) bis (# c8c8c8)); Polsterung: 10px 20px; Rand links: -20px; Rand oben: 0; Position: relativ; Breite: 70%; -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; Box-Schatten: 1px 1px 3px # 292929; Farbe: # 454545; Text-Schatten: 0 1px 0 Weiß;  .arrow width: 0; Höhe: 0; Zeilenhöhe: 0; Rand links: 20px durchsichtig transparent; border-top: 10px fest # c8c8c8; Spitze: 104%; links: 0; Position: absolut;