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:

See the Pen CSS Element Background Blend Modes by Adobe Web Platform (@adobe) on CodePen.

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

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 Don Kseso Kseso

Comentarios: 2

  1. Hacía rato que quería mirar esto. No mucha gente sabe que existe, y puede tener alguna utilidad práctica en diseño.

    La que se me ocurrió resolver es ésa de poner un texto sobre una imagen, y que no se vea bien porque se confunde su color con los del fondo. Pero no trabaja tan bien como esperaba (al final dejo un enlace para probar algunos valores).

    No pude hacerlo andar en Firefox. Seguramente tengo que modificar algo en la configuración. Pero Chrome tiene algunas variantes más aparte de 'mix-blend-mode' y 'background-blend-mode', como '-webkit-background-composite', aunque supongo que pronto dejará de funcionar, hoy hacen practicamente lo mismo.

    También pensé que aplicando un 'multiply' (que al fin de cuentas hace una transparencia) se podría resolver el famoso tema del cambio de opacidad en una imagen de fondo. Es una pena que no tenga valores numéricos, porque si fuese animatable también tendríamos arreglado lo de las transiciones entre fondos.

    La herramienta que colgué en Codepen es muy parecida a la que publicaste. No es didáctica, no sé si se entiende cómo trabaja a la primera lectura si no se conoce el lenguaje javascript, así que está para usarla más que para estudiarla. Lo que sí algunos cambios de colores al desplazar el texto me recordaron los efectos psicodélicos que les gustaban tanto a los chicos allá por los años sesentas.
    Y sin fumarme nada.

    Prueba mix-blend-mode en diferentes colores de texto sobre distintas imágenes.

    ResponderEliminar
    Respuestas
    1. Sip. En Firefox me faltaba habilitarlo. Ahora anda. En Opera (webkit) seguro también trabaja, me faltaría verlo en IExplorer.

      No sé si te di las gracias por publicar el artículo, así que lo hago ahora. Éstas son las cosas que si uno no las ve ni se ocupa de probarlas, y ya se me ocurrieron dos o tres experimentos para hacer.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap