Efecto de superposición de hojas con CSS

En CSS teníamos la capacidad de hacer cosas vistosas y novedosas y con CSS3 podemos mejorar estos conceptos, crear efectos gráficos es muy sencillo si utilizamos algunas de las nuevas propiedades. El ejercicio de hoy es muy sencillo y a la vez practico. Vamos a hacer el efecto de hojas superpuestas con CSS, la idea nos es duplicar el elemento HTML y con z-index hacer este efecto, no, la idea es hacer esto con CSS y los pseudo-elementos.

Esto es lo que vamos a conseguir:

Esto lo podemos usar para enfatizar alguna cita o resaltar algún fragmento de texto. También este efecto lo podemos utilizar con imágenes u otro elemento HTML.

El HTML

En el código HTML solo vamos a utilizar una <blockquote> y un <p> no mas, ya que todo el trabajo lo haremos con CSS y sus atributos.

El CSS

1 – Primero damos los estilos al párrafo, color estilo de fuente, tamaño y lo centramos.

2 – establecemos los efectos para la etiqueta <blockquote> en general, damos un ancho (opcional), lo posicionamos relativamente y le damos un padding.

3 -Luego aplicamos color de fondo y una sombra al elemento <blockquote> y a los pseudo-elementos before y after.

4 – Luego con ( blockquote:after, blockquote:before ) añadimos las respectivas hojas de fondo que darán el efecto de superposición y claro especificamos los prefijos de cada navegador.

5 – Y por ultimo especificamos la rotación de cada pseudo-elemento por medio de transform: rótate; y aplicamos la rotación de acuerdo a lo que deseemos.

Y Listo!! esto es todo. Hemos creado este efecto grafico de superposición de hojas utilizando solo CSS y una etiqueta HTML. Efecto que antes lo lográbamos con algún programa de edición de imagen.

Este efecto también lo podemos hacer con imágenes y la podemos terminar con una transición en el estado hover. Ejemplo:

Nos vemos en otro tutosytips.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

5 Respuestas

  1. Muy interesante tu artículo, te felicito, son muy llamativos esos efectos que se consiguen con CSS3

  2. clever dice:

    hola amigo me gustarua aprender mas de diseño no se si me recomiendes un tutorial para comenzar a meterme al mundo de diseño web solo se lo que es progrmacion este es mi correo
    clever_imperio@hotmail.com

  3. Pepe dice:

    Te puedo pasar un script en python que eso salga poco a poco, tu sabe.

  4. jk dice:

    Que bueno, se le agradece por el tips