Focalizar mediante desenfoque

2 minutos

Focalizar

Cuando queremos centrar la atención de un visitante en un lugar determinado, como puede ser un modal o un popup, disponemos de varias técnicas. Una de las más populares es oscurecer el fondo, ya que quitamos intensidad a todos los elementos salvo el bloque donde deseamos dirigir la mirada del usuario. Otra, y muy utilizada en sistemas operativos de Apple, es el desenfoque. Otorga una sensación de profundidad al acudir a la memoria espacial. Intuimos que el fondo se ha alejado de nosotros hasta escapar del punto focal, desencadenando que el cerebro automáticamente pierda el interés salvo por lo que pueda “enfocar”. Sencillo, elegante y eficaz.

Vamos a aprender 2 implementaciones diferentes de conseguir el efecto, con sus ventajas y desventajas, para lograr el siguiente resultado.

Fondo con desenfoque

Nativo con backdrop-filter, pero no compatible con todos los navegadores

Disponemos de un CSS que nos permite aplicar un efecto de desenfoque a todos los elementos que se encuentren por detrás. Se denomina backdrop-filter.

Lamentablemente la compatibilidad es compleja. En Chrome necesitamos -webkit-backdrop-filter, por lo que deberemos usar @supports, y en Firefox no funciona. En cambio en Safari funciona perfectamente.

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0008;
    display: flex;
    justify-content: center;
    align-items: center;

}

@supports (backdrop-filter: blur(3px)) {
    .modal {
        backdrop-filter: blur(3px);
        background-color: #0008;
    }
}

@supports (-webkit-backdrop-filter: blur(3px)) {
    .modal {
        -webkit-backdrop-filter: blur(3px);
        background-color: #0008;
    }
}

Simulado con filter

En cambio si queremos una compatibilidad global, y unos estilos armónicos, podemos utilizar un conjunto de filters y una estructura HTML que separe el fondo del propio modal.

<!-- Modal para centrar la atención -->
<!-- Para mostrar: añadir 'modal--show' -->
<div class="modal modal--show">
    <div class="modal__content">
        Mi modal
    </div>
</div>

<!-- Contenido a desenfocar -->
<!-- Para desenfocar: añadir 'emphasized' -->
<div class="emphasized">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque in facilis, eos minus dolores laudantium excepturi aut voluptatum quis tenetur corrupti voluptatem maxime ut sint id reiciendis voluptatibus neque libero!</p>
    ...
</div>
.emphasized {
    filter: blur(3px) contrast(0.8) brightness(0.8);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal--show {
    display: flex;
}

.modal__content {
    width: 10rem;
    padding: 2rem 0;
    background-color: white;
    text-align: center;
    border: 1px solid black;
    border-radius: 1rem;
}

Implica un poco más de trabajo pero los resultados serán similares.

Espero que sea de utilidad para que los visitantes no se pierdas al navegar en vuestros sitios.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

Donación con recompensa

  • 1 café: Respondo a tu duda en los comentarios.
  • 2 cafés: Respondo en menos de 24h a tu comentario.
  • 3 cafés: Todo lo anterior y además te doy las gracias en mis redes.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...