La propiedad Css mix-blend-mode: policromía en textos y scrolls 22.6.14

La propiedad Css mix-blend-mode: policromía en textos y scrolls

La propiedad Css mix-blend-mode permite seleccionar la forma en que se mezclan los colores de un elemento con todo lo que se encuentra debajo de él, a diferencia de la propiedad background-blend-mode que sólo tiene en cuenta el fondo (background) del propio elemento (no influyen otros elementos en la composición final).

A quién aplica mix-blend-mode

La propiedad mix-blend-mode se puede declarar a todos los elementos en los medios visuales. No se hereda y no es animable.

En la mezcla o composición del color final intervienen tanto el valor de la propiedad color (si es un elemento de texto) así como los colores que conforman las imágenes (ya sean elementos vía background o vía img en el html).

También se ven afectados otras partes o componentes del elemento que contenga o estén coloreadas, como los bordes, barras de scroll... étc.

Hay una serie de propiedades que crean grupos aislados o isolated groups que limitan el alcance de la mezcla:

• opacity
• filters
• 3D transforms (2D transforms no)
• blending
• masking

Valores de mix-blend-mode

Admite los mismos valores que la propiedad background-blend-mode:

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

Al usar la propiedad mix-blend-mode ten presente que la combinación de algún valor con según qué color no produce efecto alguno

Soporte de navegadores

Pues sinceramente, en el momento de escribir este artículo no he comprobado qué navegadores y sus versiones soportan la propiedad background-blend-mode. Y en vez de busca información al respecto (que pudiera estar más o menos vigente) he decidido colocar realizar este pen a modo de "míralo tú mismo":

En Firefox has de cambiar a true la opción layout.css.mix-blend-mode.enabled.

See the Pen isJGu by Kseso (@Kseso) on CodePen.

Imaginación y blend modes

Con un poco de imaginación y paciencia para ir probando cosas, puedes, con el manejo de las propiedades relativas a la mezcla de colores o blend modes, lograr algunos efectos que hasta estaban vedados a Css. En algún navegador o en todos.

Si conoces el artículo "Cómo personalizar Scrollbars: desplázate con estilo" recordrás que una conclusión era que para Firefox habría que recurrir a Js.

Otra realización que hay que delegar a otros lenguajes es el texto multicoloreado.

Pues dos cosas menos en la lista de eso con Css no se puede

See the Pen Text & scroll tinted by Kseso (@Kseso) on CodePen.

Y para terminar, un pequeño divertimento jugando con las dos propiedades implicadas en la composición de colores: mix-blend-mode y background-blend-mode.

Fíjate que ocurre con el texto (tintado o sin tintar) y la imagen que se encuentra debajo pese a tener sombra:

See the Pen Playing with Css blend-modes by Kseso (@Kseso) on CodePen.

Crédito de la imagen del header: marimmaciel.blogspot.com

Kseso

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