Cross-browser Image Blur with CSS

Seu site é realmente responsivo?
21 de Janeiro de 2015
Mudei o template do meu site e minhas visitas caíram
17 de Março de 2015

Cross-browser Image Blur with CSS

Estes dias navegando na internet encontrei um tutorial interessante mostrando como fazer o efeito Blur (Borrão) em uma imagem, é um efeito muito bom, mas que deve ser utilizado de forma moderada.

Este efeito é similar ao Gaussian Blur do Photoshop, agora vamos aprender a utilizá-lo com CSS e SVG nativamente.

No final da postagem você pode acessar o exemplo.

Primeiro vamos criar o código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <html>
 <head>
 <meta charset="UTF-8">
 <meta name="description" content="CSS Cross Browser Blur">
 <meta name="keywords" content="HTML,CSS,XML,JavaScript,cross browser, blur">
 <meta name="author" content="Bruno Riggs">
 <link rel="stylesheet" type="text/css" href="style.css">
  <title>CSS Cross Browser Blur</title>
 </head>
 <body>
  <h1>CSS Cross Browser Blur</h1>
  <h3>Testando na Imagem</h3>
  <img src="image\cenario.jpeg" alt="Vista da Baía de Todos os Santos" title="Vista da Baía de Todos os Santos" class="blur">
 </body>
 </html>

Vamos criar o arquivo CSS:

img.blur { 
 width:1024;
 height:576px;
 -webkit-filter: blur(3px);
 filter: blur(3px);

Pronto, agora o nosso efeito funciona no Chrome, Safari e Firefox 35+, para funcionar em versões anteriores do Firefox precisamos aplicar o filtro SVG:

Crie o arquivo abaixo e salve como blur.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="3" /> </filter> </svg>

Agora vamos adicionar uma linha ao CSS:

img.blur { 
 width:1024;
 height:576px;
 filter: url(blur.svg#blur); /* PARA VERSÕES ANTIGAS DO FIREFOX */
 -webkit-filter: blur(3px);
 filter: blur(3px);
}

Agora precisamos fazer funcionar nas versões do Internet Explorer 4 a 9. Vamos utilizar o antigo Filtro Microsoft DX. Adicione a linha ao CSS:

img.blur { 
 width:1024;
 height:576px;
 filter: url(blur.svg#blur); /* PARA VERSÕES ANTIGAS DO FIREFOX */
 -webkit-filter: blur(3px);
 filter: blur(3px);
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); /* PARA VERSÕES 4 - 9 DO INTERNET EXPLORER */
}

*Infelizmente não funciona nas versões mais atuais do IE, a solução seria utilizar o StackBlur.

Se você quiser dar foco à imagem, pode simplesmente negar o efeito invertendo o filtro com mouseover utilzando a: hover

Adicione as linhas abaixo ao CSS:

img.blur:focus, img.blur:hover { 
 -webkit-filter: blur(0px); 
 filter: blur(0px); 
 filter: none; 
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); 
}

Uma observação: Quando utilizamos este efeito o CSS adiciona um “borrado” às bordas da imagem, sendo assim é preciso realizar, em alguns casos, a correção dos pixels.

Cross-browser Image Blur with CSS

Veja aqui o efeito funcionando

Baixe aqui os arquivos de exemplo compactados

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *