Dicas para Blogs e Sites

Colocar efeitos em imagens usando códigos CSS. Veja como é fácil criar alguns efeitos nas imagens ou fotos do seu blog com CSS, como por exemplo, colocar bordas nas imagens, inclinar as imagens ao passar o mouse e outros truques com CSS e HTML para as imagens do seu blog.

Este tutorial é sobre usar CSS para criar efeito em imagens caso você esteja procurando programas ou sites para criar efeitos ou editar imagens veja o link a seguir:
Dicas sobre Colocar Efeitos em Fotos/Imagens e Como Fazer Banners

Vamos usar algumas imagens de outros tutoriais que já publicamos aqui no Dicas para Blogs como demonstração e os links dos tutoriais sobre cada um dos feitos CSS que vamos mostrar.

Inclinar Imagens ao Passar o Mouse: Este código pode ser aplicado a todas as imagens do blog de uma vez adicionando o CSS ao seu código HTML.



Trocar a Imagem Quando Passa o Mouse: Aqui vamos usar 2 imagens e o código precisa se adicionado em cada imagem que deseja usar o efeito.



Colocar ou alterar as bordas: pode criar um efeito de moldura da imagem e permite vários estilos diferentes de bordas.


Mover Imagem para cima ou para baixo ao passar o Mouse


Isso pode ser feito usando valores diferentes para as margens (padding) ao redor da imagem com o código:

img {
    padding-top: 2px;
    padding-bottom: 0px;
}
img:hover {
    padding-top: 0px;
    padding-bottom: 2px;
}

Note que apenas invertemos os valores no efeito hover do CSS. Nós recomendamos usar o código deste jeito para evitar que o texto se mova quando colocar o mouse sobre a imagem. Veja mais informações sobre:
Para que Serve e Como usar o CSS
Diferença entre Margin e Padding

Esperamos que goste destas sugestões para colocar efeitos nas imagens do seu blog e aproveite para ver também alguns efeitos para usar em links de texto:
Como Colocar Efeito Arco-Íris nos Links do Blog
Efeitos em Links Usando Gifs Animados como Imagens de Fundo

Marcadores: CSS, Efeitos, Imagens