efectos - filtros css

Fondo borroso con CSS

Question

Quiero un efecto de estilo aero-vidrio Vista / 7 en una ventana emergente en mi sitio, y debe ser dinámico. Estoy bien con que este no sea un efecto de navegador cruzado siempre que el sitio aún funcione en todos los navegadores modernos.

Mi primer intento fue usar algo como

#dialog_base {
  background:white;
  background:rgba(255,255,255,0.8);

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

Sin embargo, como debería haber esperado, el contenido del diálogo se difuminó y el fondo quedó claro. ¿Hay alguna forma de usar CSS para desenfocar el fondo de un elemento semitransparente en lugar de su contenido?

Answer 1

¿De qué manera lo quieres dinámico? Si desea que la ventana emergente se asigne correctamente al fondo, debe crear dos fondos. Requiere el uso de element() o -moz-element() y un filtro (para Firefox, use un filtro SVG como filter: url(#svgBlur) ya que Firefox no admite -moz-filter: blur() todavía ?). Solo funciona en Firefox al momento de escribir.

Vea la demostración aquí.

Todavía necesito crear una demostración simple para mostrar cómo se hace. Le invitamos a ver la fuente.

Answer 2

Desde Safari 9.0 puedes usar la propiedad de filtro de fondo.

HTML

<div>backdrop blur</div>

CSS

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

o si necesita un color de fondo diferente para los navegadores sin soporte:

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

JSFiddle

Desarrollador Mozilla: telón de fondo-filtro

CanIUse

Answer 3

Existe una técnica simple y muy común utilizando 2 imágenes de fondo: una nítida y otra borrosa. Establece la imagen nítida como fondo para el cuerpo y la borrosa como imagen de fondo para su contenedor. La imagen borrosa debe configurarse en posición fija y la alineación es 100% perfecta. Lo usé antes y funciona.

body {
    background: url(yourCrispImage.jpg) no-repeat;
}

#container {
    background: url(yourBlurryImage.jpg) no-repeat fixed;
}

Puede ver un ejemplo de trabajo en el siguiente violín: http://jsfiddle.net/jTUjT/5/ . Intente redimensionar el navegador y ver que la alineación nunca falla.

Si solo el element() CSS element() fuera compatible con otros navegadores que no -moz-element() de Mozilla, podría crear grandes efectos. Mira esta demo con Mozilla .

Answer 4

Podrías hacerlo a través de iframes ... Hice algo, pero mi único problema por ahora es sincronizar esos divs para que se desplacen simultáneamente ... es una manera terrible, porque es como cargar dos sitios web, pero la única forma que encontré ... También podrías trabajar con divs y overflow, supongo ...

Answer 5

Puede usar un pseudo-elemento para posicionarse como fondo del contenido con la misma imagen que el fondo, pero difuminado con el nuevo filtro CSS3.

Puedes verlo en acción aquí: http://codepen.io/jiserra/pen/JzKpx

Hice eso para personalizar una selección, pero agregué el efecto de fondo borroso.

Answer 6

Use un elemento vacío dimensionado para el contenido como fondo y coloque el contenido sobre el elemento borroso.

#dialog_base{
  background:white;
  background:rgba(255,255,255,0.8);

  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 50;
  margin-left: -200px;
  height: 200px;
  width: 400px;

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

#dialog_content{
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left -200px;
  overflow: hidden;
  z-index: 51;
}

El elemento de fondo puede estar dentro del elemento de contenido, pero no al revés.

<div id=''dialog_base''></div>
<div id=''dialog_content''>
    Some Content
    <!-- Alternatively with z-index: <div id=''dialog_base''></div> -->
</div>

Esto no es fácil si el contenido no siempre tiene un tamaño consistente, pero funciona.

Answer 7

OCT. ACTUALIZACIÓN 2016

Dado que la -moz-element() no parece ser ampliamente compatible con otros navegadores excepto para FF, existe una técnica aún más fácil para aplicar desenfoque sin afectar el contenido del contenedor. El uso de pseudoelementos es ideal en este caso en combinación con svg blur filter.

Comprueba la demo usando pseudo-elementos.

(La demostración se probó en FF v49, Chrome v53, Opera 40 - IE no parece ser compatible con el desenfoque, ya sea con el filtro css o svg)

La única forma (hasta ahora) de tener un efecto de desenfoque en el fondo sin js plugins, es mediante el uso de la -moz-element() en combinación con el filtro de desenfoque svg . Con -moz-element() puede definir un elemento como una imagen de fondo de otro elemento. Luego se aplica el filtro de desenfoque svg . OPCIONAL: puede utilizar algunos jQuery para desplazarse si su fondo está en fixed posición fixed .

Mira mi demo aqui

Entiendo que es una solución bastante complicada y limitada a FF ( element() aplica solo a Mozilla en este momento con la -moz-element() ), pero al menos ha habido algún esfuerzo en el pasado para implementarlo en los navegadores webkit y, con suerte, será implementado en el futuro .