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
Este site usa cookies para que possamos oferecer a melhor experiência possível ao usuário. As informações sobre cookies são armazenadas no seu navegador e desempenham funções como reconhecê-lo quando você retornar ao nosso site e ajudar nossa equipe a entender quais seções do site você acha mais interessantes e úteis.
O cookie estritamente necessário deve estar ativado o tempo todo, para que possamos salvar suas preferências nas configurações de cookies.
Se você desativar este cookie, não poderemos salvar suas preferências. Isso significa que toda vez que você visitar este site, precisará ativar ou desativar os cookies novamente.
