24 replies to this topic

[joazweb]

Ola Pessoal,

Eu gostaria de saber qual a melhor maneira de obter o seguinte resultado utilizando CSS..
.. eu sei como fazer pra centralizar o layout, mas se eu eu quizer fazer o background dessa meneira?
terei que criar uma div a esquerda e outra a direita da div central? como fazer pra isso funcionar certo nos navegadores?
sei fazer isso com tabelas, mas eu quero aprender usando CSS, peco que por favor me deem uma luz..

[Kadu DG]

é só colocar um bg no body....

[joazweb]

é só colocar um bg no body....

entao eu sei fazer dessa meneira ai.. soh q seria ideal se eu fosse colocar somente uma imagem como background no caso ali eu vou precisar de tres ou duas, por que tem a parte pink que tem a sombra e depois tem a outra parte a esquerda, e tambem eu acho que teria que repartir em duas imagens pois seria legal colocar uma imagem com height de 700.. ou mais pixels para ficar de fundo? ai que nao sei oq eu devo fazer se devo criar outra div, se devo usar um float..

Nao eh possivel que alguem ja nao tenha feito algo parecido..

continuo aguardando sugestoes

[Thais Baio]

tbm gostaria de fazer algo semelhante...mas até hj não encontrei nada a respeito =/

[Alex Hiroshi]

É só colocar o degradê no body, como o Kadu falou e a sombra na div do conteúdo.

[Thais Baio]

Alex, o degrade no body tudo bem. Eu recortaria um filete de 1px vertical no degrade e mandava repetir em x. Mas e as sombras da esquerda e da direita? Não seria util colocar uma imagem desse quadrado branco já com a sombra pois o conteúdo do site não poderia crescer além de ficar pesado.

Qual seria a solução?

[Alex Hiroshi]

A parte do conteúdo tem uma largura fixa ou é variável? Se for fixa, é só colocar um filete da sombra e fazer ela repetir na vertical. O filete teria a sombra dos dois lados.

[Thais Baio]

hmm..é verdade...

então no body colocaria o degrade, e na div geral um filete pegando as duas sombras e que se repetisse em y? correto?

mas e se eu tivesse uma sombra embaixo tbm (na horizontal )? teria q criar outra div so pra ela?

Ahh, e outro problema. Se o fundo é degradê nao pode ser uma imagem só para a sombra, pq uma hora a sombra vai estar sobre uma cor, outra hora sobre outra cor. Já tinha pensado nisso?

[Alex Hiroshi]

Isso. Uma imagem com as duas sombras se repetindo em Y. Se tiver mais uma sombra embaixo, aí você cria uma outra div para essa sombra. É só deixar uma div dentro da div conteúdo.

Hum, não entendi a última dúvida, pode explicar novamente?

[Thais Baio]

Assim, tendo como fundo o degradê, temos diferentes tonalidades de cores ao longo da tela e consequentemente ao longo da sombra. Para colocar a sombra em um fundo solido seria facil, pq ai recortava a sombra com o fundo da mesma cor que ela iria ficar. Mas como o fundo vai ter diferentes tonalidades eu não posso cortar a sombra numa mesma cor de fundo pq senão vao aparecer diferenças.

Entendeu?

Abraços

Edição feita por: Thais Baio, 19/06/2008, 08:22.

[Alex Hiroshi]

Não pode ser uma imagem com transparência?

[Thais Baio]

Uma imagem com transparência que vc diz é uma sombra com fundo transparent? GIF ou PNG?

Se for isso, eu acabei de tentar, salvando em GIF e não deu certo. A sombra ficou branca, opaca.

Salvando em PNG pode ser que dê certo, mas o IE 6 não lê fundo transparente. =/

Edição feita por: Thais Baio, 19/06/2008, 16:14.

[Alex Hiroshi]

Com png seria o ideal. Você pode resolver esse problema com o IE usando javascript, veja: http://homepage.ntlw...osola/index.htm

[Thais Baio]

Mas isso não funciona ao colocar uma imagem como background...=/ só inserindo uma imagem mesmo pela tag img. Sendo assim não dá pra mandar repetir em y, e portanto não crescerá com o conteúdo do site.

Tinha pensado nisto?

[Alex Hiroshi]

É, não vi esse pequeno detalhe. Tem esse aqui que fala sobre a imagem como background. Não testei, só vi por cima mesmo, acho que deve funcionar.