sábado, 9 de fevereiro de 2013

Tutorial - Borda colorida e em hover na imagem


Olá flores
quero avisar a vcs que eu estoou sem tempo para postar esses dias prometo melhorar e teremos 3 dias da semana para postagens sendo que nesse dia que terá postagem terá muito mais de uma ok! Lembrando que esse tutorial foi pego o Kawaii World ençao se for reblogar já sabe!

Bom, trouxe um tutorial bem básico para vocês, que deveria ter trazido faz muito tempo. Acho que vocês já 
viram em alguns blogs imagens com bordas feitas em código e não pelo Photoshop. Essas bordas aparecem automaticamente, sem que você precise editar todas as imagens que decidir enfeitar, além de ter a capacidade de mudar a coloração ou o tamanho ao passar o mouse. Acreditem: É super fácil de fazer.

Veja o exemplo na imagem de postagem aqui.

1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole:

.main img {
border: 3px solid  #f17c9d;
-webkit-transition-duration: .50s;
}
.main img:hover {
border: 3px solid #c8a2d4;
-webkit-transition-duration: .50s;
}
O código é bem simples: 3px refere-se ao tamanho, solid ao tipo de borda e #f17c9d ao código da cor. É só trocar pelo que preferir. A primeira parte do código é o que aparece sem passar o mouse e a segunda com o mouse sobre a imagem (hover). Edite como desejar e depois salve.

bjo de Luz

Nenhum comentário:

Postar um comentário