Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Efecto borroso div (tipo iOS7)

Estas en el tema de Efecto borroso div (tipo iOS7) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/09/2013, 13:23
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 9 años, 5 meses
Puntos: 29
Efecto borroso div (tipo iOS7)

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
  #2 (permalink)  
Antiguo 29/09/2013, 13:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Efecto borroso div

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.
  #3 (permalink)  
Antiguo 29/09/2013, 14:13
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 7 años, 9 meses
Puntos: 12
Respuesta: Efecto borroso div

filters css
http://www.w3.org/TR/filter-effects/
de momento con escaso soporte
  #4 (permalink)  
Antiguo 29/09/2013, 14:16
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Efecto borroso div

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?
  #5 (permalink)  
Antiguo 29/09/2013, 14:24
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 7 años, 9 meses
Puntos: 12
Respuesta: Efecto borroso div

Todo depende de la imaginación de cada uno y del marcado del html
http://codepen.io/martinwolf/pen/iBgvx
  #6 (permalink)  
Antiguo 29/09/2013, 14:31
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 9 años, 5 meses
Puntos: 29
Respuesta: Efecto borroso div

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
  #7 (permalink)  
Antiguo 29/09/2013, 15:13
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Efecto borroso div

Cita:
Iniciado por faillure Ver Mensaje
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.
  #8 (permalink)  
Antiguo 29/09/2013, 23:43
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 9 años, 5 meses
Puntos: 29
Respuesta: Efecto borroso div

Cita:
Iniciado por pzin Ver Mensaje
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
  #9 (permalink)  
Antiguo 30/09/2013, 01:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Efecto borroso div

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í.
  #10 (permalink)  
Antiguo 30/09/2013, 07:13
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 7 años, 9 meses
Puntos: 12
Respuesta: Efecto borroso div

Cita:
Iniciado por pzin Ver Mensaje
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.
Cita:
Iniciado por pzin Ver Mensaje
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.
  #11 (permalink)  
Antiguo 30/09/2013, 09:59
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Efecto borroso div

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.
  #12 (permalink)  
Antiguo 30/09/2013, 12:16
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 9 años, 5 meses
Puntos: 29
Respuesta: Efecto borroso div

Cita:
Iniciado por pzin Ver Mensaje
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
  #13 (permalink)  
Antiguo 30/09/2013, 21:19
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Efecto borroso div

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:
Ver original
  1. html2canvas document.body,
  2.   onrendered: (canvas) ->
  3.     fondo = canvas.toDataURL("image/jpg").toString()
  4.     $("#blur").css backgroundImage: "url("+fondo+")"

Después se aplican los filtros sobre ese elemento:

Código CSS:
Ver original
  1. div#blur {
  2.   -webkit-filter: blur(20px);
  3. }

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.

Última edición por pzin; 30/09/2013 a las 21:26
  #14 (permalink)  
Antiguo 30/09/2013, 23:33
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 9 años, 5 meses
Puntos: 29
Respuesta: Efecto borroso div (tipo iOS7)

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

Etiquetas: efecto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 21:02.