Estava lendo esse post do Gustavo Cardoso sobre como fazer sombreamento em imagens com CSS, e vou mostrar o jeito que eu faço. Aqui tem um exemplo:

http://beam.to/taq/test/shadow.html

O código CSS é esse:

.shadow_img {
background:url("shadow.png") no-repeat 2px 2px;
margin:10px;
float:left;
}
.shadow_img img {
background:white;
border:1px solid #ccc;
padding:5px;
margin:0 2px 2px 0;
}

O que eu fiz foi inserir padding e borda na imagem e usar uma imagem de background (nesse caso, enorme, de 1024x1024, para conter fotos até nesse tamanho, mas com tamanho de apenas de 2.5k) um pouco deslocada a direita e no topo. O float da DIV é para evitar que ela use 100% da largura da página, e fiz um pequeno efeito de hover na borda da imagem, que não funciona naquele browser que todo mundo sabe qual é. Falando nele, embaixo fica uma sombra maior do que deveria, mas ... fazer o que né. Ainda bem que já tem um monte de gente usando o Firefox.

Comentários

Comentários fechados.

Sem nenhum comentário.