soy Kseso y esto EsCSS

CSS filters & blend modes: diferencias, semejanzas y uso conjunto

Las diferencias principales entre los filtros y modos de fusión CSS (filter & blend-mode): sobre qué elementos actúan y cómo en función de en qué propiedad se declaren y las posibilidades de utilizar conjuntamente ambos efectos.

CSS filters & blend modes: diferencias, semejanzas y uso conjunto

·Por Kseso ✎ 5

Filtros y modos de fusión CSS: las propiedades filter, backdrop-filter, background-blend-mode y mix-blend-mode

La llegada de los filtros y modos de fusión CSS supuso el logro de un viejo sueño: poder alterar los colores y apariencia de los elementos manteniendo inalterado el original. Esto es, aplicar con una línea de código una serie de efectos hasta entonces reservados a los programas de edición de imágenes y al mismo tiempo hacer posible que el original se conserve tal cual.

Cambiamos cómo se muestra al visitante un elemento (su apariencia) con CSS pero no comprometemos el original que se preserva en su estado primigenio.

Esto tiene una serie de ventajas innegables. Que resumidas al mínimo serían:

  1. Al conservarse el original se evitan tener multitud de variaciones/copias y el peligro de perderlo por despiste al guardar una modificación.
  2. No es necesario disponer de un programa de edición de imágenes, conocer su manejo y tener que recurrir a él cada vez que se necesite un efecto distinto. Tú escribes una declaración CSS y el navegador se encarga del resto
  3. Permite cambiar los efectos "en vivo, al vuelo y bajo demanda" teniendo una sola copia del elemento.

Sujetos afectados por filter y blend-mode

Los filtros y modos de fusión CSS además de ser propiedades diferentes y aplicar una serie de efectos distintos se diferencian en otro aspecto: a qué partes del elemento afectan. O dicho de otra forma: sobre qué actúan.

Atendiendo a esto último estas son las particularidad de unos y otros:

  1. Filter CSS

    Los filtros CSS actúan (cambian la apariencia) del elemento al que se declaran: su contenido y fondo (content & background).

  2. Blend Modes CSS

    Los modos de fusión CSS dependiendo en qué declaración se utilicen mezclan diferentes partes:

    2.1 background-blend-mode

    En esta propiedad la mezcla afecta a y sólo usa los fondos del elemento al que se declara. Sus contenidos no se ven afectados. Lo que hace la propiedad css Background-blend-mode es fusionar (según el valor indicado para la propiedad) los elementos del fondo (background-image's y background-color) entre sí.

    See the Pen Two-property CSS checkerboard by Kseso (@Kseso) on CodePen.

    2.2 mix-blend-mode

    Define la forma en que los colores de un elemento deben fusionarse con el fondo. Con esta propiedad afectamos a todo (continente y contenido) haciendo la mezcla con todo lo que se encuentre debajo (eje z) de él (incluidos otros elementos).

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

    Si necesitas o deseas una explicación detallada de cómo funcionan cada uno de los distintos modos de fusión (matemáticas incluidas) este post de AlistApart: Blending Modes Demystified es para ti.

  3. backdrop-filter

    Con la propiedad backdrop-filter (a diferencia de las anteriores) el efecto del filtro no se aplica al elemento al que se declara sino a la parte de otros elemento que se encuentre debajo (eje z) de él.
    En la siguiente demo podrás ver diferentes efectos de la propiedad backdrop-filter dependientes tanto de su valor como de lo que haya debajo en cada momento (esto cambia al hacer scroll):

    See the Pen Backdrop-Filter by Kseso (@Kseso) on CodePen.

    Ver demo a full

Unos apuntes sobre esta demo:

  • En el título: sólo se declara backdrop-filter: blur(7px); por lo que el efecto sólo se percibe al tener debajo una imagen pues el emborronado (blur) no surte efecto en los colores sólidos.
  • En el pie la declaración consta de dos filtros: backdrop-filter: contrast(3) invert(.65); uno que acentúa el contraste y otro que invierte el color. Así que su efecto también se manifiesta al pasar bajo él colores sólidos además de imágenes.
  • Fíjate que aunque el pie no tiene declarado un fondo (background los valores de backdrop-filter hacen que parezca que sí y además su apariencia (la del fondo) cambia constantemente en función de lo que hay debajo de él en cada momento.

Si usas Firefox a continuación la puedes ver emulada

See the Pen iOS 7 background blur with CSS by Kseso (@Kseso) on CodePen.

backdrop-filter ya es soportado por Chrome en su versión 49 (habilitando su flag)

Una buena forma de ver la diferencia entre usar la propiedad filter y backdrop-filter es que compares el código necesario para lograr el mismo efecto blur del post dynamic inside blur y el del h1 de la demo previa con backdrop-filter

Mixtura de filters y blend-modes

Por la naturaleza particular de cada una de estas funciones, así como por afectar a partes distintas y aplicarse en propiedades diferentes se pueden emplear conjuntamente todas o varias de cada una de estas propiedades CSS para lograr efectos o transformaciones que serán la suma de todas ellas.

Este uso conjunto ya las hemos visto en alguna que otra demo que han ido apareciendo por el blog. El resultado final es dependiente de múltiples factores: los colores iniciales de los elementos y los distintos filtros y/o modos de fusión empleados y el valor numérico utilizado en aquellos que lo admiten.

Algunos autores ya han explorado esta mezcla de filtros y blend modes CSS, seguro que algunas realizaciones te serán conocidas.

Filters y Blend modes CSS trabajando juntos
Efectos de la librería Colofilter.css

Una de las últimas en aparecer en mi radar es la librería Colofilter.css [en github] en la que su autor, @LukyVj, además de mezclar los filtros y blend modes CSS se apoya en pseudoelementos para lograr la tonalidad deseada.

Su mecánica es sencilla. Tanto en su marcado HTML de cada una de las cartas:

<div id="blend-blue-yellow-dark" class="blend-blue-yellow-dark block" data-color="blue-yellow" data-tint="-dark"> :before <img src="my_face.png"> :after </div>

Y la magia se la deja a CSS, utilizando, para simplificar, un viejo conocido: el selector por atributo:

.filters .block { width: 33.33%; float: left; overflow: hidden; padding: 0px; margin: 0px; height: auto; position: relative; transform: scale(0.99); cursor: pointer; transition: opacity 0.2s ease 0s, transform 0.2s ease 0s; } [class^="blend"][class*="-yellow"] { background: #FEDD31 none repeat scroll 0% 0%; } [class^="blend-"]::before { content: ".blend-" attr(data-color) "" attr(data-tint); } [class^="blend"]::before { position: absolute; z-index: 3; background: rgba(0, 0, 0, 0.4) repeat; color: #FFF; padding: 0.2em; font-size: 14px; } [class^="blend"][class*="-blue-yellow"][class*="-dark"]::after { mix-blend-mode: hard-light !important; } [class^="blend"][class*="-yellow"][class*="-dark"]::after { filter: hue-rotate(70deg); } [class^="blend"][class*="-blue-yellow"]::after { background: transparent linear-gradient(to left top, #55ACEE, #FEDD31) !important; }

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