Aprenda a fazer o efeito "outline"

Aprenda a fazer o efeito "outline"
O efeito "outline" é essa borda que fica envolta da sua imagem, mas diferente das bordas "comuns", ela fica mais próxima do centro da imagem. 


Para fazer esse efeito, copie o código abaixo, coloque em seu css (entre <style> e </style>)
#sweetoutline {margin: 0px;}

#sweetoutline a img {
background: #dddce9;
outline: 1px dotted #fff;outline-offset: -6px;
padding: 0px;
width: 100px;
height: 100px;
margin-right: 4px; 
margin-bottom: 4px; 
}


#sweetoutline a:hover img {
background: #d8d7e6;
outline: 1px dashed #ffffff;outline-offset: -6px;
padding: 0px;
opacity: 50%;
width: 100px;
height: 100px;
margin-right: 4px; 
margin-bottom: 4px; 
}

E o código abaixo onde você quer que sua imagem apareça:

<div id="sweetoutline"><a href="http://SEU LINK AQUI"><img src="http://LINK DA SUA IMAGEM" title="ESCREVA ALGO AQUI" /></a>

Espero que seja útil e que tenham gostado. Qualquer dúvida é só enviar uma mensagem AQUI

Facebook Twitter Pinterest Google+ Email Addthis