Me pregunto si hay alguna forma de aplicar un desenfoque gaussiano a un div usando jQuery (o CSS que jQuery puede modificar). He examinado blur(), pero al menos con Safari, no parece que logre lo que estoy buscando. Si es posible, quiero usar fadeIn en el efecto, por lo que se difumina gradualmente.Desenfoque gaussiano enHover Uso de jQuery
¡Gracias por cualquier ayuda!
Tenga en cuenta que Blur es cuando un elemento DOM, como cuadros de texto (entradas, etc.) pierde el foco, y no debe mezclarse con el tipo de desenfoque del que está hablando (desenfoque gaussiano/de movimiento).
No existe una buena solución de navegador para este problema. Sin embargo, puede desenfocar imágenes utilizando una API como la que sugiere Ben. O por using this one.
Quizás si encuentra una forma de dibujar los contenidos de su div en un lienzo HTML5, puede aplicar el filtro de desenfoque usando Pixastic?
No se ha mencionado aquí que podamos crear un efecto de desenfoque realista excellent para texto usando CSS3 text-shadow. Y, (sí, por supuesto!) Podemos desenfocar fondos y bordes sólidos usando box-shadow (se permiten sombras insertadas y múltiples sombras, ya sabes).
así que espero que en la mayoría de los casos se puede lograr un efecto de desenfoque realista combinando:
1) borrosidad de las imágenes usando la lona
2) la falta de definición texto usandotext-shadow
3) fondo sólido y bordes borrosos usandobox-shadow
4) he olvidado todo lo demás ....
PS:? Creo que no es posible escribir una clase de magia que borra todo el código HTML.
Las restricciones que no se pueden superar: difuminar el borde de la imagen, falta de definición de los medios incorporados
Parece que es posible desenfocar una captura de pantalla del sitio http://html2canvas.hertzen.com/ – Dan
Mira la blur.js el plugin para jQuery: http://blurjs.com, utiliza mi algoritmo de pila de desenfoque que creo que es actualmente la manera más rápida de JavaScript basado difuminar elementos canvas: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
contenido de blur.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>
Más: http://demosthenes.info/blog/534/Crossbrowser-Image-Blur
No pegue la misma respuesta en varias preguntas. si las preguntas son duplicadas, márquelas como tales. Si no son así, por favor adapte su respuesta a la pregunta formulada. –
No hay filtro de desenfoque css que funcione en IE11 –
Hasta la fecha, no conozco ninguna buena solución entre navegadores para dibujar contenidos DOM en un lienzo HTML5. Hay algunas técnicas que funcionan en un grado limitado. – Xaxis