Páginas

Blog de teste // Valle Mustaqet

09/08/2012

Primeira postagem: Tutorial (efeito nas imagens do blog)


Olá pessoal que acessa o blog! Como primeiro tutorial aqui do blog, explicarei como colocar efeito nas imagens do blog. Não sabe do que eu estou falando? Passe o mouse em cima de alguma imagem do blog e veja que ela vai ficar "colorida". Vou ensinar várias maneiras de personalizar o efeito, vamos conferir?

Pegue sua preferida e cole em cima de ']]></b:skin>' no seu HTML

1. Preto e branco quando passa o mouse
.post img {
-webkit-filter: saturate(100%) ;
-webkit-transition-duration: .90s;
}
.post img:hover {
-webkit-filter: saturate(0%) ;
-webkit-transition-duration: .90s;

2. Opacidade quando passa o mouse









.post img {
-moz-opacity:1.0; opacity:1.0;
-webkit-transition-duration: .90s;
}
.post img:hover {
moz-opacity:0.92;
opacity:0.92;
-webkit-transition-duration: .90s;
}


3. Bordas na imagem
.post img {
border: 3px solid #e00000;
-webkit-transition-duration: .90s;
}
.post img:hover {
border: 3px solid #000;
-webkit-transition-duration: .90s;
}

Entendendo o código:
 Onde tem '3px' é a espessura da sua borda, ou seja, quando mais você aumenta, mais grossa a linha fica.

Onde tem 'solid' é o tipo de borda. Se quiser uma linha tracejada, troque 'solid' por 'dashed', e se quiser uma linha pontilhada, troque por 'dotted'.

Onde tem '#e00000' é a cor da sua fonte. Pode mudar a vontade, só não se esqueça de começar com '#'.

Depois é só salvar.

É isso pessoal, qualquer dúvida sintam-se livre para comentar! Espero que gostem ^^

Nenhum comentário:

Postar um comentário