Una de las características más inestimables de Photoshop (posiblemente la característica que lo impulsó por delante de su competencia) son los modos de fusión. Los modos de fusión toman dos píxeles colocados uno encima del otro y los combina de diferentes maneras, por ejemplo, el modo de fusión de color más oscuro simplemente renderizará el más oscuro de los dos píxeles. Cuando se expande a través de una imagen completa, los modos de fusión pueden producir algunos efectos sorprendentes.
Aunque Adobe Photoshop no inventó modos de fusión, su implementación es ciertamente la más emulada. Pero ahora, no necesita Photoshop para diseñar sus imágenes de esta manera, porque podemos hacerlo todo, dinámicamente, con CSS3.
Tal y como está, soporte de navegador para CSS , la propiedad background-blend-mode está mejorando. Las versiones anteriores de navegadores requerían prefijos de proveedor y / o la activación de características experimentales, pero caniuse.com informes de soporte en las versiones actuales de Chrome, Firefox y Opera, con Safari próximamente.
Todavía no hay señal de soporte de IE, pero como los modos de fusión son una mejora progresiva, podemos empezar a considerar su uso ahora.
Hay una serie de opciones de modo de mezcla en las recomendaciones de candidato de CSS3, pero la más útil para nuestros propósitos es el modo de mezcla de fondo . Esta propiedad nos permite combinar dos imágenes, o una imagen y un color de fondo.
Aquí está el código que necesitamos:
Y aquí está nuestro CSS básico:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Ahora estamos listos para agregar los modos de fusión.
Para hacer esto, vamos a agregar otra clase a nuestro div, por ejemplo "multiplicar":
Y luego crearemos una segunda regla de estilo:
.blend.multiply{background-blend-mode: multiply;}Si quieres echarle un vistazo al código, puedes descarga los archivos fuente aquí.
Multiplicar , como su nombre indica, multiplica el píxel base por el color de fusión, lo que da como resultado un color más oscuro. Multiplicar los resultados negros en negro y multiplicar los blancos no cambia la imagen.
background-blend-mode: multiply;Overlay es un modo de mezcla complejo. La multiplicación depende del color base: los colores claros se vuelven más claros, los oscuros se oscurecen.
background-blend-mode: overlay;El polo opuesto de oscurecer , aclarar aclara una imagen comparando los dos píxeles superpuestos y eligiendo el encendedor de los dos.
background-blend-mode: lighten;La quemadura de color es el polo opuesto de la esquiva de color , oscurece el color de la base y aumenta el contraste.
background-blend-mode: color-burn;La luz suave es similar a la luz dura , pero en lugar de multiplicar o proyectar los colores, la luz suave utiliza esquivar y grabar para obtener un efecto más sutil.
background-blend-mode: soft-light;La exclusión es similar a la diferencia , pero produce menos contraste, por lo que es un poco más útil.
background-blend-mode: exclusion;La saturación , como el tono , fusiona dos de los valores del color base con una propiedad del color de fusión, en este caso, la saturación.
background-blend-mode: saturation;La luminosidad es lo opuesto al color , combina el tono y la saturación del color base y la luminosidad del color de la mezcla.
background-blend-mode: luminosity;