Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » Desafio: Como “cropar” uma foto com CSS

    E ae pessoal.

    Hoje estou aqui com algo diferente. Estava semana passada aqui na Globo.com, implementando um novo projeto, o qual falarei em breve para vocês, quando acabei parando em um probleminha chato.

    Um novo efeito de over nos links que o pessoal de design fez no layout. É interessante, gostei, mas fiquei pensando um tempinho em como implementá-lo.

    Legal Bruno, mas qual é o desafio?

    Então. Vou apresentar o efeito. É como se fosse uma borda de 3px em volta de uma foto, mas só que interna, como se “cropasse” a foto. Veja abaixo:

    Exemplo do Efeito

    A largura é de 186px e continua com 186px com o hover do mouse, mas com uma borda de 3px. Se fosse só colocar a borda, seria fácil, porque era só diminuir o tamanho da foto no hover, mas como isso não poderia acontecer, tive que pensar em outra solução.

    Colocando somente a borda, a largura ficaria 192px, o que faria quebrar o grid, portanto, não adianta usar somente a borda.

    [UPDATE]
    O juliano postou uma forma de fazer, mas como background. Esse update é só pra realçar que tem q ser por imagem, pois o conteúdo é dinâmico e a imagem faz parte do conteúdo 😉

    Valew ae juliano.
    [/UPDATE]

    Finalizando

    Está lançado. Amanhã estarei publicando as duas soluções que achei. Lembrando que tem que ter suporte na maioria dos browsers, senão em todos 😀

    Alguém postando a solução, igual ou diferente, estarei postando amanhã também 😉

    Aquele abraço.

    Resposta no link http://www.brunodulcetti.com/blog/2007/06/26/resposta-do-desafio-como-cropar-uma-foto-com-css.html

    [BBL]css, desafio, dicas, webstandards[/BBL]

    [ 25/jun/2007 às 12:15hrs ] [ Por Bruno Dulcetti ] Comentários 15 Comentários |

    Categorias: CSS,Webstandards

    15 Comentários no Post "Desafio: Como “cropar” uma foto com CSS"

    Postar no Rec 6

    1. 1-colocar uma imagem por cima transparente com 3 px a menos e no hover acrescentar a borda.
      2-colocar a imagem da garota como background de div e no hover diminuir o tamanho da div mantendo a mesma imagem de background, com position center.

    2. fala juliano.

      esqueci d mencionar que o conteúdo é dinâmico e é por imagem, não podendo colocá-la como BG =///

      e valeu pelo comentário.

    3. Como a imagem é um link, você pode deixar o link com display:block; e setar as dimensões, e adicionar um overflow:hidden; tambem ao link, assim você pode inserir a imagem em quais quer dimenções, o a:hover precisaria ter -3px nas dimenções e adicionar a borda.

      É bem na base da gambiarra, mas funciona, foi assim que fiz em um projeto que participei.

      abraços

    4. Eu usaria a seguinte semantica:
      [a href=”link da imagem”][img src=”url da imagem” alt=”Acessibilidade, por favor” /][span>Acessibilidade, por favor[/span][/a]
      E em meu css eu poderia usar o seguinte (não estou usando classes neste exemplo por quesrtões obvias):
      a {
      position:relative; /* com isto eu deixo a posição dos meus span com base em seus links */
      width:186px;height:186px;
      }
      span {
      position:absolute; /* Aqui eu defino que ele fica onde eu quiser 🙂 (lembra do position:relative; ?) */
      top:0;left:0;width:100%;height:100%; /* O tamanho total */
      text-ident:-9000em;overflow:hidden; /* sumindo com o texto do span */
      }
      a:hover span {
      top:3px;left:3px;
      width:180px;height:180px; /* Menos 3px de cada lado */
      border:3px solid #FF9C08; /* Os três pixel, de cada lado 😛 */
      }
      Acredito que esta seja uma boa solução. Ainda não testei, mas vamos ver como pode ser solucionado. Bruno…

    5. [- sObRaL -] | 25/jun/2007 às 17:16

      a.foto {
      background-color: #FF9800;
      }
      a.foto:hover {
      clip: rect(3px, 3px, 3px, 3px);
      }

    6. [- sObRaL -] | 25/jun/2007 às 17:25

      Sim, eu errei nos valores! Eles são contados do topo esquerdo e me esqueci disso!
      No sentido horizontal, ficaria 3px na esquerda e 183px na direita.

      Tô voltando p/ trampo!

    7. Alisson, quase a solução que eu usei. Faltam alguns detalhes, por causa do IE, etc. Sempre ele. 😉

      Michael, pra varia, não funciona no ie e mesmo assim, tem alguns erros, algumas coisas que tive que mudar pra funcionar no FF, etc.

      Sobral, o clip foi a primeira forma como fiz, é uma ótima opção, mas temos problemas com o IE pra variar, amanah explico direito.

      Tá quase, tá quase… Valew ae pelas tentativas… Amanhã eu posto os resultados que obtive.

    8. Coloque um background da cor que deseja a borda e faça um clip na imagem. Dá certo? Acho que sim, sei lá, não testei hehe.

    9. […] Como prometido, estou aqui pra postar a “resposta” do “desafio” que postei ontem aqui no Blog. […]

    10. Eu ia fazer o seguinte:

      a img {padding:3px;}
      a:hover img {
      border:3px solid orange;
      padding:0;
      }

      =D

    11. Olá Matheus. Mas concorda que com o padding a imagem vai ganhar mais 6px de largura e altura, desfigurando o layout? 😉

      Fora que a borda não ficaria interna e sim por fora da imagem. 😉
      Mas valew pela resposta.

      Aquele abraço.

    12. Interessante, é o mesmo efeito utilizado no site da globo o G1.com.br Qual é o css definitivo. Qual reamente funciona este efeito?

    13. O CSS abaixo funciona em ambos navegadores IE e Mozila:

      .image { border: 2px solid #aaaaaa;}
      a:link .image { border-color: #aaaaaa;}
      a:visited .image { border-color: #aaaaaa;}
      a:hover .image { border-color: #FF6600;}

      Veja o resultado: http://geoimob.com.br/geoauto/maisdetalhes.php?id=7

    14. Sim Dalton. Mas a diferença eh q no meu exemplo a imagem naum possui borda d início… E nesse exemplo q vc passou, ela jah começa com borda… Aih fica bem mais facil 😉

      Akele abraço.

    15. Legal Bruno, mas e então… como faz?

    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