Crea un efecto de papel doblado flexible con CSS3

() translation by (you can also view the original English article)

En este tutorial, aprenderemos a crear un efecto de papel doblado flexible (adaptable) utilizando funciones de CSS3 como degradados de fondo y sombras de cuadro, que pueden dar un fondo atractivo al área de contenido de tu sitio web.

Paso 1: Configuración del `<head>`

Comencemos haciendo una página HTML muy básica. Usaremos HTML5 porque... ¡¿por qué no?!


  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="utf-8" />
  	<title>Flexible Folded Paper Effect</title>
  	<link rel="stylesheet" type="text/css" href="css/reset.css" />
  	<link rel="stylesheet" type="text/css" href="css/style.css" />

  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<!--[if IE]>
  		<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  	<![endif]--><
  	<!--[if gte IE 9]>
      <style type="text/css">
        .gradient {
           filter: none;
        }
      </style>
    <![endif]-->
  </head>

En la cabecera, nos aseguramos de usar el tipo de documento HTML5, establecemos nuestro título, llamamos a nuestras hojas de estilo, también usamos la meta etiqueta viewport para que nuestro efecto funcione en dispositivos móviles y tabletas. Finalmente, hay un polyfill para que los elementos html5 sean reconocidos en navegadores más antiguos, y también hay una solución para los gradientes CSS3 para IE que necesitaremos más adelante en el tutorial.

Paso 2: Configurar el `<body>`


  <body>
  	<div id="page-wrap">

  		<div class="paper">
  		  <section>
  		    <h1>Flexible Folded Paper Effect</h1>
  		    <hr /><h2>Achieved with a mixture of CSS3 gradients and box-shadows.</h2>
  		  </section>  
  		  <section>
  		    
  		  	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla. Praesent lectus lacus, tristique at dictum ac, porta at magna. Phasellus est nunc, pulvinar non tempor a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.<br/><br/>Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.</p>

  		  </section>
  		  <section>
  		  </section>
  		  <section>
  		  </section>
  		</div>

  	</div> <!-- END page-wrap -->

  </body>
  </html>

Ahora, en la sección principal de la página tenemos un contenedor div que envuelve la página y otro que envuelve el "papel". Dentro de este div, agregaremos una etiqueta <section> cada vez que queramos una sección doblada en el papel. Hay dos tipos de estas secciones, por lo que más adelante en el CSS podremos diferenciarlas usando los selectores n-ésimo hijo 'impar' e 'par'. De esta manera, nuestro HTML se mantiene lo más semántico posible sin nombres de clases superfluos.

En estas secciones he agregado algo de contenido; títulos y texto de marcador de posición. Esta es una estructura de página simple bastante normal, pero tenemos todo lo que necesitamos para crear el efecto de papel doblado pasando al CSS.

Paso 3: Estilo general de la página

En el CSS vamos a crear el efecto completamente desde cero, sin imágenes, solo por diversión.


  * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
  }

  body {
    background: #777; 
  }

  #page-wrap {
    margin: 0 auto;
    max-width: 980px;
    width: 100%; 
  }

  .paper {
    margin: 30px auto;
    background: #f5f4f0;
    max-width: 960px;
    width: 90%;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.7); 
  }
  
  h1 {
    font: bold 50px "Georgia", serif;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    margin-bottom: 20px;
  }

  h2 {
    font: bold 25px "Georgia", serif;
    text-align: center; 
  }

Estos son los estilos básicos de la página. Declaramos un ancho máximo fijo y un porcentaje del ancho real para que todo el elemento "papel" sea flexible. Los estilos de encabezado son solo para el ejemplo, obviamente, depende de tus habilidades artísticas cambiarlos de acuerdo con tu diseño.

Paso 4: Aplicando estilos a ambas secciones del pliegue


  section {
    width: 100%;
    min-height: 100px;
    position: relative;
    padding: 30px;
  }

Aquí nos aseguramos de que cada sección se extienda al 100% a través de su elemento principal. Definimos una altura mínima, de esa manera, si deseas agregar secciones de pliegue vacías como en el ejemplo, no tendrán una altura de 0px. Luego declaramos la posición relativa y agregamos un poco de relleno, una vez más solo para este diseño.

Nota: Es muy importante declarar position: relative; en esta sección; lo necesitamos para colocar los elementos de sombra que realmente venden el efecto.

