Focalizar mediante desenfoque

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.

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.