27 de maiode 2008

Imagem com borda arredondada – Método PNG

Developer | 10 Comments »
por Ricardo José Corrêa

Neste post, vou ensinar de forma bem simples como inserir borda arredondada na imagem usando CSS e HTML Componentes (HTCs). O HTC é necessário para que o Internet Explorer 6 possa renderizar o PNG com transparência.

Há algumas limitações em especificar o tamanho da curva de forma dinâmica, pois vamos fazer com um PNG pré-determinado: uma solução para projetos em que há um padrão de imagens como portais ou blogs.

Você vai precisar de 3 arquivos:

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
.mascara-img{
position: relative;
}
 
.mascara-img-gr{
background:url(borda.png) no-repeat;
/* iepngfix.htc possibilita PNG transpente no I6 */
behavior: url(iepngfix.htc);
width:240px;
height:240px;
position: absolute;
top:0px;
left:0px;
}
 
</style>
<body>
<div class="mascara-img"><img src="claudio.jpg" width="240" height="240">
  <div class="mascara-img-gr"></div>
</div>
</body>
</html>

O resultado final é esse:
Resultado final da Imagem com borda arredondada - Método PNG

Credito da foto: Cláudio Reis do Clube do Photoshop

You can leave a response, or trackback from your own site.

10 Responses to “Imagem com borda arredondada – Método PNG”

  1. Rodrigo Says:
    junho 3rd, 2008 at 18:46

    Eita tema bonito da peste!

  2. Ricardo José Corrêa Says:
    junho 4th, 2008 at 19:08

    Poxa, legal que você gostou, Ro.
    Saiba que sua opinião é muito importante pra mim :)

  3. Silvio Monte Says:
    junho 5th, 2008 at 10:03

    Cara sou um grande admirador de seus post’s mas tenho de confessar uma coisa, ou eu estou ficando burro ou não prestou aqui no meu esse post não… :P

    fiz igual ao teu inclusive nas fotos.

    Mas sempre vale a pena ler o que tu escreve…

    Fica com Deus cara…

  4. Ricardo José Corrêa Says:
    junho 5th, 2008 at 11:30

    Silvio, eu testei aqui e funcionou normalmente, no IE 6 e 7 e no Firefox. Você está usando um outro navegador?

    De qualquer forma estou te mandando um arquivo .zip pra você.

    Abração!

  5. Leandro Says:
    agosto 1st, 2008 at 21:12

    No meu não prestou também também não..
    Procurei no código e não achei nada de errado.
    Só copiei e colei e pus os arquivos na mesma pasta e nada.
    Tem como mandar um zip tb?

    ne0xys@yahoo.com.br

  6. Adiministrador Says:
    dezembro 17th, 2008 at 23:29

    Olá,

    Era isso mesmo que eu procurava!… Mas como aplico esse efeito nas imagens no meu blog? Tenho uma seção de wallpaper e queria colocar essa borda em todos eles.

  7. retratista.com.br Says:
    fevereiro 10th, 2009 at 14:18

    Grande Ricardo
    Ricardo, O Grande
    Grande Coração…

    O acumulo maximo de sabedoria
    nos faz compartilhar o conhecimento.
    CREX.

    Parabens Pelo Post.

  8. Eduardo Ferreira Says:
    maio 28th, 2009 at 13:12

    Eu fiz tudo como dito, porém, não está aparecendo a imagem.
    Quando clica para atualizar a página, ele até inicia uma tentativa (mostrando como um flash a imagem)de mostrar a imagem, mas nao aparece.
    Que arquivo Zip é esse que você envia para o pessoal? poderia me enviar também?

    Obrigado. Fico no aguardo da sua resposta!!
    Parabéns pelo seu post.

  9. eduardo Says:
    agosto 11th, 2009 at 21:20

    gostei muito do seu tutorial
    porem nao funcionou corretamento no IE6
    poderia me mandar o .zip

  10. Claudia Says:
    setembro 23rd, 2009 at 0:31

    Gostaria se fosse possivel, que me mandasse o zip. Tentei e tb não consegui.
    obrigada,
    bjs

Leave a Reply