• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

marinheiro

[WebDesign] Utilizar png's com sombra e fundo transparente

11 mensagens neste tópico

como todos sabemos, o ie não se dá muito bem com as sombras e fundos transparentes dos png's... há, no entanto, uma maneira de utilizar png's com sombra ou fundo transparente no ie sem recorrer a truques de css ou js... a sombra, pura e simplesmente, desaparece, mas mantém-se a transparência do fundo...

no fireworks (não consegui os mesmos resultados no photoshop), cria-se a imagem que se quer utilizar... deve ser composta por elementos que tenham limites bem definidos (com texto, fica um pouco para o ratado...) e fundo transparente... se se quiser utilizar sombras, quando temos a imagem composta, deve-se seleccionar todos os layers e fazer um "flatten selection", aplicando a sombra só depois de estar tudo num só layer...

o truque vem agora... em vez de se gravar normalmente o ficheiro como png, vai-se exportar... nos parametros de exportação (optimize), deve-se escolher PNG8, 256 colors e alpha transparency, fazendo-se o rebuild do color index... depois, é só exportar...

imagem original no fireworks:

image1cd2.jpg

imagem no firefox:

image2qm8.jpg

iimagem no ie:

image3hf1.jpg

as imagens estão um pouco para o "ranhoso" porque foram redimensionadas, mas acho que dá para ver o resultado :(

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

acabei de experimentar noutro computador, não fosse dar-se o caso das imagens estarem em cache, e aparecem as 3...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

como e que guardas.te as imagens? e que no photoshop tambem acontece disso se guardas com uma extenção do tipo Jpg ou Psd uma coisas assim e a mandas para a  web ela meter o fundo rosa, tenta guarda a imagem com Gif, predes qualidade, mas fica transparente no fundo.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Isso é uma solução um pouco po desenrasca porque se tivermos imagens com varios níveis de transparência, foi-se...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

como e que guardas.te as imagens? e que no photoshop tambem acontece disso se guardas com uma extenção do tipo Jpg ou Psd uma coisas assim e a mandas para a  web ela meter o fundo rosa, tenta guarda a imagem com Gif, predes qualidade, mas fica transparente no fundo.

o fundo foi só para se ver que a imagem mantinha a transparência... é mesmo a cor do fundo da página...

Isso é uma solução um pouco po desenrasca porque se tivermos imagens com varios níveis de transparência, foi-se...

como eu escrevi, é para situações em que se quer manter o fundo transparente, não é para utilizar com degradés de transparência...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

então, para acabarem com o problema no ie, é só usar o pngfix... no site explica como usar...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

então, para acabarem com o problema no ie, é só usar o pngfix... no site explica como usar...

ya, já tenho este site nos bookmarks ha uns tempos, mas nunca usei... se funcionar tão bem como diz no site, é bom!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pelo menos comigo a parte das transparências tem funcionado bem, ainda que não tenha testado os maps numa situação real...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Tem o contra segundo li no site que não funciona com CSS Background o que é uma treta porque precisava disso, mas já é uma boa descoberta ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora