Noticias 

Emplea un efecto de superposición de hojas con CSS

En CSS teníamos la capacidad de hacer cosas vistosas y novedosas y con CSS3 pero en el siguiente tutorial veremos cómo 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 luego lo centramos.
2 – definimos los efectos para la etiqueta <blockquote> en general, damos un ancho (opcional), lo posicionamos relativamente y le damos un padding.
3 -posteriormente añadimos 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:

Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Entradas relacionadas