04/06/2017

Tutorial: Imagens com bordas internas por css

||

Olá outra vez! Hoje venho trazer um tutorial muito querido por mim, vou mostrar como colocar bordas internas em imagens com CSS. Normalmente as bordas ficam em torno de uma imagem, porém com esse tutorial é possível deixa-la mas para dentro da imagem, podendo aplicar feito hover. Você pode ver o resultado no link que deixarei mais abaixo, espero que gostem! Os créditos vão para o blog Chá com Anjos, indico uma visita é um site maravilhoso!



1) Escolha qual blog deseja aplicar o tutorial, em seguida vá ate seu HTML e procure por ]]></b:skin> Acima, cole:
.interna {
outline-offset: -5px;
outline: 1px dashed #fff;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.interna:hover {
outline-offset: -10px;
outline: 1px solid #d976a3;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

2) Agora vá ate seu Layout e escola um novo gadget javascript e dentro dele cole: 
<a  href="LINK DO BLOG" title="NOME DO BLOG"><img src="URL DA IMAGEM" class="interna"></a>

___________________(Entendendo o código)___________________

Espaçamento da borda. -5px é o número de pixels que a linha fica para dentro. No hover (quando passa o mouse), esse número aumenta para -10, o que faz a borda ficar mais "dentro" da imagem.
outline-offset: -5px;
Tamanho da borda, estilo e cor. Em normal a borda é branca e tracejada, quando passa o mouse fica sólida e muda de branco para rosa.
outline: 1px dashed #fff;

Se refere a transição, ou seja, o tempo que demora para o efeito acontecer. Não mude.
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
___________________(fim da explicação)___________________

É isso queridos! Esse modo de bordas pode ser usado em vários elementos além de imagens, até mesmo sidebar e área de postagem. Como havia mencionado o crédito do tutorial vai para o blog Chá com Anjos. 

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram