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.
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.
