¿Cómo crear un efecto de vidrio esmerilado usando CSS?

Ya no tienes que indagar más por todo internet porque estás al espacio indicado, contamos con la respuesta que necesitas hallar pero sin complicaciones.

Solución:

CSS

CSS 3 tiene un filtro de desenfoque (solo webkit en este momento Nov 2014):

-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

IE 4-9 admite un filtro no estándar

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

Vea una buena demostración para el desenfoque y otros filtros aquí.

Para referencia futura, aquí está la tabla de compatibilidad para el filtro CSS. Firefox parece estar obteniendo la función en v35+, mientras que incluso IE11 no parece tener ninguna compatibilidad.

SVG

Una alternativa es usar svg (seguro para básicamente IE9 y superior):

filter: url(blur.svg#blur);

SVG:

Demostración de jsFiddle

JavaScript

Obtendrá la mayor compatibilidad del navegador con javascript, pero generalmente el rendimiento más lento y mayor complejidad para su js.

• http://www.blurjs.com/ (complemento jquery, solución de lienzo para IE9+, FF, compatibilidad con Chrome)
• http://nbartlomiej.github.io/foggy/ (complemento jquery IE8+, FF, compatibilidad con Chrome)

Puede utilizar el filtro de imagen CSS.

-webkit-filter: blur(2px);
filter        : blur(2px);

Más información sobre los filtros de imagen CSS:

• http://techstream.org/Web-Design/CSS3-Image-Filters
• http://html5-demostraciones.appspot.com/static/css/filtros/index.html

Demostración: JSFIDDLE

---

Pero, de hecho, están usando JPG preprocesado y solo lo están usando como una superposición en la posición correcta.

#background 
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;

#blur 
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;



    

Demostración: JSFIDDLE

Me hiciste querer intentarlo, así que lo hice, mira el ejemplo aquí:

Usando:

1. Filtros CSS acelerados HW
2. JS para asignación de clases y flecha. key eventos
3. Propiedad de imágenes CSS Clip

Eso es todo.

También creo que esto podría hacerse de forma dinámica para cualquier pantalla si se usa el lienzo para copiar el dominio actual y desenfocarlo.

Reseñas y calificaciones

Si estás de acuerdo, tienes la libertad de dejar un post acerca de qué te ha impresionado de este post.

---

---

Utiliza Nuestro Buscador