Efecto de mezcla en texto para mantener la lectura con CSS (CSS Text Blending)

Algunas veces en diseños se necesitan textos flotantes que dependiendo del fondo se pueden perder, pero existe una opción con css para que estos objetos puedan ser siempre legibles. Por ejemplo cuando diseñamos una navegación en la web, a menudo enfrentamos el reto de asegurarnos que el texto sea legible sin importar el fondo que se encuentre detrás. Hoy quiero compartir la solución elegante que utiliza CSS para lograr este efecto de manera sencilla.

Código HTML

El siguiente código define una navegación fija en la parte superior y varias secciones de contenido. Una de las secciones incluye una imagen de fondo para demostrar el efecto.

<nav>
  <ul class="nav justify-content-center p-3">
    <li class="nav-item">
      <a class="nav-link" href="#section-1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section-2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section-3">Section 3</a>
    </li>
  </ul>
</nav>

<section id="section-1">
  <img src="https://picsum.photos/id/13/1200/800">
</section>

<section id="section-2"></section>

<section id="section-3"></section>

Código CSS

El truco principal de este efecto reside en el uso de mix-blend-mode: exclusion, que permite combinar el color de los elementos de la navegación con el fondo de manera que siempre resalten. Además, se le da un estilo atractivo al texto del menú.

Importante que el fondo del elemento sea negro y el color del texto sea blanco.

nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  text-transform: uppercase;
  mix-blend-mode: exclusion;
}

.nav-link:hover,
.nav-link {
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem
}

section {
  height: 100svh;
}

#section-1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#section-3 {
  background: #000;
}

#section-4 {
  background: #000;
}

Resultado Final

El efecto que logramos es una navegación fija que siempre es legible, incluso cuando el fondo cambia entre imágenes o colores sólidos. Puedes personalizar este estilo ajustando el tamaño de la fuente, los colores, o añadiendo transiciones.

Ventajas

• Legibilidad asegurada: Gracias al mix-blend-mode: exclusion, el texto contrasta adecuadamente con cualquier fondo.
• Estética moderna: El diseño minimalista y fijo da un toque profesional.
• Fácil implementación: Este efecto se logra con solo unas pocas líneas de CSS.

Aplicaciones Prácticas

• Este enfoque es ideal para:
• Landing pages con imágenes de fondo grandes.
• Diseños de portafolios o galerías.
• Sitios donde la estética juega un rol importante.
• Espero que este código te inspire a experimentar con tus diseños. ¡No dudes en dejarme tus comentarios o compartir cómo lo has implementado!