Cómo usar el modo de fusión CSS3 [Consejos CSS3]

Nota: Esta función requiere habilitar desde la página chrome: // flags para que funcione.

Si alguna vez ha usado un editor de gráficos o fotos como Photoshop y Pixelmator, ya debería estar familiarizado con los modos de fusión. Los modos de fusión es una colección de modos que permite que un objeto se mezcle con otros objetos y, por lo tanto, produzca un resultado de contraste 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 característica que solo se encuentra en los editores gráficos y fotográficos. Hoy en día, puedes encontrarlo en el reino CSS. Echemos un vistazo cómo funciona.

Empezando

Vale la pena señalar que el modo de mezcla CSS3 es una característica experimental. Firefox y Chrome son el único navegador que se incluye con esta función en el momento de la redacción.

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

Modo de Mezcla de Fondo y Mezcla

Hay dos propiedades de CSS recientemente introducidas con respecto al modo de fusión: mix-blend-mode y background-blend-mode .

El mix-blend-mode define cómo se combina el contenido de un elemento con otro contenido subyacente . 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 de CSS: normal, multiplicar, pantalla, superposición, oscurecer, aclarar, esquivar colores, quema de colores, luz fuerte, luz tenue, diferencia, exclusión, tono, saturación, color y luminosidad.

El logotipo de Google es colorido y se ha configurado de muchas formas para el proyecto Google Doodle. En esta publicación, llevaremos a cabo el efecto Mezcla en el logotipo de Google para ilustrar cómo funciona esta nueva característica de CSS3.

Primero, establezcamos el marcado: ajustamos cada letra con un elemento de tramo, por lo que podremos especificar diferentes colores y reglas de estilo para la letra.

 o o g l e G o o g l e 

Luego, agregamos los colores para la marca Google, derivados de BrandColors. Aquí, seleccionamos el elemento usando el selector nth-child, permitiéndonos 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; posición: relativa; índice z: 100; } span: nth-child (2) {color: # db4437; } span: nth-child (3) {color: # f4b400; } span: nth-child (4) {color: # 4285f4; posición: relativa; índice z: 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 -25px través del código agregado.

Ahora aplicamos el modo Mezcla.

 span {mix-blend-mode: multiplicar; } 

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

Hemos aplicado el logotipo con Opacity y CSS3 Blend Mode. El resultado, como se esperaba, es distintivo; los colores del logotipo de Google con la opacidad aplicada parecen obsoletos. Vea una demostración de su comparación en acción a continuación.

• Ver demostración
• Descargar Fuente

Recursos adicionales

• Documentación de Nivel 1 de Compositing y Blending de CSS - W3C
• Nuevas posibilidades de gradiente de CSS con la propiedad background-blend-mode

Bulma es el único marco de CSS con Flexbox que siempre necesitarás

Flexbox es un tema candente para los desarrolladores de frontend ya que ofrece un enfoque moderno para las alineaciones de CSS . La mayoría de los diseños de sitios web se basan en flotantes de CSS o porcentajes fijos para mantener los bloques de contenido en línea.Pero flexbox cambia todas las reglas y con un framework como Bulma puedes construir diseños completos en flexbox . Es

(Consejos de tecnología y diseño)

Cómo hacer que Gmail sea la aplicación de correo electrónico predeterminada

Si Gmail es su servicio de correo electrónico, más de mil millones de usuarios de Gmail, debe desear que Gmail maneje todas sus necesidades de correo electrónico. Sin embargo, puede ser realmente molesto hacer clic en un enlace de correo en su navegador solo para ver a su cliente de correo electrónico del sistema operativo que le pide que lo configure.Afo

(Consejos de tecnología y diseño)