Bordas internas em imagens com CSS

Postado por: Pedro Rogério em

Bordas internas em imagens com CSS

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.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

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.

Central Server

16 Responses to “Bordas internas em imagens com CSS”

  1. 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é?

  2. Só corrigindo, quis dizer “um div com &nbsp; dentro” (mas esqueci que ia virar espaço)

  3. @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.

  4. @Pedro Rogério

    Legal, sempre é bom aprender alternativas :D

  5. Ronildo Costa disse:

    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.

  6. Rafael Veloso disse:

    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!!!

  7. Dan Alvares disse:

    Desconhecia a possibilidade de setar bordas negativas, boa dica.

  8. 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.

  9. Atelier Digital disse:

    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.

  10. @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.

  11. Gilmara Elisa disse:

    Muito boa esta dica.
    Valeu!

  12. Relison Vital disse:

    Muito bom…. bom mesmo.

  13. ed1nh0 disse:

    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!

  14. Adriano disse:

    Muito bom cara valeu

  15. renan lim disse:

    kara muito obrigado funcionou direitinho valeww memo =D

Leave a Reply