Imagens Transparentes

 

 

Enviado para você por Penha através do Google Reader:

 

 

Imagens Transparentes

via Dicas para Blogs de Fabiano Roberto em 24/01/09

Um efeito legal de usar é deixar as imagens meio transparentes quando colocamos o mouse sobre elas, e o código para fazer isso pode ser usado em cada imagem separadamente ou em todas as imagens das postagens ou das colunas de menu do blog e ainda no blog inteiro se preferir.

O código pra deixar a imagem transparente você deve colocar na página editar html, depois de body{...}, mas cuidado para não colocar dentro das chaves do body porque tudo que estiver entre elas modifica a página inteira, veja na imagem:



no exemplo modificamos todas as imagens das postagens, caso esteja ruim de ver o código na imagem ele está aqui:

.post img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity:
1}

.post a:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity:
0.5}



Da mesma maneira que fizemos isso com as postagens poderíamos fazer com a coluna lateral de menu, apenas trocando a palavra post por sidebar ou o nome que tiver a coluna do seu blog. Porém se quiser colocar esse efeito em apenas algumas imagens por exemplo nos banners que mostra no seu blog, faça da seguinte forma em vez da palavra post coloque no código banner, isso é apenas um exemplo poderia ser quaisquer outras palavras desde que você não tenha usado a mesma para nenhum outro estilo CSS. Isso também na página editar html. Então o código ficará assim:

.banner img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity:
1}

.banner a:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity:
0.5}


Depois entre na página layout, clique em adicionar gadget, html/javascript e coloque o código das imagens (neste caso os banners), porém o código das imagens tem que estar entre divs (podem ser quantas imagens quiser), deste modo:

<div class="banner">Código das Imagens</div>


Isso fará que apenas as imagens que estiverem neste trecho fiquem semitransparentes quando colocar o mouse sobre elas. Seguindo a idéia de um comentário feito nesta postagem coloquei esse código no blog Meu Jornal, vocês podem ver que ao passar o mouse sobre as imagens das postagens elas ficam semitransparentes.

 

 

Coisas que você pode fazer a partir daqui:

• Inscrever-se no Dicas para Blogs usando o Google Reader
• Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos

 

 

Share

Share |