soy Kseso y esto EsCSS

Photoshop en los estilos: blend mode o modos de fusión puro Css

Introducción al uso de los modos de fusión o blend modes en puro Css. Introducción al documento del W3c "Compositing and Blending Level 1"

Photoshop en los estilos: blend mode o modos de fusión puro Css

·Por Kseso ✎ 2

Photoshop en los estilos: blend mode o modos de fusión puro CssA poco que hayas utilizado cualquier editor de imágenes te sonará uno de los muchos efectos que ofrecen: los blend modes o modos de fusión entre dos objetos o capas (depende de la terminología de cada editor).

Dicho de cualquier forma, estos efectos de fusión o mezcla (blend modes) lo que hacen es mezclar "píxel a píxel" dos objetos o capas (ya sean imágenes o colores) para obtener un resultado final de coloración o matiz en función de la interactuación de ambas. El resultado final dependerá del modo de fusión elegido.

Esta mezcla entre elementos que hasta ahora era exclusiva de los editores de texto está disponible también entre el arsenal de Css.

Css blend modes

Y las propiedades que lo hacen posible son: background-blend-mode y mix-blend-mode

Y el documento que las desarrolla es "Compositing and Blending Level 1" con estatus (hoy) W3C Last Call Working Draft.

La propiedad mix-blend-mode
Define la forma en que los colores de un elemento deben fusionarse con el fondo.
La propiedad background-blend-mode
Define el modo de fusión entre los fondos (background).
Cada elemento del fondo se debe mezclar con la capa del background del elemento que está debajo de ella y con el color de fondo del elemento. Los backgrounds no deben mezclarse con el contenido que está detrás del elemento, sino que deben actuar como si se presentasen en un grupo aislado.
Los Valores o modos de fusión posibles con Css:
  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity

Lo anterior quiere decir que el elemento al que se aplican modos de fusión crea un contexto de apilamiento en los que tiene lugar la fusión sin que en ella intervengan otros elementos que estén fuera de él. Como ocurre con z-index o las transformaciones.

Así, en un elemento con un color y una imagen de fondo en su modo de fusión no interviene el background del body, por ejemplo, o de cualquiera de sua ancestros en los que esté contenido.

Para ver la sintaxis y el efecto de cada modo de fusión tanto aplicado al fondo como al color de los elementos visita el documento del W3c que lo desarrolla: "Compositing and Blending Level 1"

Orden de aplicación de efectos

Como es posible que sobre un elemento coincidan varios efectos "gráficos", el orden de aplicación es el definido en el modelo de composición de SVG: primero se aplican los filtros (filters), seguidos y por este orden de recortes(clipping), máscaras (masking), fusiones (blending) y heredados de su ancestro (Parent Compositing).

Soporte por navegadores

Puedes experimentar estos efectos en las últimas versiones de desarrollo de Chrome, Firefox, Safary. En algunos deberás habilitarla como en FF. En otros ya viene por defecto. Consulta en esta página su estado.

Ejemplos varios

Si tienes alguno de los navegadores que ya lo implementan puedes ver en funcionamiento los modos de fusión o Css blend modes en este pen:

Puedes hacer una búsqueda en codepen con la cadena "css blend mode" para ver otros ejemplos de los modos de fusión.

avatar del Editor del blog
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso