Bordas internas em imagens com CSS
Postado por: Pedro Rogério em
Você alguma vez já tentou fazer aqueles efeitos de bordas internas em imagens semelhantes a utilizadas no sites da Globo.com e não conseguiu ou não teve saco algum para descobrir como fazer? Pois bem, vou postar aqui uma forma muito simples de conseguir esse efeito que acabei encontrando aqui.
Primeiro vamos a marcação HTML, bem simples, utilizaremos listas para estruturar as imagens:
<ul>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
<li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
</ul>
No HTML nenhum segredo até agora, agora vamos iniciar o processo de verdade aplicando o CSS:
img {border:none}
ul {margin:0; padding:0; width:236px}
ul:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
ul li {list-style-type:none; float:left; margin:0 3px 3px 0}
ul li a, ul li a img {float:left; overflow:hidden}
ul li a:hover {border:4px solid #f00}
ul li a:hover img {margin:-4px}
Agora vamos a explicação de cada item:
- Linha 1: Retirei as bordas padrão do link, que por default são azuis, nesse momento minha imagem não pode ter borda alguma.
- Linha 2: Defini uma largura para meu objeto container (ul) para que as imagens ficassem uma ao lado da outra.
- Linha 3: Uma técnica utilizada para “limpar floats”, prometo fazer um post sobre isso qualquer dia desses.
- Linha 4: Adicionei float:left para colocar as imagens uma do lado da outra.
- Linha 5: É obrigatório o uso de float e oveflow:hidden para que as imagens não fiquem sambando na tela.
- Linha 6: É aí onde eu defini a cor e espessura da borda da imagem.
- Linha 7: Onde a mágica toda acontece, quando eu defini 4px de borda para a imagem no hover do link, para que o efeito ocorra corretamente eu preciso deslocar as margens da imagem com seus valores negativos nas 4 direções (top, right, bottom e left), por isso o valor de margin:-4px.
Agora vejam o exemplo em funcionamento.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Genial!
Mas a linha 3 não é suportada pelo insuportável do IE 6, se não me engano…
O jeito seguro é criar um div com dentro, com o tal do clear:both definido via CSS, né?
Muito bom mesmo!
Só corrigindo, quis dizer “um div com dentro” (mas esqueci que ia virar espaço)
@Lourenzo,
A linha 3 são para browsers que seguem corretamente os padrões. Como disse vou fazer futuramente um post sobre técnicas para limpar float. Abraços.
@Pedro Rogério
Legal, sempre é bom aprender alternativas
Nossa aguardo pelo tutorial da linha 3 ha tempos que quero entender essa técnica.
Se não for pedir muito seria legal explicar a técnica usada no “.clearfix” não sei se você conhece, como desenvolve somente pra joomla já várias pessoas usando isso… pra falar a verdade as vezes eu uso mas não sei o seu real aproveitamento.
Muito bacana hem Pedro, tinha um tempinho que não comentava devido ao corre corre dos preparativos de casamento mais agora estou de volta… muito bacana essa dica ai valeu!!!
Desconhecia a possibilidade de setar bordas negativas, boa dica.
Só um detalhe: se tivesse um texto abaixo das imagens como ficaria??? Ao passar o mouse em cima da imagem e do texto, como ficaria a borda e o link????? Exemplos como do Terra e do Globo.com em relação as imagens e notícias juntas.
Olha só, vc não criou um tutorial compatível com todos os navegadores. Não se pode usar apenas o FireFox para estudo. Não estou criticando, pq esse tutorial me serviu muito, mas estou tentando dizer o que outros irão sitar tb.
Abraços e parabéns pelo blog.
@Atelier,
Me indique em que browser não funcionou, pois testei no IE6, IE7, IE8, Firefox, Opera, Safari e Google Chrome e em todos eles funciona corretamente.
Muito boa esta dica.
Valeu!
Muito bom…. bom mesmo.
Interessante! ultimamente tenho utilizado bastante o efeito de borda externa no hover das imagens mas nunca parei pra pensar em usá-lo DENTRO da imagem.
Valeu o post!
Muito bom cara valeu
kara muito obrigado funcionou direitinho valeww memo =D