[SOLUCIONADO] Efecto borroso div (tipo iOS7)

[patilanz]

Hola quiero crear un efecto borroso de modo que todo lo que este debajo de un div se vea borroso y lo que esta en el div se vea bien.

Ya se como hacer un efecto borroso del texto pero no quiero esto.

Alguna idea ??

Saludos

[pzin]

Supongo que querrás algo parecido a iOS7.

Con CSS no vas a poder. Hay por ahí una librería JavaScript que hace eso, aunque no la probé y no sabría decirte.

[faillure]

filters css
http://www.w3.org/TR/filter-effects/
de momento con escaso soporte

[pzin]

Pero los filtros se aplican a elementos, no se pueden implementar de tal forma que jueguen con lo que esté detrás de ellos, ¿no?

[faillure]

Todo depende de la imaginación de cada uno y del marcado del html
http://codepen.io/martinwolf/pen/iBgvx

[patilanz]

Hola muchas gracias a los dos :)

Creo que voy a usar filtros ya que no me gustan mucho las librerías, te hacen todo y sabiendo que te lo puedes hacer tu pues no me gusta :D

Saludos

[pzin]

Iniciado por faillure

Todo depende de la imaginación de cada uno y del marcado del html
http://codepen.io/martinwolf/pen/iBgvx

Si con una imagen. Pero no interactúa con otros elementos HTML, que es lo que entiendo que se pedía.

Yo busqué alguna forma de hacerlo, y mirando y mirando, pues llegué a la conclusión de que no puede hacerse simplemente con CSS.

[patilanz]

Iniciado por pzin

Si con una imagen. Pero no interactúa con otros elementos HTML, que es lo que entiendo que se pedía.

Yo busqué alguna forma de hacerlo, y mirando y mirando, pues llegué a la conclusión de que no puede hacerse simplemente con CSS.

Si, ahora me di de la imagen y los filtros pero entonces como lo hace la libreria.

Al inspeccionar el elemento los divs tienen una backround-image:url(...);
Y la url es la imagen borrosa, como lo crean???

Saludos

[pzin]

No sé si era la quee pasé o era otra, pero una librería en JavaScript lo que hacía era como una foto, luego con canvas o algo así añadía ese efecto. Era (es), técnicamente, un pirulón.

Yo realmente prefiero CSS antes que usar JavaScript, que dicho sea de paso no me gusta , y si digo de hacerlo con JavaScript no es por capricho. La dificultad es hacer el desenfoque ese, que en CSS se lo puedes hacer a un texto, a un elemento, etc. Pero, hasta donde yo sé, que poco no es, no se puede hacer de forma global sobre varios elementos siendo dinámico.

Si buscas en inglés, verás algunos sitios que dicen que es posible en CSS, hasta que lees un poco más detenidamente y caes en la cuenta de que no era así.

[faillure]

Iniciado por pzin

Si con una imagen. Pero no interactúa con otros elementos HTML, que es lo que entiendo que se pedía.

Yo busqué alguna forma de hacerlo, y mirando y mirando, pues llegué a la conclusión de que no puede hacerse simplemente con CSS.

Iniciado por pzin

Pero, hasta donde yo sé, que poco no es, no se puede hacer de forma global sobre varios elementos siendo dinámico.

debe ser cierto que no se puede con css... porque yo es más lo que desconozco que lo que se.

pero... viendo lo que hace la librería js (posicionar background y aplicar blur) y lo que hace el pen con css (igual) y sin ver mas "interacción" en el ejemplo de js que un :hover a los enlaces (que no es ningún blur) con text-shadow... no acabo de encontrar el "imposible css". Menos si pensamos en regiones y exclusiones css y convinacion de selectores (target, input:checked, hermanos...)

soporte de navegadores aparte

pero por lo categórico y rotundo que eres seguro que estamos hablando de temas diferentes y yo no me entere bien de la consulta.

[pzin]

Este parece que funciona bien, aunque sólo para WebKit según dice: http://blurpopup.labs.daum.net

Este era el que hace una captura del sitio, los elementos, y luego lo renderiza como fondo del elemento aplicando los filtros.

[patilanz]

Iniciado por pzin

Este parece que funciona bien, aunque sólo para WebKit según dice: http://blurpopup.labs.daum.net

Este era el que hace una captura del sitio, los elementos, y luego lo renderiza como fondo del elemento aplicando los filtros.

Lol si esta perfecto, con un poco de código funcionaria.

Muchas gracias

[pzin]

Al final probé usando la librería html2canvas, que es lo que usa el tipo en el enlace anterior.

Básicamente es para generar una captura de pantalla en un canvas. Luego eso se pone como fondo del elemento.

Código Javascript:

html2canvas document.body,
  onrendered: (canvas) ->
    fondo = canvas.toDataURL("image/jpg").toString()
    $("#blur").css backgroundImage: "url("+fondo+")"
 

Después se aplican los filtros sobre ese elemento:

Código CSS:

div#blur {
  -webkit-filter: blur(20px);
}
 

Y ya con eso, puedes poner otro elemento encima y ponerle un color de fondo, por ejemplo un rgba(255,255,255,.2) y ajustar lo que haga falta. Lo del elemento encima tiene que ser porque el filtro se hereda y no hay forma de quitarlo —pasa como con opacity. Pero bueno, después de todo el truco de magia eso es lo de menos.

Obviamente solo funciona en WebKit, y Chrome, que ya no es WebKit pero si lo es (?). Creo que, se podría cambiar el uso de filtros y usar en su lugar un SVG que tenía algo así como efectos borrosos, y conseguir una mayor compatibilidad.

[patilanz]

Si yo también lo probe y funciona muy bien :D hasta con transition puedes hacer un efecto de nubes y mas cosas pero queda muy bien.
Por cierto, porque el tema paso a llamarse Efecto borroso div (tipo iOS7) el tipo ios7 no lo he puesto yo :D

Saludos