Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Hover avançado com bordas em imagens

    Falae pessoal. Parece até mentira, mas estou aqui novamente, retornando aos meus tutoriais mirabolantes, fascinantes, geniais e extremamente úteis para todos.

    O assunto dessa vez é o mesmo que o tutorial anterior, que falei sobre borda interna em imagens com link. Mostrarei um efeito em links, com bordas, em imagens 😀

    E como não poderia deixar de ser, é um efeito que a equipe aqui da Globo.com pediu pro Vinicius, só que ele veio perguntar pra mim se era possível. E como nada é impossível para Mr. Dulcetti. Lá fui eu implementar o efeito. E como não poderia deixar de ser, funcionou. E o melhor, CROOOOOOOOOOSSBROWSER!!!!! Sensacional, sensacional. 😀

    Mas de novo bordas em imagens Bruno?

    Sim. De novo. Mas relaxem, é um efeito diferente do que eu fiz para o efeito de borda interna dos sites da Globo.com, e que eu creio que muitos já quiseram fazer e não conseguiram, etc.

    É um efeito normal, que poderia ser feito normalmente, como eu mostro na figura abaixo:

    Print do efeito errado

    Um efeito de hover na imagem, onde existe a troca de cor da borda do link. Sim, cor da borda do link e não da imagem. O IE infelizmente não aceita todos efeitos em elemento dentro do link no hover do próprio. Mas lógico que isso você sabia (assim espero).

    Ta blz Dulcetti. Mas o tutorial é sobre esse efeito ae?

    Quase. É o mesmo efeito, mudança de cor na borda do link e talz. Maaaaaas, a diferença é que não existe esta borda duplicada entre as fotos. Percebam que a largura é de 5px para todos os links, mas como ficam um do lado do outro, entre eles ficam o dobro, ou seja, 10px de borda.

    Print dos tamanhos errados

    Poréeeeem, o problema é que no hover eu só consigo pintar a borda de um link, fazendo com que continue preta, a borda do próximo link. Veja o exemplo errado.

    O problema disso tudo, é que eu não consigo mudar a cor da borda de um link, seja ele próximo ou anterior. Infelizmente não temos essa liberdade. Com isso, tínhamos esse problema e o pessoal não queria isso.

    Resumindo, eles queriam o efeito abaixo:

    Print do efeito correto

    Perceberam que não existe duplicação de borda entre os links? Fazer isso é mole, se não fosse a troca de cor das bordas. Bastava setar borda superior e esquerda na <ul> e inferior e direita na <li>.

    Mas como nem tudo são flores né meu povo, lá foi o Dulcetti aqui resolver essa pemba.

    Vale ressaltar também, que a borda é colorida no hover, mas a borda preta em cima some, “invadindo” a <li> de cima.

    Beleza Bruno. Começa logo então…

    Ok, ok. Vamos dar início ao efeito. Vamos primeiro ao HTML:

    <ul>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    </ul>
    

    Um código extremamente complicado, difícil de ser entendido, complexo, mas creio que você seja safo para entender sem que o Dulcetti aqui explique ok?

    Um bando de <li> com link dentro, com imagem dentro, dentro de uma <ul>. É basicamente isso.

    Agora vamos a parte maaaaais complicada, pra variar…

    Implementando o CSS do efeito…

    Sim. O CSS é a parte mais chatinha de fazer e ser entendida. Eu sempre acho que é a parte mais tenebrosa para um desenvolvedor web.

    Vamos ao código?

    img {border:0;}
    ul {background-color:#000;margin:0;padding:5px 0 0 5px;width:180px;}
    ul:after {clear:both;content:".";display:block;height:0;visibility:hidden;}
    ul li {border-bottom:5px solid #000;border-right:5px solid #000;float:left;height:40px;width:40px;}

    Nada de muito complicado:

    • Retiramos a borda das imagens, isso porque quando ela recebe link, fica aquela borda azul linda em volta da imagem;
    • Depois colocamos o background da lista, zerando sua margem, colocamos um padding de 5px em volta da ul e finalizando com uma largura de 180px;
    • Essa técnica do after serve para os browsers, isso exclui o IE. Ela serve para quebrar o float de um elemento dentro do bloco, nesse caso as li’s
    • Adicionei borda na base e na lateral direita da li fechando o quadrante, float para ir pra esquerda, altura e largura de 40px;

    De início temos este resultado.

    Legal Bruno, mas cadê o hover?

    Calmae, muita calma nessa hora. Já deu pra ver o início do resultado, do nosso objetivo. Temos já a estrutura toda montada, li’s arrumadas e sem bug.

    Agora falta o principal… O hover.

    O tão falado e temido hover…

    Como já sabemos, o nosso grande amigo e preferido browser, vulgo IE, não aceita a pseudo-classe :hover.

    Okay, ele aceita, mas somente em links. Mas admita fã da Microsoft, esse é um dos maiores pecados do IE. Francamente…

    O mais correto era colocar a borda na imagem, como eu tinha dito, mas como citei, o hover no link não deixaria colocar borda na imagem. Portanto, tive que trabalhar em cima do link mesmo.

    Mas isso não é problema para Mr. Dulcetti.

    Dulcetti… Ta bom, anda logo com isso…

    Ok. Empolguei-me. Desculpe. Então vamos ao restante do CSS. Pasmem, são apenas mais duas linhas de código:

    ul li a, ul li a img {display:block;}
    ul li a:hover {border:5px solid #D2251C;margin:-5px 0 0 -5px;position:absolute;}

    Vamos a explicação:

    • A primeira linha é completamente difícil e complicada. Quase ninguém utilizou esta propriedade no CSS. Ela transforma o(s) elemento(s) em bloco(s). No nosso caso, link e imagem dentro do link. Precisamos disso para que a imagem não coloque akela margem automática quando não é bloco e para que o link funcione corretamente no nosso caso;
    • Agora a grande sacada. Nessa segunda linha, colocamos uma borda com cor vermelha e 5px de espessura. Damos uma margem negativa superior e a esquerda de 5px e colocamos o link com position absolute

    Vemos o resultado do efeito finalizado agora.

    Legal Bruno. Mas explica melhor…

    Seguinte: o link ficando com a borda vermelha de 5px, o que iria acontecer? O link, como bloco e com borda, iria acabar ficando dentro da “borda”, que na verdade é o padding preto da <ul>, formando uma borda dupla. Sendo que uma preta e a de dentro vermelha.

    Não queremos esse efeito. E para conseguirmos isso, colocamos a margem negativa do mesmo valor da borda, ou seja, 5px, fazendo com que o link ficasse colado na <ul>.

    Mas logicamente que a margem, somente, não era bastante para finalizarmos. No IE fica um samba do crioulo doido, enquanto no Firefox não pintava a borda da esquerda, por causa da borda da <li>, que é preta.

    Para resolvermos isso, colocamos o que? O temido position:absolute. Mas como as nossas <li>’s já possuem largura e altura, então não temos problema com isso, pq o tamanho ficará fixo, sem ser mexido.

    Resumindo…

    É isso. Um efeito simples, porém atrativo e que já recebi algumas dúvidas sobre como fazer e não vi nenhuma resposta, nenhum exemplo de como fazer isso.

    E como o código é bem curto, o efeito é simples e rápido, não precisou ficar escrevendo testamentos, etc. Tudo bem que eu poderia fazer outros exemplos, com bugs, etc, mas eu tenho certeza que eu iria terminar só ano que vem e ficaria gigantesco. Então tá bom assim mesmo e está aí. 😀

    Espero que gostem e que tenha sido útil. Aquele abraço e beijo na alcatra.

    [BBL]artigos, css, design, dicas, efeitos, web-standards, webstandards, xhtml[/BBL]

    [ 03/jan/2008 às 15:29hrs ] [ Por Bruno Dulcetti ] Comentários 27 Comentários |

    Categorias: Artigos,CSS,Webstandards

    27 Comentários no Post "Hover avançado com bordas em imagens"

    Postar no Rec 6

    1. Aeeeeee Professorrrr!!!

      Voltando com tudo nesse novo ano hein?! hehehee

      Muito foda o efeito, e essas complicações (da borda sobresair na outra li, a questão do IE, etc.) essas coisinhas que acabam por complicar o desenvolvimento e nos deixando PUTOS. 😀

      Valeu e continue com os ótimos tutos!

      bjo na alcatra, grande mestre YODA do CSS. 😀

    2. Ficaria melhor de entender se tivesse escudos do Palmeiras ilustrando
      heheheheh

    3. Artuhr
      Falae Artuhr… uahuahhauuhauha… Realmente nos deixa puto da vida mesmo… Mas existe o Dul7 para ajudar 😀
      Podexa que esse ano eu continuarei postando efeitos complexos 😉

      Renan
      Infelizmente terei que discordar de vc meu nobre 😛

    4. Fala sério heim! Tu não faz sexo não né Dulcetti? Tu faz transferência de pólem né! Pô não dá para trabalhar, freelar e postar artigos assim! E depois diz pra gente que vai pra balada?! Tu é mentiroso! Tu é um fanfarão! 😉

      Parabéns cara! Mais um grande artigo!

    5. Grande tutorial.
      Não achava que dava pra ser feito só com CSS, bastante interessante.
      Abraço!

    6. Cristiano Santos
      Que isso rapaz… auhauahuhauhuahu… tb naum eh pra tanto 😛 O artigo eh ateh simples, nada demais… Eh meio chato pra criar de primeira… mas dps eh mole 😀
      Valew mesmo… Que bom que gostou

      Leonardo Pessoa
      Eh rapaz… Quase tudo é possivel utilizando somente CSS… Pode acreditar 😀 Akele abraço

    7. Pô Bruno, podia colocar o plugin que acompanha os comentários daqui heim! É interessante acompanhar õpiniões de outros caras! Isso sempre cria novas questões! Abraços!
      ; -)

    8. Muito bom o tutorial…continue postando dicas assim que ajudam mto.

      Vlw!

    9. Cristiano Santos
      Fala rapaz… Isso tah planejado na nova versão do meu blog. Mas acho que já vou colocar nessa velha mesmo então 😉 Valew ae

      Diego
      Pode deixar rapaz… Estarei postando sempre…

    10. Fala Mr Dulcetti.

      Voltou com tudo nos tutoriais, foi uma técnica de Jedai sobre o poder absoluto do position hehe

      Parabéns!!!

      Abraço. BlogBeach vem aí!!! 🙂

    11. Fala mestre… Gostou desse? Eu falei que retornaria… Vamos ver se consigo com frequencia =D
      Valew ae meu nobre… E Blogbeach estarei lah com certeza =D

      akele abraço

    12. Ah não Dulcetti, agora tu sacaneou. Caralho, muito foda!
      Nunca precisei desse efeito, mas acho que eu iria parar naquele absolute salvador.
      Tu é ligado hein! huauhahua
      Abraço!

    13. Falae Alex.
      É onde o pessoal geralmente pára mesmo. Parte chata, mas simples de resolver. Mas às vezes as pessoas acabam não achando.

      Akele abraço.

    14. Fala Bruno.
      Bela solução encontrada.

      Abraço e parabéns pelo site.

    15. Entao fessor…
      o efeito da foto da globo.com ..seria pra dentroo ..
      e o efeitim q vc deu .. foi na borda…

      por conhecidencia.. meu primeiro site.. tah sendo em cima do site da globo.com …
      tenso de mais
      ahuauhauhuahha
      axei q ia ser facim ..

    16. queria saber fazer esse efeito sem usar li ul

      na img link mesmo..que nem na globo.com 😛

    17. tipo..
      to usando assim:

      img {
      border: 0px;
      margin-top: 5px;
      }
      #img a:link, a:visited {
      }
      #img a:hover {border: 3px solid #666666;}

      sendo que no firefox da bug..so pega no ie

    18. Gostaria de fazer isto, porém com os quadrinhos que ficam em baixo do header do meu site, tem alguma idéia de como fazer sem ter que criar 26 , uma pra cada imagem. ?

    19. Fabio Oquendo 'Boliviano' | 24/mar/2009 às 17:54

      Aeh Bruno Muito bom tuto fazia tempo que estava procurando ste efeito
      parabens
      pela iniciativa
      abx’s

    20. Sou um velho, mas novato no ramo, estou tentando montar um template e ao mesmo tempo aprendendo um pouco de códigos, ainda não havia achado a borda ideal, quebrei a cabeça como o seu tutorial deu certo mas acabou razoável, mas continuei e achei esta solução (se quiser ver http://www.rodatudo.com/teste/) só que de uma forma bem mais simples. Caso veja lá no site e puder me dizer qual é o defeito ficaria grato. Abraços Wilimar

    21. Olá. Cara to há tempos procurando por algo do tipo.

      eu to montando um blog e queria desenvolver um menu, mas q ao invés de texto tenha imagens com efeito hover, mas eu não seu como faço, dá pra me ajudar?

      desde já agradeço a atenção.

      bjs
      Tatiana

    22. Bom d+…. R7, ai vamos nóis ! 😀

    23. Daniel Valente | 13/ago/2010 às 13:15

      Pessoal, boa tarde.

      E se eu quiser a borda internet, mas não no hover do link da imagem, quero que a bordar permaneça estática na imagem, mas INTERNA, sem ocupar pixels externos da imagem.

      Abs!
      Daniel

    24. opa show o tutorial muito bom.
      mais eh o seguinte qdo crio duas colunas uma embaixo da outra, ao passar o mouse na primeira que esta em cima ela interaje com a de baixo como resolver isso ;p
      vlw se possivel ajudar vlw ;p

    25. […] amplamente utilizada na Globo.com e que pode ser obtida com um pequeno truque de CSS mostrado resumindo neste post, em que o Dulcetti explica como esta técnica é […]

    26. bom a imagem fico perfeita
      coloquei ela numa div class.
      problema e seguinte.
      quando insiro um texto,ele fica encima da imagem?
      tens solução?
      aproposito borda preta tive por branca para não atrapalhar img. fundo branco.

    27. borda preta ela esta pouco maior que a img
      qnt a texto esta solucionado

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com