Background-blend-mode: guía para estar a la última en Css 16.6.14

Background-blend-mode: guía para estar a la última en Css

Una de las contras que se le achacan a los filtros css es que afectan a todo el elemento al que se aplican, incluido sus contenidos.

Otra es su soporte, pues a estas alturas su soporte es escaso y necesitan de una combinación en su declaración que mezcla en la propiedad filter valores dispares como las palabras claves para los Chrome y afines, un filtro en svg para Firefox y un filtro propietario para los IE.

Sin embargo con la llegada de Firefox 30 y su soporte sin habilitación previa por el usuario a la propiedad Background-blend-mode todo lo anterior queda superado.

Los modos de fusión Css o blend modes tienen la particularidad y diferencia frente a los filtros Css que sólo afectan al fondo o background del elemento al que se declaran. Su contenido no se ve afectado por la propiedad Background-blend-mode:

See the Pen Choose your tone by Kseso (@Kseso) on CodePen.

La tonalidad de la imagen cambia en base a esta propiedad (background-blend-mode) y el h1 para que resalte sobre el fondo en base a los filtros Css con el uso de la propiedad mix-blend-mode.

Background-blend-mode: Soporte actual

A lo anterior súmale el soporte actual a la propiedad Background-blend-mode:

• Webkit en sus últimas versiones.
• Firefox 30
• Opera
• Safari lo hará con la llegada de IO 8
• Microsoft para IE se lo está considerando :ouch:

Para una información completa y detallada del soporte consulta esta página.

Background-blend-mode: qué hace

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 y background-color) de un elemento entre sí.

El resultado final estará en función de las particularidades de las imágenes, el color y el valor o modo de fusión elegido. Quedan fuera, esto es, no influyen para nada los valores del fondo (colores e imágenes) de otros elementos, ya sean de sus ancestros, de sus descendientes o de lo que haya debajo si desplazas al elemento posicionándolo.

Un caso particular o valor de Background-blend-mode y que está dando mucho que hablar y origen de unas cuantas demos experimentales es luminosity. En el esquema de colores hsl los valores hue y saturation no se ven alterados. Sólo el valor luminosity. Lo mismo ocurre si el valor es hue o saturacion

Esto hace súmamente sencillo conseguir un tono igual y uniforme en los elementos de una página sin necesidad de recurrir a programas de edición de imágenes. Y cambiar el tinte o tono con sólo cambiar el valor de 'background-color':

See the Pen background-blend-mode for usage in design by yoksel (@yoksel) on CodePen.

O puestos a mejorar veteranos ejemplos con Background-blend-mode, echa un vistazo a este uso con los gradientes Css de Bennett Feely. Llega hasta el final donde tienes información al respecto de su uso, incluida la diferencia de peso entre hacerlo en puro Css o imágenes.

Otro buen lugar para ver realizaciones con los modos de fusión de Css es, ¡cómo no!, codepen.io. En concreto la colección de Yoksel

Background-blend-mode: resumiendo

1. Los modos de fusión Css o Background-blend-mode sólo afectan a los fondos (background) del elemento.
2. Background-blend-mode no se puede animar. Pero sí otras propiedades del grupo background
3. El valor por defecto de Background-blend-mode es normal.
4. Lea Verou publicó un fallback para versiones antiguas basadas en Webkit: -webkit-filter: grayscale(100%) sepia() hue-rotate(105deg) brightness(90%) saturate(110%) contrast(140%);. Y para firefox tienes los filtros basados en SVG.
5. Pero no hay nada mas mejora progresiva o degradado elegante que Background-blend-mode. Si no lo soporta se ve la imagen sin fusionar con el color del fondo.
6. Para obtener imágenes en escala de grises sólo tienes que usar un valor entre el negro y el blanco como color de fondo. Lo mismo si usas un "sepia", un rojo... para darles un 'tono'.

Artículos para saber más

• Getting to know CSS Blend Modes en dev.opera
• Basics of CSS Blend Modes por Chris Coyier
• PhotoShop In The Browser: Understanding CSS Blend Modes en demosthenes.info
• La especificación en W3c
• Novedad: Create Monochromatic Color-Tinted Images With CSS blend en demosthenes.info

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