Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

¿Cómo combinar multiples backgrounds con sólo CSS3?


  Publicado hace |  

Si alguna vez utilizaste Photoshop, recordarás que tiene una función simple donde puedes mezclar diferentes capas de colores o imágenes, dando como resultado algo extraño o muy genial; para que puedan entender a lo que me refiero, les dejo esto.

Ejemplo para mezcla de imágenes en PS

Esto ya es posible de hacer con CSS3 y más específico con los backgrounds, recordemos que tienen la capacidad de permitirnos utilizar capas, podemos agregar tantas como deseemos y sobreponerlas.

Modo mezcla con CSS3

Los backgrounds ahora tienen bastantes funcionalidades que han permitido crear efectos muy vistosos, por ejemplo, tenemos el Texto 3D con capas de sombra, gracias al ingenioso uso de todas las capacidades que tiene, permite evadir el uso de imágenes PNG.

Ahora toca hablar de “background-blend-mode, permite mezclar las diferentes capas de backgrounds de forma muy similar a Photoshop, nos permite crear efectos muy divertidos con una simple linea de código.

Esta propiedad permite la siguiente lista de efectos:

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity

El código CSS de ejemplo:


body {
	background: url("imagen.jpg"), url("imagen2.jpg");
	/*background-color: #ccc; Puedes combinarlo con colores de fondo también*/
	background-size: cover;
	background-blend-mode: lighten, normal /*Puedes agregar mas de 1*/;
}

Bastante simple de aplicar, puedes jugar con la cantidad de capas que quieras y también con los diferentes modos de mezcla que tiene la propiedad, el potencial es muy grande y apuesto que en Internet puedes encontrar muchos ejemplos elaborados por diseñadores.

Compatibilidad con navegadores

Ha sido probado en Chrome 35+, Firefox 30+ y Safari 6.1+. Si lo has probado en otro navegador, cuéntanos que tal te fue y que tan útil te parece esta propiedad en los comentarios.

Para más información de la propiedad background-blend-mode, puedes ir al sitio web de la W3C.

comments powered by Disqus