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
