ESW

ElSaltoWeb.es
Rompiendo las reglas del
UX/UI

Uso de mix-blend-mode:

📄🔤 Cuando seleccionas texto en una página web:

  • Estilo del texto seleccionado 🖌️:

    • Hay una parte de CSS que decide cómo se ve el texto cuando lo seleccionas.

  • Propiedad especial ✨:

    • Esta propiedad se llama mix-blend-mode: difference. Es una manera elegante de decirle al navegador cómo mezclar colores.

  • Modo «difference» 🔄:

    • Este modo compara los colores del texto con los colores de fondo.
    • Compara cada parte de los colores (rojo, verde, azul) y resta el valor más bajo del más alto.

  • Efecto visual 👁️:

    • Si el fondo y el texto son similares en color, el resultado será un color oscuro 🖤.
    • Si son diferentes, el resultado será un color claro o inverso 🌟.

🔍 ¿Qué pasa en la práctica?

  • Texto y fondo similares 🎨:

    • Texto: Azul claro
    • Fondo: Azul claro
    • Resultado: Oscuro (casi negro)

  • Texto y fondo diferentes 🌈:

    • Texto: Rojo
    • Fondo: Azul
    • Resultado: Color inverso (puede ser blanco o un color claro)

🖥️ Así que, en resumen:

Cuando seleccionas texto, el estilo mix-blend-mode: difference hace que el texto cambie de color dependiendo de su fondo, creando efectos de alto contraste para que sea fácil de ver.

🖌️🔄✨ ¡Y así es como el texto se vuelve mágico! 🌟

COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
19

Customiza tus widgets de Elementor de manera fácil

📢 ¡Nuevos Recursos para Personalizar tus Widgets de Elementor! 🎉
DESCUBRIR
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
222

ThreeJS + Vanta.Fog: Animated Background

Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL.
DESCUBRIR
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
113

Tensorflow videotracking V2

🧠TensorFlow.js, es como un cerebro de computadora que detecta objetos a tu alrededor 🕵️‍♂️.
DESCUBRIR
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
113

Headless CMS

¿Qué es un Headless CMS?
DESCUBRIR
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
34

Animación de Desplazamiento con Efecto de Pantalla Dividida para Portafolio

Encontrarás el código HTML completo para que puedas integrarlo fácilmente utilizando un widget de HTML en WordPress y Elementor.
DESCUBRIR
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
37

Inspírate con Efectos Modernos y Recursos Gratuitos

Encuentra inspiración con efectos modernos para UI/UX y accede a recursos gratuitos para mejorar tus proyectos web.
DESCUBRIR