Dicas para Blogs e Sites

É simples fazer a imagem girar quando passamos o mouse sobre ela. Podemos usar códigos CSS para criar um efeito de rotacionar (inclinar) as imagens quando o mouse passa por cima das fotos publicadas no seu blog. Usar o efeito hover (mouse sobre) nas imagens pode dar um bom destaque para seu site e atrair o interesse e atenção das pessoas para seu blog. Afinal sempre lembramos quando vemos alguma coisa diferente ou inesperada.

Passe o mouse sobre a imagem e veja a demonstração do efeito girar imagens com CSS.


O código CSS para colocar o efeito girar imagens no blog é:

img:hover{
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);}

O valor -10deg que aparece repetidas vezes é o grau de rotação da imagem, portanto altere esse numero como desejar, mas todos com o mesmo valor. Um detalhe importante é que na frente do numero tem um sinal de menos então se quiser o movimento para o outro lado apenas apague o sinal.

Você pode colocar os códigos de duas formas, então escolha a que achar mais simples:

Através da pagina editar HTML do Blogger usando o Ctrl F e colocando o código antes de: ]]></b:skin>

Ou usando a pagina Designer do modelo (pagina editar HTML e clique no botão personalizar. Então você tem uma opção para Adicionar CSS personalizado. Veja mais detalhado aqui: Como Inserir Códigos CSS no Blogger.

Além de ser usado no blog completo como mostramos acima você pode, por exemplo, utilizar esse efeito CSS somente nas imagens do Gadget Postagens Populares. Usando o código desta forma:

.populares img:hover{
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);}

Lembramos que esse efeito é somente nas imagens, ou seja, neste caso de personalizar o gadget postagens populares o efeito não aparece ao passar o mouse sobre o link de texto e a imagem somente se moverá quando o mouse estiver sobre ela.

Veja outros efeitos e acessórios para blogs:
Como Colocar Efeito Arco-Íris nos Links do Blog
Como Colocar Imagens e Frases Aleatórias no Blog
Efeito Estrelinhas Coloridas no Mouse

Esperamos que goste desta dica simples para enfeitar seu blog e além destas sugestões você encontrar outras formas para usar essa dica de CSS para usar no blog.

Marcadores: CSS, Efeitos, Imagens