Ir para o conteúdo
marinheiro

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

Mensagens Recomendadas

marinheiro    0
marinheiro

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 :(

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
pebat    1
pebat

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
marinheiro    0
marinheiro

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...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Nazgulled    8
Nazgulled

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!

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
marinheiro    0
marinheiro

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
QuickFire    0
QuickFire

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 ;)

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


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade