12 de out. de 2012

Tutorial colocando efeitos nas imagens + escolha de imagem


Oooi amores tudo bem ? Eu não to bem , eu torci o meu tornozelo ontem e esta doendo muuuuuito , mesmo assim estou aqui para postar um novo tutorial para vocês ok ? rs'esse tutorial é bem ultil serve para colocar uma bordinha em volta das imagens do post, que quando passa o mouse em cima muda de cor e fica com um efeito de 'opacidade' . Ai vocês vão pensar mas lo , você não já posto um tuto assim no C.R ?? Já , mais esse esfeito só fica nas imagens que você adicionar um código no HTML na postagem, ou seja, apenas nas imagens que você quizer. Vamos ver como faz? ;D

Primeiro vá em  Design  Editar HTML f3 (caixa de pesquisa) e procure por:

]]></b:skin>

Acima desse código, cole esse outro aqui: 
(clique em leia mais e continue lendo )



.efeitoimagem {
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
border: 3px solid #FF69B4; /*espessura, tipo e cor de borda*/
}
.efeitoimagem:hover {
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
opacity: .6; /*opacidade*/
border: 3px solid #40E0D0; /*espessura, tipo e cor da borda quando hover*/
}


Agora, para usar esse efeito nas imagens, faça assim: Quando você estiver fazendo a postagem, você vai escolher em quais das imagens quer colocar o efeito. Selecione Editar html quando estiver escrevendo o post, e cole este código:

<img src="URL da imagem" class="efeitoimagem"/></a> 

Onde está escrito "URL da imagem" você deve adicionar o endereço da imagem que você deseja colocar borda. Eu acho esse tutorial muito bom, porque ele não fica em todas as imagens que nem a maioria. E não atrapalha quando você usa mini gifs.

É isso meninas big beijoos 

Nenhum comentário:

Postar um comentário