Mezclas de fondo CSS3: Efectos de fondo de Photoshop en CSS3 puro

Con CSS3 podemos agregar más de un fondo a un elemento. Al hacerlo, las imágenes de fondo y/o los colores se apilan unos sobre otros, tal como lo sabe por el concepto de capas de Photoshop. Mientras existan transparencias, el archivo o color de fondo subyacente brillará. Las nuevas mezclas de fondo CSS3 permiten aún más posibilidades para combinar varios fondos en una apariencia impresionante.

Crear fondos y elegir efectos

Para comenzar, primero debemos crear más de un fondo usando la propiedad «fondo». La adición de fondos se realiza simplemente separándolos con comas en la definición de fondo. Luego use la propiedad „background-blend-mode“ para definir el efecto de fusión.

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: multiply;
}

Originales e imágenes grapadas por «multiplicación»

En este ejemplo, usamos dos archivos JPEG como imágenes de fondo. Como JPEG nunca contiene transparencias, solo se mostrará la imagen llamada primero, es decir, sin CSS3 Background Blends. Al hacer uso del valor „multiplicar“ en la propiedad „background-blend-mode“, ambas imágenes se multiplican entre sí.

Efectos de fusión de Photoshop

Hay una multitud de efectos adicionales además de „multiplicar“. Todos los efectos disponibles se asemejan mucho a los efectos de capa conocidos dentro de Photoshop. No es de extrañar, ya que Adobe ha colaborado para llevar estos efectos a CSS3. Tenemos formas de hacer que las imágenes se vean nítidas según CSS3, usando los efectos «luz suave» y «luz dura», «oscurecer» y «aclarar», «pantalla», «superposición», «dodge de color» y «color». -quemar“, „diferencia“, „exclusión“, „tono“, „color“, „saturación“ y „luminosidad“. Sí, eso es exactamente lo que obtienes de Photoshop. Y si comparas los resultados de CSS3 con los de Photoshop tampoco encontrarás diferencias. Tenga en cuenta que el uso del «modo de fusión de fondo» siempre pondrá los efectos en todos los fondos dados.

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: lighten;
}

Originales e imágenes „aligeradas“

En este ejemplo, usamos el efecto «aclarar» en ambos archivos JPEG. Esto da como resultado un fondo blanco liso. Para invocar el efecto solo en el primer fondo, podemos definir que el segundo se muestre sin ningún efecto.

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: lighten, normal;
}

Y eso es lo que hacemos aquí. En este ejemplo, definimos efectos individuales para cada imagen involucrada, donde el valor «normal» asegura que no se aplique ningún efecto. Es posible elegir cualquier combinación de efectos, por supuesto.

body {
  background: url("wolken.jpg"), url("burg.jpg"), url("sonstwas.jpg");
  background-blend-mode: lighten, multiply, normal;
}

Asegúrese de llamar al valor «normal» en el último fondo de sus proyectos, ya que ninguna imagen o color sigue al último 😉 El uso de CSS3 Background Blends no es necesario para fondos simples. Siga usando Photoshop y exporte las imágenes en consecuencia. Pero cuando piensa en usar la propiedad de «transición», las mezclas de fondo tienen mucho sentido. No importa si elige usar imágenes o colores. Cada fondo definido siempre se manejará como una capa separada a la que se le aplica un efecto. Los gradientes de CSS3 también se manejarán correctamente.

body {
  background: url("wolken.jpg"), red;
  background-blend-mode: lighten, normal;
}

Compatibilidad con navegador

En el momento de escribir este artículo, Chrome 35+, Firefox 30+ y Opera 22+ admiten la propiedad «background-blend-mode». Estas son las versiones más recientes. Se espera que Safari admita la función a partir de la versión 8.

(dpe)