Efeito do Google+

[alfan 0]

Pessoal,

Pra quem tem perfil do Google+ deve conhecer este efeito da capa de cada usuário.

Alguém sabe o nome deste efeito "ofuscado"? É possível chegar neste resultado com css3?

 

Grato!

 

[androidel 7]

Utilize filter: blur(). Dentro de blur, utilize a quantidade de pixels que será dado na imagem. A cada pixel ele aumentará o efeito.

 

Exemplo:

img {
        filter: blur(3px);
}

Lembrando que os navegadores utilizam também sua engine para criar este efeito. Como por exemplo: WebKit, Moz, dentre outros.

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

Espero ter ajudado. ( '-' )

[alfan 0]

 

Obrigado androidel ! É isso mesmo que preciso, mas... Tem como remover as bordas "borradas"? Pois a imagem acaba ficando "maior"

[androidel 7]

Obrigado androidel ! É isso mesmo que preciso, mas... Tem como remover as bordas "borradas"? Pois a imagem acaba ficando "maior"

 

Olá alfan,

 

O único jeito que conheço é diminuir o tamanho da imagem em largura e altura pela quantidade de pixels que você adicionou na propriedade blur(). (Eu fiquei testando aqui, a única que eu conheço é essa...)

 

Em resumo, bons estudos para tu com o JavaScript ou JQuery. ( '-' )

[androidel 7]

O que eu não gostei do Mozilla Firefox é deles terem adicionado essa propriedade a sua engine mas não haver o efeito blur. Depois de aplicar isso no CSS precisa fazer um modo externo para realmente criar este efeito. '-.- Que raiva!

 

Olhe esses 2 sites, talvez você entenda:

 

http://css-plus.com/2012/03/gaussian-blur/

http://stackoverflow.com/questions/15803122/filter-blur1px-doesnt-work-in-firefox-ie-and-opera << Esse principalmente