Desenfocar Img's y Div's en HTML usando CSS

Question

¿Es posible aplicar un desenfoque a un elemento HTML (div & img)?

Estoy desarrollando únicamente para el iPad, así que la compatibilidad entre navegadores no es un problema & Puedo usar técnicas HTML5 CSS3.

sé cómo la falta de definición de texto CSS pero esto no altere el elemento HTML real o su frontera:

text-shadow: 0 0 8px #000; 
color: transparent; 

Googled esto, pero no altere la imagen en mis navegadores:

filter: blur(strength=50); 

Answer 1

Vi un interesante tutorial sobre borrosos contenido con CSS box-shadow s, text-shadow s, opacidad y color.

Aquí está la demostración: http://tympanus.net/Tutorials/ItemBlur/

Y el tutorial: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Answer 2

Creo que la mejor manera es superponer varias veces la misma imagen y probar diferentes posiciones y opacidades en las superpuestas.

Aquí está el CSS que se me ocurrió. Tenga en cuenta que estoy usando el selector CSS3 nth-child (pero que no parecen tener un problema con eso):

img { 
    width:300px; 
    height:300px; 
    position:absolute; 
    opacity:0.2; 
} 

.container { 
    position:relative; 
    overflow:hidden; 
    width:300px; 
    height:300px; 
} 

img:nth-child(1) { 
    opacity:1; 
} 

img:nth-child(2) { 
    left:2px; 
    top:2px; 
} 

img:nth-child(3) { 
    left:-2px; 
    top:-2px; 
} 

img:nth-child(4) { 
    left:-1px; 
    top:-1px; 
} 

img:nth-child(5) { 
    left:1px; 
    top:1px; 
} 

HTML:

<div class="container"> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
</div> 

The result es bastante prometedor.

Answer 3

CSS no tiene la capacidad de desenfoque, además de las técnicas con text-shadow y box-shadow. Pero incluso con estos, los bordes y las imágenes no se pueden difuminar.

This JavaScript library, sin embargo, puede manejar imágenes.

Además, puede encontrar este technique interesante. Es una ilusión limpia usando imágenes borrosas prefabricadas.

Answer 4

Webkit tiene una propiedad llamada -webkit-filter que permite las técnicas de desenfoque: -webkit-filter: blur(15px);

http://jsfiddle.net/danielfilho/KxWRA/

Answer 5

simplemente puede añadir esto a su CSS, para una imagen:

En el siguiente ejemplo, utilizará una imagen borrosa con 5 píxeles de radio. Y es extremadamente importante para usar todos los prefijos de proveedor disponibles, por lo que funciona en todos los navegadores con esta característica implementada, pero se trata de una versión "estable".

img{ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -ms-filter: blur(5px); 
    -o-filter: blur(5px); 
    filter: blur(5px); 
} 

Answer 6

Con CSS3 podemos ajustar fácilmente una imagen. Pero recuerda que esto no cambia la imagen. Solo muestra la imagen ajustada.

Ver demostración en vivo y el código fuente completo aquí

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

Ver el siguiente código para más detalles.

Haciendo gris imagen:

img { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
} 

para dar un aspecto de la sepia:

img { 
    -webkit-filter: sepia(100%); 
    -moz-filter: sepia(100%); 
} 

para ajustar el brillo:

img { 
    -webkit-filter: brightness(50%); 
    -moz-filter: brightness(50%); 
    } 

Para ajustar el contraste:

img { 
    -webkit-filter: contrast(200%); 
    -moz-filter: contrast(200%);  
} 

Para desenfocar una imagen:

img { 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    } 

Answer 7

tuve que investigar bastante a fondo este problema no hace mucho tiempo y se le ocurrió una solución extremadamente flexible, aunque puede ser excesiva para las necesidades de algunas personas. Necesitaba no solo imágenes borrosas, sino también un radio de desenfoque dinámico, color de superposición y opacidad de superposición para varios tipos de imágenes. También necesitaba tener la opción de difuminar una imagen en un fondo con otros elementos superpuestos encima. Esta es la mejor solución entre navegadores (y rendimiento) que pude crear.

En primer lugar, tendría un SVG a mano, poco inspirado llamado blur.svg. Se aplica un filtro de desenfoque y si se mira de cerca, el stdDeviation (que establece el radio de desenfoque) se establece de manera programática desde un parámetro pasado a la URL que solicita el activo.

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="blur"> 
<feGaussianBlur stdDeviation="#{params[:blur]}" /> 
</filter> 
</svg> 

Luego tuve un mixin SCSS que permitiría en añadir una superposición de desenfoque a cualquier envoltura, con un radio de desenfoque personalizable, color de superposición y de opacidad.

@mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) { 
    position: relative; 
    .background_blurred { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    filter: url('blur.svg#blur?blur=#{$blur_radius}'); 
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}'); 
    transform: translateZ(0); 
    &:after { 
     content: ''; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     background: $overlay_color; 
     opacity: $overlay_opacity; 
    } 
    } 
    .foreground { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    z-index: 2; 
    } 
} 

Es posible que se pregunte por qué he incluido un transform: translateZ(0);. El único efecto que tiene es forzar la aceleración de hardware en el render para mantener las cosas en perfectas condiciones. También es posible que se pregunte por qué no hay prefijos de proveedor. Puede buscar cosas como filter en CanIUse si lo desea, pero usé autoprefixer en este proyecto para preocuparme por esas cosas. Y por supuesto, ¿por qué filtrar usando este SVG, en lugar de algo como blur(4px)? ¿No sería más fácil? Lo haría, pero Firefox (por escrito) solo admite la propiedad filter con una URL.

A continuación, se puede aplicar el mixin falta de definición de una clase contenedora:

.my_wrapper_class { 
    @include background_blurred(3, #f9f7f5, 0.7); 
} 

Tenga en cuenta que para este método, tenemos que utilizar una clase con un fondo personalizado situado en un atributo de estilo en lugar de una etiqueta de imagen con un src. Puede ajustar la posición de fondo y anular el tamaño de fondo a su gusto.

<div class="my_wrapper_class"> 
    <div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div> 
    <div class="foreground"> 
    <p>Stuff that should appear above the blurred background and not be blurred.</p> 
    </div> 
</div>