Linkbão Oi Torpedo Oi Torpedo Web Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online Resultado Lotofacil Resultado Lotogol Resultado Mega-sena baixa-facil Resultado Loterias Fofocas E-Scripter Claro Torpedo

9/01/2010

estilizando-suas imagens com css

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

olá pessoal recebi comentários sobre estilizar  imagens com css, Efeitos de imagem Hover na blogosfera!  do JOÃO LUCAS CHAVES adi min do blogs JordinBR . que por sinal é um excelente blogs também e esta de parabéns.

ele gostaria de saber como introduzir os códigos que teve dificuldades e não deu certo no blogs dele pois vamos revisar e simplificar as coisas aqui mão a obra.

O efeito Hover em Bordas, muda a aparência de um item quando passamos o mouse em cima dele.
Usando CSS no Blogger, você pode adicionar estilos diferentes para suas imagens, inclusive adicionar bordas com efeito hover em determinadas imagens, para isto basta definir estilos aos elementos, incorporando-os no CSS do seu template.
Veja a seguir alguns exemplos de imagens com efeito hover na borda:

Para ativar o efeito do exemplo 1:
Vá em Layout >> Editar HTML , não precisa clicar em "Expandir modelos de widgets",e acrescente uma nova 'class'. Copie o código abaixo e cole-o ANTES da tag ]]></b:skin>


.border1 img{
padding: 5px;
background: #ffffff; /*Edite a cor de fundo*/
border: 1px solid #54692A; /*Edite a cor de borda*/
}
.border1 img:hover {
padding: 2px;
background:#FFFFFF; /*Edite a cor de fundo*/
border: 4px double #9C192A; /*Edite a cor de borda*/
}







Para ativar o efeito do exemplo 2:


Vá em Layout >> Editar HTML , não precisa clicar em "Expandir modelos de widgets",e acrescente uma nova 'class'. Copie o código abaixo e cole-o ANTES da tag ]]></b:skin>




.border1 img{
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
margin:2px 2px 2px;
}
.border1 img:hover {
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
background:#8B795E; /*Edite a cor de fundo*/
border:3px solid #000000; /*Edite a cor de borda*/
margin:2px 2px 2px;
}





Cada vez que quiser adicionar o efeito hover em bordas em alguma imagem é necessário que você hospede as imagens que irá utilizar.


Feito isto, você precisará aplicar as propriedades a cada imagem, separadamente, e deverá acrescentar uma condicional no local onde você quer que o efeito se aplique.


Por exemplo: para aplicar este efeito em uma imagem no post, no modo "editar HTML" da postagem, acrescente a seguinte linha  como a que esta em baixo e colocará a ulr-da-imagem no local indicado na cor  vermelha ok:





<div class="border1"><img src="URL-DA-IMAGEM"/></div>





Use a imaginação e boa sorte a todos que fizer uso destas dicas ok !






 



 



Technorati Marcas: ,,,,
Bookmark and Share

2 comentários:

João Lucas Chaves on 2 de setembro de 2010 às 14:58 disse... ( Responder comentário )

Muito obrigado, mesmo. Irei testar aqui e vejo se funciona dessa vez, não entendi o que deu errado, fiz tudo certo. Obrigado.

doutorblogs on 2 de setembro de 2010 às 19:16 disse... ( Responder comentário )

@João Lucas Chaves

OK jOÃO LUCAS SEGUE O TUTORIAL QUE IRÁ DAR CERTO.

Postar um comentário

seja bem vindo ao mundo do doutorblogs, e sendo asim espéro ser merecedor de suas amizades e lhe convido para visitar mais e ser um dos Seguidor de nosso blogs.
atenciosamente douotrblogs.

Copie o código referente a imagem e cole
:-A :-Z :-C :-X :-E
:-F :-G :-H :-I :-J
:-K :-L :-M :-N :-O
:-P :-Q :-R :-( :-T
:-a :-e :-i :-o :-w

uma lista com as últimas postagens que ira gostar.

Hello visitante seja bem vindo sua presença é um prazer

ads ads ads
 

Recommended links

  • ads
  • ads
  • ads
  • ads

DOUTOR. Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal

Creative Commons License
This work is in the Public Domain.
Linkbão Oi Torpedo Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online torrent Resultado Dupla Sena Resultado Loteria Federal Resultado Loteca Resultado Lotofacil Resultado Lotogol Resultado Lotomania Resultado Mega-sena Resultado Quina Resultado Timemania baixa-facil Link-facil Resultado Loterias