5

He visto en algunas paginas que al abrir un modal el fondo aparece con un efecto de desenfoque, creo que ese efecto mejora la apariencia de esas paginas, lo que busco es que se desenfoque no solo el fondo, sino todos los elementos que se muestran en la pagina. ¿como podría realizarlo?

Este es el código actual:

body {
  padding-bottom: 20px;
  background-image: url(https://blog.hubspot.es/hubfs/fondos-para-paginas-web.jpg);
  background-size: cover;
}

.navbar {
  margin-bottom: 20px;
}

.contenedor {
  margin:50px 20px 0;
  padding:20px;
  position:relative;
}

.card{
  opacity: 0.8 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>

<div class="contenedor" >
  <div class="row">
    <div class="col-md-12">
      <div class="card mr-5 ml-5 ">
        <div class="card-shadow mr-5 ml-5 mt-5">
        <h2>Título de la Pagina</h2>
        <hr>
        </div>
        <div class="card-body mr-5 ml-5 mb-5">
        <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
          Mostrar Modal
        </button>
        </div>
      </div>  
    </div>
  </div>
  

  

  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" data-backdrop="true" data-keyboard="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Título del Modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">Cuerpo del Modal</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-primary">Aceptar</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Quisiera que se vea de esta forma:

fondo con desenfoque

Cualquier ayuda es bienvenida.

1
  • 1
    En un futuro (esperemos que no tan lejano) vamos a poder usar backdrop-filter. Saludos!
    – Marcos
    el 10 ago. 2019 a las 13:02

3 respuestas 3

5

Si trabajamos con la biblioteca de Boostrap basta con aplicar el siguiente CSS

.modal-open .container-fluid,
.modal-open .container {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

El valor en px es opcional, según la documentación del filtro blur.

Para que este filtro se aplique al fondo o background-image lo que propongo es que éste sea tratado como un contenedor, que a su vez puede tomar el tamaño completo del body si se asigna un height y widht al 100% (también puede ser más práctico usar unidades viewport).

Para el ejemplo lo asigné a la clase .container-fluid de Boostrap, pero funciona igual añadiendo cualquier elemento de un contenedor.

.modal-open .container-fluid,
.modal-open .container {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

.container-fluid {
  background-image: url('https://picsum.photos/id/577/1000/1000');
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  left: 0;
  height: 100vh;
  position: fixed;
  right: 0;
  z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="container-fluid">
  <div class="col-md-6 p-5 text-light">
    <h3>Donec non nibh quis</h3>
    <p>lacus ullamcorper pretium et ac sem. Aliquam dolor nulla, blandit eget augue ac, lobortis iaculis risus. Quisque hendrerit et purus eget tempus. Sed gravida malesuada dolor sit amet tempus. Morbi sit amet justo mollis, porta urna quis, laoreet nisi.
      Duis ullamcorper sed nisl ac gravida. Sed id fringilla nisl.</p>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
  </div>

</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Hola!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2
  • Gracias por la respuesta, es de mucha utilidad, aunque veo que es una solución para bootstrap, tal vez habría editar la pregunta, o no se si deba dejar el tema abierto para otras opciones. el 26 ago. 2019 a las 17:14
  • Podrías dejarlo abierto, siempre existirá una solución que será bien recibida. A lo mejor y más tarde edito mi respuesta añadiendo opciones sin el uso del framework. el 26 ago. 2019 a las 17:59
2

Efectivamente para realizar el desenfoque que estás buscando es necesario utilizar blur este filtro; como su nombre indica, permite realizar un desenfoque o difuminado a nuestros elementos HTML, Imágenes, texto, contenedores, entre otros.

Para poder utilizarlo simplemente pones la siguiente línea de código:

.contenedor.modalBlur > *:not(.modal) {
  filter: blur(5px);
}

Teniendo en cuenta que los pixeles de filter: blur(5px), entre menor sea sus pixeles mayor va ser el desenfoque.

Espero haya sido de ayuda!

1
  • entiendo, pero aun tengo muchas dudas sobre el tema, habría que investigar mas a fondo. el 25 ago. 2019 a las 13:11
0

Investigando encontré que para hacer el desenfoque de fondo se emplean blur y saturate:

Para activar el efecto

.contenedor.modalBlur > *:not(.modal) {
  -webkit-filter: blur(8px);
}

y para desactivarlo

.contenedor.modalDesaturate > *:not(.modal) {
  -webkit-filter: saturate(0%);
}

El resultado se ve de esta manera:

(function(){
   //Show Modal
  $('#exampleModalLong').on('show.bs.modal', function (e) {
    $('.contenedor').addClass('modalBlur');
  })
  
  //Remove modal
  $('#exampleModalLong').on('hide.bs.modal', function (e) {
    $('.contenedor').removeClass('modalBlur');
  })
})();
body {
  padding-bottom: 20px;
  background-image: url(https://blog.hubspot.es/hubfs/fondos-para-paginas-web.jpg);
  background-size: cover;
}

.navbar {
  margin-bottom: 20px;
}

.contenedor {
  margin:50px 20px 0;
  padding:20px;
  position:relative;
}

.card{
  opacity: 0.8 !important;
}

/* === efectos de filtro === */
.contenedor.modalBlur > *:not(.modal) {
  -webkit-filter: blur(8px);
}
.contenedor.modalDesaturate > *:not(.modal) {
  -webkit-filter: saturate(0%);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>

<div class="contenedor" >
  <div class="row">
    <div class="col-md-12">
      <div class="card mr-5 ml-5 ">
        <div class="card-shadow mr-5 ml-5 mt-5">
        <h2>Título de la Pagina</h2>
        <hr>
        </div>
        <div class="card-body mr-5 ml-5 mb-5">
        <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
          Mostrar Modal
        </button>
        </div>
      </div>  
    </div>
  </div>
  

  

  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" data-backdrop="true" data-keyboard="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Título del Modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">Cuerpo del Modal</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-primary">Aceptar</button>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

No se si es la única opción, tal vez hay otras alternativas.

Espero sirva a los que necesiten, saludos.

2
  • Y el background-image? Por diseño creo que debería aplicarse igualmente el filtro de desenfoque el 10 ago. 2019 a las 0:55
  • @JheymanMejia lo mismo digo, aun no entiendo muy bien como funciona, por eso pregunto. el 25 ago. 2019 a las 13:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.