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

Black or White

El efecto “Black or White” crea la ilusión de que la página (o la imagen principal) está dividida en dos mitades de color.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Link-Tree personalizado! 🌐

👉 Con nuestro servicio de link-trees personalizados podrás: ✅ Mostrar tus enlaces más importantes en una interfaz visualmente atractiva. ✅ Reflejar tu identidad con colores, tipografías y estilos exclusivos. ✅ Aumentar la interacción y llevar tráfico directo a tus plataformas.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Integraciones 4.0

Domina el flujo de datos entre apps sin código
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Módulo 1: Fundamentos Avanzados de UI

Comprender y aplicar principios de diseño
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Image Accordion Slider with CSS and JS

🚀 Efecto accordion slider 🖼️ que combina imágenes con animaciones suaves y diseño interactivo.💻🔥
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

¿Qué es View Transitions?

View Transitions es una API moderna del navegador que permite crear transiciones fluidas entre diferentes vistas o estados de una página web.