Saltar al contenido

Modo de fusión CSS3

css3 blending mode

Nota: Esta función aquí requiere habilitarla desde la página chrome: // flags para esto Consejo CSS trabajar.

Si alguna vez ha utilizado un editor gráfico o fotográfico como Photoshop y Pixelmator, ya debería estar familiarizado con los modos de fusión. Los modos de fusión son una colección de modos que permite que un objeto mezclarse con otros objetos, y por lo tanto produciendo una salida contrastiva de la mezcla. Si se hace correctamente, los modos de fusión podrían generar un resultado muy atractivo, como este.

El modo de fusión ha sido una función que solo se encuentra en los editores de gráficos y fotografías. Hoy en día, puedes encontrarlo en el ámbito de CSS. Echemos un vistazo a cómo funciona.

Comprensión de las funciones de MENOS color

Comprensión de las funciones de MENOS color

Hemos cubierto bastante sobre LESS, desde la creación de una navegación elegante hasta consejos sobre cómo … Lee mas

Empezando

Vale la pena señalar que el modo de fusión CSS3 es una función experimental. Firefox y Chrome son el único navegador que incluye esta función en el momento de redactar este documento.

Nota: En Chrome, antes de que pueda renderizar el modo de fusión CSS3, tendrá que habilitar el Características de la plataforma web desde la página chrome: // flags.

Modo de fusión de fondo y mezcla

Hay dos propiedades CSS recientemente introducidas con respecto al modo de fusión: modo de mezcla de mezcla y modo de mezcla de fondo.

El modo de mezcla-mezcla define cómo el contenido de un elemento se combina con otro contenido debajo. Mientras que la propiedad background-blend-mode, como su nombre lo indica, aborda el color de fondo, la imagen de fondo y los degradados de fondo.

Al igual que en Photoshop, podemos aplicar los siguientes modos de fusión a esas propiedades CSS: normal, multiplicar, tramar, superponer, oscurecer, aclarar, esquivar color, quemar color, luz dura, luz suave, diferencia, exclusión , matiz, saturación, color y luminosidad.

modo de fusión en photoshop

Opciones del modo de fusión en el panel de capas de Photoshop.

Usando el modo de fusión CSS3

El logotipo de Google es colorido y se le ha dado muchas formas para el proyecto Google Doodle. En este post, realizaremos el efecto Blend en el logotipo de Google para ilustrar cómo funciona esta nueva característica de CSS3.

Primero, configuremos el marcado: envolvemos cada letra con un elemento span para que podamos especificar diferentes colores, así como reglas de estilo para la letra.

Google

Luego, agregamos los colores para la marca Google, derivados de BrandColors. Aquí, seleccionamos el elemento usando el selector nth-child, lo que nos permite aplicar los estilos sin tener que agregar clases HTML adicionales a cada uno de los elementos span que envuelven las letras.

.demo-wrapper .title {
	letter-spacing: -25px;
}
span:first-child {
	color: #4285f4;
	position: relative;
	z-index: 100;
}
span:nth-child(2) {
	color: #db4437;
}
span:nth-child(3) {
	color: #f4b400;
}
span:nth-child(4) {
	color: #4285f4;
	position: relative;
	z-index: 100;
}
span:nth-child(5) {
	color: #0f9d58;	
}
span:nth-child(6) {
	color: #db4437;
}

En esta etapa, así es como resulta el logotipo. El logotipo ahora se ve más denso a medida que disminuimos el espacio en blanco entre la letra a -25 px a través del código agregado.

logotipo de google

Ahora aplicamos el modo Fusión.

span {
mix-blend-mode: multiply;
}

Los colores originales del logotipo, así como los colores de las letras cruzadas resultan más vívido.

mezcla de logotipo de google

Hemos aplicado el logotipo tanto con Opacity como con el modo de fusión CSS3. La salida, como se esperaba, es distintiva; los colores del logotipo de Google con la opacidad aplicada parecen obsoletos y descoloridos. Vea una demostración de su comparación en acción a continuación.

Recursos adicionales