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
