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.
Comprensión de POCAS características de color
Buscamos mucho sobre LESS, desde crear una navegación elegante hasta cómo... Lee mas
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.
Deja una respuesta