Deixando resquícios duvidosos para arqueólogos do futuro.
Especiais
Imagem com borda arredondada - Método PNG
27 de maio, 2008 por Ricardo José Corrêa
(2 voto, média: 5 de 5)
Loading ...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:
- A foto em si;
- A máscara da imagem em PNG transparente;
- O arquivo iepngfix.htc, um HTML Componentes (HTCs).
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:
Credito da foto: Cláudio Reis do Clube do Photoshop
junho 3rd, 2008 em 18:46
Eita tema bonito da peste!
junho 4th, 2008 em 19:08
Poxa, legal que você gostou, Ro.
Saiba que sua opinião é muito importante pra mim
junho 5th, 2008 em 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…
fiz igual ao teu inclusive nas fotos.
Mas sempre vale a pena ler o que tu escreve…
Fica com Deus cara…
junho 5th, 2008 em 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!
agosto 1st, 2008 em 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