Cómo usar los modos de fusión de CSS3

notas: Esta característica aquí requiere de chrome://flags esta página consejos CSS Me voy a trabajar.

Si alguna vez ha utilizado gráficos o editores de fotos como Photoshop y Pixelmator, entonces ya debería estar familiarizado con los modos de fusión.Los modos de fusión son un conjunto de modos que permiten que los objetos mezclar con otros objetosPor lo tanto produce contraste mixtoCuando se hace correctamente, los regímenes de mezcla pueden dar resultados muy tentadores como este.

Los modos de fusión son una función que solo se encuentra en los editores de gráficos y fotografías. Hoy puedes encontrarlo en el campo de CSS. Vamos a ver cómo funciona.

nos estamos preparando para empezar

Vale la pena señalar que los modos de mezcla de CSS3 son una característica experimental. Al momento de escribir este artículo, Firefox y Chrome son los únicos navegadores con esta característica.

notas: En Chrome, debe activar antes de poder mostrar el modo de fusión CSS3 Características de la plataforma web desde chrome://flags Página.

Fondo y modos de fusión

Hay dos propiedades CSS recientemente introducidas para los modos de fusión: mix-blend-mode y background-blend-mode.

Esta mix-blend-mode definición Cómo se mezcla el contenido del elemento con otro contenido a continuación. A pesar de que background-blend-mode propiedad, como su nombre indica, Trabaje con colores de fondo, imágenes de fondo y degradados de fondo.

Al igual que en Photoshop, podemos aplicar los siguientes modos de fusión a estas propiedades CSS: Normal, Multiplicar, Pantalla, Capa, Oscurecer, Aclarar, Desactivar color, Subexponer colores, Luz sólida, Luz suave, Luz suave, Diferencia, Apagado, Matiz , Saturación , Color y luminosidad.

Opciones de modo de mezcla en el panel Capas de Photoshop.

Usar modos de fusión CSS3

El logo de Google es colorido y está diseñado en varias formas para el proyecto Google Doodle. En este artículo, realizaremos un efecto de fusión en el logotipo de Google para ilustrar cómo funciona esta nueva característica de CSS3.

Primero, ajustemos el resaltado: envuelva cada letra con un elemento de intervalo para que podamos especificar diferentes colores y reglas de estilo para la letra.

<h1>
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>

Luego agregamos los colores de la marca Google de BrandColors, aquí usamos nth-child selectores que nos permiten aplicar estilos sin tener que agregar una clase HTML adicional a cada elemento de envoltura de 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 este punto, este es el resultado del logotipo. El logotipo ahora se ve más ajustado a medida que reducimos los espacios entre las letras. -25px a través del código agregado.

Ahora aplicamos el modo de mezcla.

span {
mix-blend-mode: multiply;
}

El color original del logotipo, así como el color de las letras que se cruzan se volvieron más viva.

Aplicamos modos de fusión de opacidad y CSS3 al logotipo. Como era de esperar, el resultado es único; el color del logotipo de Google con opacidad se ve viejo y descolorido. Vea su demostración comparativa a continuación.

más recursos