3

Estou tentando pôr um Blur Effect em algumas imagens de uma página. De primeira vi que o Blur não funciona (até onde vai meu conhecimento) em todos os navegadores modernos. Mas como "Missão dada é missão cumprida" tenho/temos que bolar um jeito de sair dessa. Pensei em pôr uma máscara (outra imagem) transparente por cima da imagem e nesta máscara eu aplicaria o efeito. Como não manjo de Photoshop e/ou assuntos de imagem, não sei se tem muita lógica fazer isso. Alguém tem uma solução?

Vi uma "solução" inviável para mim, mas só a caráter de informação:

Exemplo inviável

Essa duplicação de imagem, uma com Blur e a outra não, complica. Porque o usuário final que irá adminstrar as imagens. A proposta é usar propriedades CSS para fazê-lo.

Gostaria de saber se há algum efeito que se assemelhe ao Blur e que funcione nos navegadores mais modernos (Firefox, Chrome, IE e Safari).

3
  • Use uma biblioteca Javascript que aplique o filtro blur (busque no Google por "gaussian blur filter" ou "blur image processing" para diferenciar do evento blur). Por exemplo esta.
    – Piovezan
    Commented 27/05/2014 às 21:07
  • Me ensina como funciona! Não consegui! jsfiddle.net/Phellipe/9U89U =[ Commented 27/05/2014 às 21:49
  • Segue o fiddle do @Renan com meu avatar como teste. Funciona bem, e com mais camadas deve melhorar bastante. jsfiddle.net/xG6bb/197
    – Largato
    Commented 26/06/2014 às 20:53

2 Respostas 2

3

Sem usar nada além de CSS puro e um pouco de imaginação... Você pode sobrepor a imagem a ela mesma, em várias camadas. Torne todas as (exceto a mais inferior) um pouco transparentes. Agora desloque cada imagem um pouco em direções diferentes. Isso é quase a mesma coisa que aplicar um filtro simples de amaciamento. Em outras palavras, blur :)

Um exemplo prático vale mais que mil palavras, então: http://jsfiddle.net/xG6bb/190/

Note que usei quatro camadas semi-transparentes, deslocando para cima, esquerda, direita e abaixo. Você pode colocar mais quatro, nas diagonais, para tornar o amaciamento mais suave nos cantos. Note também que o deslocamento que fiz é de dois pixels em cada direção. Valores diferentes dão efeitos um tanto diferentes.

Edição e P.S.: acredito que oito camadas com um pixel em cada devem dar um efeito mais confortável a vista. Note, no entanto, que pode ser um tanto força bruta fazer isso com a imagem, principalmente se você for fazer isso com não uma, mas várias delas.

Também recomendo fazer isso apenas com navegadores que não suportem blur. Se o navegador suportar, é melhor usar o blur nativo mesmo.

4
  • É bem criativo e 100% funcional. Porém, vou ter que fazer a requisição de 8 imagens pra fazer um efeito Blur legal? Isso é meio custoso não? Commented 27/05/2014 às 22:08
  • 1
    @PhellipeLins posso garantir que no Chrome a imagem é carregada uma única vez do servidor, isto é, há apenas uma requisição (F12 -> network). Acredito que os outros browsers façam o mesmo. Os browsers atuais não fazem múltiplas requisições pra mesma imagem se ela aparecer mais de uma vez numa mesma página. Commented 27/05/2014 às 22:12
  • como ficaria isto usando a tag IMG ? EDIT: Usa isso usando uma imagem só, sem ser essa com duas (uma abaixo da outra). Sou meio leigo e tô apanhando aqui! rs Commented 27/05/2014 às 23:21
  • @PhellipeLins não recomendo isso. O posicionamento ficará bem mais complexo do que com div's que você pode sobrepor e variar a posição do background. Mas se quiser tentar... Posições relativas a um container, variando ligeiramente essas posições, é um bom começo. Commented 27/05/2014 às 23:26
2

"(...) A proposta é usar propriedades CSS para fazê-lo. (...)"

Se for só com CSS ainda não é possível criar uma solução cross-browser. Mas com uma pitada de SVG você consegue chegar bem próximo.

Aqui vai o código completo e em baixo eu explico:

.blur{
    -webkit-filter:blur(10px); /* Webkit + Blink (Chrome, Safari, etc) */
    -ms-filter:'progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)'; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); /* IE 7 < */
    filter: url(blur-filter.svg#10); /* Firefox */
}

Bom, vamos lá:

Na primeira linha, a propriedade usada é a propriedade que deve se tornar padrão em breve, mas atualmente apenas o Chrome/Opera e Safari que aceitam ela.

Na segunda linha temos a propriedade "gambiarra" que a microsoft criou para o IE8 mas que ainda usa a antiga sintaxe de filtros dela.

Na terceira linha temos a propriedade para IEs mais antigos (<=7).

E na quarta linha temos a propriedade que pega um filtro de um arquivo SVG e joga-o no elemento, ou seja, neste caso você precisaria de um arquivo externo com os filtros. Eu criei um que pode ser chamado via filter: url(arquivo.svg#força-do-blur onde força-do-blur seria um valor de 0-100.

Uma outra alternativa para não precisar usar um arquivo externo seria gerar um base64 desse arquivo SVG e injetá-lo direto no CSS, de forma que todo o seu código ficasse no CSS.

Download do blur.svg - mande "salvar como..." pois se clicar no link ele abre uma janela em branco (já que o código é SVG puro)

Exemplo do SVG embutido

4
  • Funcionou perfeitamente no Firefox. Porém no ie11 e ieMobile não funcionou. Tem mais alguma carta na manga pra esses browsers? Commented 26/06/2014 às 22:34
  • 1
    Eu dei uma pesquisada e parece que o IE10/11 simplesmente foram jogados num "limbo" pela Microsoft. Eles não aceitam nem as propriedades antigas, nem o novo padrão da W3C e nem os filtros com SVG usados no Firefox. Ou seja, nesses caso não tem jeito mesmo.
    – Kazzkiq
    Commented 26/06/2014 às 22:36
  • Baixei o Safari - v5.1.7 pra testar e o Blur também não funciona. :( Commented 26/06/2014 às 23:12
  • Nada disso aqui funciona também msdn.microsoft.com/en-us/library/ms532979(v=vs.85).aspx e diz ser funcional a partir da versão 5.5. o.O Commented 27/06/2014 às 0:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .