Sombras Laterais No Layout
Started By THCB, 19/06/2008, 21:18
3 replies to this topic
#1
Posted 19/06/2008, 21:18
Oi, estou fazendo um site que tem sombras laterais no layout.
Para entender melhor o que estou dizendo, coloquei na net a imagem do layout: http://www.propagare.net/bit9-site
O que quero fazer é a sombra da esquerda e a da direita no meu layout, mas estou encontrando os seguintes problemas:
1 - Pensei em cortar um filete horizontal que englobe a sombra da esquerda e da direita, colocar como background da div geral (que engloba tudo) e mandar repetir em y. Assim teria um site que o conteúdo pudesse crescer na altura.
Mas, como meu fundo é um gradiente, eu tenho diferentes tonalidades de cores ao longo do site, e consequentemente ao longo das sombras. Por exemplo: na parte do topo tenho cores mais escuras, no rodape cores mais claras. Ou seja, gradiente. Então eu não posso cortar a imagem da sombra e mandar repetir, pois ao cortar essa imagem estarei pegando seu fundo que pode ser diferente na parte debaixo e de cima.
Aí pensei: é so salvar a sombra com fundo transparente em GIF. No CSS a imagem ficou branca e sem sombra alguma.
Aí pensei: vo salvar a sombra em PNG então. Mas lembrei que o IE 6 não lê PNG transparente.
Aí pensei:vo ver um javascript pra fazer o IE 6 ler fundo transparente. Até achei o javascript para isto, mas ele não possibilita eu mandar o background repetir (repeat, repeat-x,repeat-y). O que estraga os planos de fazer o site com um layout que cresça de acordo com o conteúdo.
Aí pensei: vo pedir ajuda no forum como ultima saida dessa enrascada...hehehe
Alguém pode me dar uma luz?
Qualquer idéia já é bem vinda.
Abraços
Para entender melhor o que estou dizendo, coloquei na net a imagem do layout: http://www.propagare.net/bit9-site
O que quero fazer é a sombra da esquerda e a da direita no meu layout, mas estou encontrando os seguintes problemas:
1 - Pensei em cortar um filete horizontal que englobe a sombra da esquerda e da direita, colocar como background da div geral (que engloba tudo) e mandar repetir em y. Assim teria um site que o conteúdo pudesse crescer na altura.
Mas, como meu fundo é um gradiente, eu tenho diferentes tonalidades de cores ao longo do site, e consequentemente ao longo das sombras. Por exemplo: na parte do topo tenho cores mais escuras, no rodape cores mais claras. Ou seja, gradiente. Então eu não posso cortar a imagem da sombra e mandar repetir, pois ao cortar essa imagem estarei pegando seu fundo que pode ser diferente na parte debaixo e de cima.
Aí pensei: é so salvar a sombra com fundo transparente em GIF. No CSS a imagem ficou branca e sem sombra alguma.
Aí pensei: vo salvar a sombra em PNG então. Mas lembrei que o IE 6 não lê PNG transparente.
Aí pensei:vo ver um javascript pra fazer o IE 6 ler fundo transparente. Até achei o javascript para isto, mas ele não possibilita eu mandar o background repetir (repeat, repeat-x,repeat-y). O que estraga os planos de fazer o site com um layout que cresça de acordo com o conteúdo.
Aí pensei: vo pedir ajuda no forum como ultima saida dessa enrascada...hehehe
Alguém pode me dar uma luz?
Qualquer idéia já é bem vinda.
Abraços
#2
Posted 20/06/2008, 01:09
Aconteceu o mesmo problema comigo, meu Photoshop salvava o GIF completamente "branco".
Mas quase ninguem ainda usa IE 6, até pq a atualização automatica do Windows baixa o 7 automaticamente (fiquei com um nojo disso quando usava Windows XP).
Acho que o melhor geito¹ mesmo é usar PNG transparente, ou então tenta usar outro hack..
Ou então faz um esquema com duas sombras, uma que ocupe o espaço com o degradê, e a outra pra ocupar o resto.. tipo com tabelas ou sei lá, isso é completamente contra os padrões mas funcionava comigo, até eu decidir que ficava melhor em PNG transparente..
Mas ai pra vc decidir mesmo, só avaliando o público alvo.. vc podia fazer uma enquete sobre o navegador usado, mts sites fazem isso.. LOL'z..
Flw's
¹Jeito ou Geito? oO..
Mas quase ninguem ainda usa IE 6, até pq a atualização automatica do Windows baixa o 7 automaticamente (fiquei com um nojo disso quando usava Windows XP).
Acho que o melhor geito¹ mesmo é usar PNG transparente, ou então tenta usar outro hack..
Ou então faz um esquema com duas sombras, uma que ocupe o espaço com o degradê, e a outra pra ocupar o resto.. tipo com tabelas ou sei lá, isso é completamente contra os padrões mas funcionava comigo, até eu decidir que ficava melhor em PNG transparente..
Mas ai pra vc decidir mesmo, só avaliando o público alvo.. vc podia fazer uma enquete sobre o navegador usado, mts sites fazem isso.. LOL'z..
Flw's
¹Jeito ou Geito? oO..
#3
Posted 20/06/2008, 08:31
Oi Rafaels,
então acho que o jeito vai ser eu fazer 2 divs mesmo. Uma com a sombra no fundo degrade outra com a sombra no fundo onde acaba o degrade, pois deixar o pessoal que usa Ie 6 de fora, com PNG, eu não posso. Pelo que vi tem bastante gente ainda usando sim. Vejo isso pelas pessoas que conheço.
Se alguem tiver mais ideias, postem por favor
Obrigada Rafael e é jeito com J ....hehehe
então acho que o jeito vai ser eu fazer 2 divs mesmo. Uma com a sombra no fundo degrade outra com a sombra no fundo onde acaba o degrade, pois deixar o pessoal que usa Ie 6 de fora, com PNG, eu não posso. Pelo que vi tem bastante gente ainda usando sim. Vejo isso pelas pessoas que conheço.
Se alguem tiver mais ideias, postem por favor
Obrigada Rafael e é jeito com J ....hehehe
#4
Posted 19/07/2008, 21:10
Oi Rafaels,
então acho que o jeito vai ser eu fazer 2 divs mesmo. Uma com a sombra no fundo degrade outra com a sombra no fundo onde acaba o degrade, pois deixar o pessoal que usa Ie 6 de fora, com PNG, eu não posso. Pelo que vi tem bastante gente ainda usando sim. Vejo isso pelas pessoas que conheço.
Se alguem tiver mais ideias, postem por favor
Obrigada Rafael e é jeito com J ....hehehe
Boa noite THCB,
Achei este script em javascript que funcionou para PNG32 no IE6 e no Firefox, veja o link: http://homepage.ntlw...la/pnghowto.htm
Abraços!
Martin
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)