Una técnica de diseño común últimamente es crear un efecto de pliegue, donde aparece como si un encabezado se estuviera envolviendo detrás de su contenedor. Esto se logra generalmente mediante el uso de imágenes pequeñas; Sin embargo, con CSS, podemos imitar este efecto con bastante facilidad. Te mostraré cómo en cuatro minutos..

Suscríbete a nuestra página de YouTube para ver todos los videos tutoriales.!

Más bien ver en Screenr.com?

---

HTML final

         
 
 Mi rumbo  
 
  

---

CSS final

 #container background: # 666; margen: auto; ancho: 500px; altura: 700px; acolchado superior: 30px; Familia tipográfica: helvética, arial, sans-serif;  h1 background: # e3e3e3; fondo: -moz-lineal-gradiente (arriba, # e3e3e3, # c8c8c8); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# e3e3e3), hasta (# c8c8c8)); relleno: 10px 20px; margen izquierdo: -20px; margen superior: 0; posición: relativa; ancho: 70%; -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; cuadro de sombra: 1px 1px 3px # 292929; color: # 454545; texto-sombra: 0 1px 0 blanco;  .arrow ancho: 0; altura: 0; línea de altura: 0; borde izquierdo: 20px sólido transparente; borde superior: 10 píxeles sólidos # c8c8c8; superior: 104%; izquierda: 0; posición: absoluta;