Ver Mensaje Individual
  #13 (permalink)  
Antiguo 30/09/2013, 21:19
Avatar de pzin
pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
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