Paso 4: Agregar el degradado


  .paper section:nth-child(even) {
    background: -moz-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #e9eae5), color-stop(100%, rgba(244, 245, 240, 0)));
    background: -webkit-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
    background: -o-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
    background: -ms-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
    background: linear-gradient(135deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9eae5', endColorstr='#00f4f5f0',GradientType=1 ); 
  }

Esta vez solo aplicamos estilo a cada elemento de la sección par, lo que significa el segundo, cuarto, sexto, etc. Aplicamos un degradado para dar la impresión de que se proyecta una sombra sobre el papel en un espacio 3D. Este degradado es una de las partes más esenciales de este diseño y es importante elegir un color que combine con el papel.

En este caso, el papel era #f5f4f0, por lo que el gris del degradado (que se desvanece en diagonal desde la parte superior izquierda a la inferior derecha) es #e9eae5 hasta volverse completamente transparente.

Puedes utilizar una serie de herramientas para generar tus degradados, por ejemplo:

Colorzilla
Generador de degradado CSS3 de Damian Galarza
Gradientapp para OS X

Paso 5: Agregar las sombras

Una vez hecho esto, agreguemos ahora algunas sombras debajo del papel.


  .paper section:nth-child(odd):before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 0px;
    left: 10px;
    width: 50%;
    top: 20px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
    box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg); 
  }

  .paper section:nth-child(odd):after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 0px;
    right: 10px;
    left: auto;
    width: 50%;
    top: 20px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg); 
  }

Ahora sé que esto puede parecer desalentador para las personas que no están acostumbradas a usar transformaciones CSS3 o pseudo-elementos, pero en realidad es bastante sencillo.

Aquí solo estamos agregando las sombras para cada sección impar. Comenzamos empujando el elemento adicional detrás del papel con z-index. Es aquí donde declaramos una posición absoluta, por lo que necesitamos declarar la posición relativa en el elemento padre antes.

Básicamente, estamos haciendo dos cajas negras que ocupan la mitad del ancho de nuestra sección de plegado (width: 50%;) luego les damos sombras de caja y luego las giramos en una cantidad de 5°. Estos elementos extra están en su mayoría ocultos, pero están colocados de tal manera que dan la ilusión de profundidad, como si el papel se estuviera desprendiendo de la página. Estas sombras acentúan el efecto creado por el degradado anteriormente.

Paso 6: Agregar las sombras finales

Ahora necesitamos repetir un proceso similar para nuestras secciones numeradas uniformemente.


  .paper section:nth-child(even):before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 20px;
    left: 10px;
    width: 50%;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
    box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg); 
  }

  .paper section:nth-child(even):after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 20px;
    right: 10px;
    left: auto;
    width: 50%;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg); 
  }

Exactamente igual que antes, pero con algunos detalles. Obviamente, estamos apuntando a los elementos pares y no a los impares, y el posicionamiento es diferente, por lo que la sombra se ubica en la parte superior del cuadro y se gira hacia el otro lado, creando así una especie de sombra triangular cerca del punto de cada "doblez". Aquí:

Paso 7: Agregar algunas Media-queries

Habrás notado que hemos estado usando porcentajes para anchos y hemos estado configurando un entorno para un diseño adaptable. Si tomas el ejemplo como está ahora y lo cambias de tamaño, funciona bastante bien. Pero hay imperfecciones. Estos se pueden solucionar con algunas correcciones que se activan en ciertos puntos.


  @media only screen and (max-width: 600px) {
    h1 {
      font-size: 25px; }

    h2 {
      font-size: smaller; }

    .paper section:nth-child(even):after {
      right: 20px; }

    .paper section:nth-child(odd):after {
      right: 20px; }

    .paper section:nth-child(even):before {
      left: 20px; }

    .paper section:nth-child(odd):before {
      left: 20px; } 
  }

Así que aquí acabamos de hacer nuestros encabezados más pequeños (una vez más solo para la demostración) también hemos tenido que reemplazar los pseudo-elementos ligeramente porque se mostraban en ventanas pequeñas. Elegí 600px como punto de interrupción simplemente porque fue entonces cuando las sombras se volvieron demasiado grandes en mis ojos, una vez más, esto está completamente abierto para que lo cambies de acuerdo con tu diseño.

Compatibilidad del navegador

Como usamos gradientes CSS3, la compatibilidad del navegador se limita a los navegadores modernos e Internet Explorer 10. Nuestros gradientes tienen una propiedad de filtro de respaldo para darnos acceso a IE9, por lo que solo se descuenta IE8 y versiones anteriores. IE8 en realidad se dispara de varias maneras (nuestros selectores CSS3, reglas de transformación y sombras (box-shadows), ¡así que olvidémonos de IE8 por completo!) Afortunadamente, es una degradación elegante y el contenido de la página es perfectamente accesible:

IE8

No olvides que tus media queries también deberán contener la única palabra clave, para evitar que IE8 analice todo su contenido de forma predeterminada.

Conclusión

¡Ahí lo tienes! Un efecto de papel doblado flexible creado con degradados CSS3, sombras y pseudo elementos. Espero que hayas disfrutado de este tutorial y con suerte hayas aprendido algo útil de él. Déjame saberlo en los comentarios ya que me encantaría escuchar tus opiniones.