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

La propiedad css mix-blend-mode para la gestión de la mezcla de los colores de un elemento con todo aquello que tenga debajo. A diferencia de background-blend-mode ésta propiedad va más allá del fondo.

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

Por Kseso ✎ 5
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

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: 5

  1. Estuve haciendo algunas pruebas con lo de la barra de desplazamiento en Firefox, y me parece que hay que atajarse un poco. Hasta que no funcione correctamente el valor para exclusiones a los elementos hijos, es nada más que un experimento; no va a funcionar como las de webkit o Explorer. Y aún cuando se puedan hacer excepciones en el blend, las cuentas suelen ser complicadas. Hace unas semanas reví un ejemplo que publiqué hace años para hacer máscaras cuando estos métodos solamente eran soportados por Internet Explorer ... y había que descomponer los colores para destacar uno restando con otro color que fuese la suma de los complementarios.
    Hacer un diseño con eso era una verdadera orquialgia.

    No pongo los enlaces porque uno está en un foro que no quiero promocionar y el otro ya vi que lo encontraron gracias a artículos como éste, porque tuvo algunas visitas más en estos días (según dice el contador de Codepen).

    ResponderEliminar
    Respuestas
    1. Es que has ido a tomar lo que sólo es el farolillo del artículo, Furoya.

      Lo principal es la propiedad, que era obligado dedicarle un artículo después del anterior sobre background-blend-mode
      El detalle del efecto sobre el scroll, y en menor medida el gradiente al texto, como te decía, son sólo una excentricidad para fijar la atención sobre la propiedad y sus posibilidades.

      Creo que el uso de los modos de fusión vendrá en conjunción con los filtros y máscaras.
      Pienso en las regiones y exclusiones (por ejemplo) para identificar visualmente a cada una.
      Pero son sólo eso, posibilidades estéticas.

      Un saludo

      Ah! y lo del scroll fue algo que apareció sin buscarlo y decidí verlo como una novedad en vez de un error :palm: cuando jugaba para montar el primer pen del post.
      Pero no se lo digas a nadie :-D~

      Eliminar
  2. Una pregunta generica, he visto en varios de tus post, los numeros en chino o japones, o koreano, es por alguna razon? Y si es asi, como lo haces?

    ResponderEliminar
    Respuestas
    1. ¿Cómo? Me dice firebg que:

      .post-body ul {
      list-style-type: cjk-ideographic;
      }


      ¿Razón? No la hay. Si acaso que ya están muy vistos los ' disc, circle, square ' y similares y me apetecía algo sencillo y sin recurrir a pseudoelementos xD

      Un saludo

      Eliminar
    2. Gracias! Muy bueno el efecto. Saludos!

      Eliminar

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