Sombras laterais no layout

THCB · Junho 20, 2008

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

William Bruno · Junho 20, 2008

Aí pensei: vo pedir ajuda no forum como ultima saida dessa enrascada...hehehe

Boa escolha... http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Vamos lá... eu faria o seguinte:

Colocaria o gradiente preto > azul como background do body, e mandaria repetir em x!

sim, pois o filete seria vertical.

E qnto as pequenas sombras em torno da box do site, não me parecem tão explicitas assim.. uma simples borda não te resolveria?

Ou então você repetiria em y, uma imagem como background da DIV total(e por cima dela, uma outra div com um back branco), de um gif transparente, com a opacidade e cor que você deseja para tal efeito.

Se bem que não sei hein?! Juro que não tô enchergando essa borda, se você puder marcar ela no paint... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

thcb2 · Junho 20, 2008

Oi tiuUill,

então o gradiente foi isso que eu fiz: cortei um filete do gradiente e mandei repetir em x no body.

Agora o meu grande problema é essas malditas sombras. Sim, elas não são mto perceptíveis, mas meu superior quer pq quer elas no site...hehehe

Então vo ter que arrumar um jeitinho de por. Não entendi seu último paragrafo. Pode detalhar melhor pra mim? Como assim em cima dela?

William Bruno · Junho 20, 2008

Bom, na verdade eu pensei no seguinte:

<style>
#pai_conteudo {
	background-color: #ccc;
	width: 825px;
	height: 810px;
	margin: 0 auto;
}
#conteudo {
	background-color: #fff;
	width: 815px;
	height: 800px;
	margin: 0 auto;
}
</style>
</head>
<body>
<div id="pai_conteudo">
	<div id="conteudo">
		Conteudo do site

	</div><!-- fecha #filho -->
</div>

Só que no lugar desse cor #ccc, você colocaria a tua GIF transparente com opacidade..

Ou como me parecem ser só 1 ou 2 pixels essa tal sombra, coloca uma borda cinza na conteudo, e esquece da "pai_conteudo".. sei lá... vê ai ^^

Ah... e ainda tem a opção de usar aqueles códigos especificos para transparência... como o "alpha.."... vou ver onde tem aqui no forum, aí é só aplicar nesse código que postei.

thcb2 · Junho 20, 2008

Então tiuUill, eu fiz uns testes hj de tarde cortando a sombra e salvando em gif: eu cortei os 6 pixels de sombra da esquerda até os outros 6 pixels de sombra da direita. Salvei como GIF e joguei como background.

Mas a imagem da sombra desapareceu e ficou tudo branco. Numa outra tentativa, mudando algumas coisas ao salvar a imagem como GIF no photoshop, eu consegui fazer a sombra aparecer porém horrivelmente, cheia de quadradinhos. Nem pode se chamar de sombra.

Isso que me fez migrar para a solução do PNG.

Agora isso que você falou de alpha, de transparencia. Não sei utilizar, nunca usei.

Valeu

William Bruno · Junho 20, 2008

Bom, para fazer oque eu disse com o alpha, seria o seguinte:

body{
	background-color:#00f;
}
#pai_conteudo {
	background-color: #ccc;
	width: 825px;
	height: 810px;
	margin: 0 auto;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
	opacity:0.30; 
	-moz-opacity: 0.30;
	-khtml-opacity: .30;
}
#conteudo {
	background-color: #fff;
	width: 815px;
	height: 800px;
	margin:5px;
	position: absolute;
}

Roda esse CSS no lugar do outro, no meu primeiro post..

mas é estranho não estar dando certo com o GIF... você fez certinho?(desculpa a pergunta..)

Tem como postar a imagem pragente dar uma olhada?

thcb2 · Junho 20, 2008

Ah sim, mas isso que você passou de alpha não fica bem sombra ne...fica alpha :S hehehe...

Então tiuUiLL, eu acho que fiz certinho sim. Eu tinha um quadrado branco com sombra. Cortei um filete horizontal desse quadrado que englobe a sombra da esquerda e da direita. Dei um Salve For Web no photoshop. Coloquei GIF. E pronto.

Mas a qualidade gif ficou péssima, nem se parece com uma sombra. Testa aí pra você ver como fica. Fica uns quadradinho, uns ruídos manja?

William Bruno · Junho 20, 2008

Nunca fui bom em Design.. mas seria o seguinte?

body{
	background-image:url("filete-bg.jpg");
}
#pai_conteudo {
	background-image:url("filete_sombra.gif");
	width: 820px;
	height: 810px;
	margin: 0 auto;
}

Imagem:

??

thcb2 · Junho 20, 2008

Oi tiuUilL,

então, assim com esta imagem que você fez dá certo, mas pq está imagem não tem sombra. Ela tem apenas uma borda de cor sólida, então nem precisa de fundo transparente mesmo. Com imagens de cor sólida dá certo, mas sombras não são sólidas.

THCB · Junho 20, 2008

Oiii,

acabei resolvendo criando divs. Criei uma div para a sombra da esquerda contendo duas divs. Na primeira div coloquei uma imagem da sombra com o fundo degrade. Na segunda div coloquei a imagem da sombra com o fundo da mesma cor onde acabava o degrade e mandei repetir em y.

Os mesmos passos para fazer a div da direita.

Agora só to enrascad com a sombra debaixo. Não estou conseguindo acertá-la. Coloquei na net pra você dar uma olhada:

http://www.propagare.net/thais

Ve se você sabe uma luz pra ver o que eu faço pra colocar a sombra embaixo.

brcontainer · Junho 20, 2008

no caso de sombra abaixo você pode criar um elemento em cima e outro embaixo:

<div id="todo">
<div id="s1">sombra de cima</div>
	<div id="geral">
...
conteudo
...
	</div>
<div id="s2">sombra de debaixo</div>
</div>

Arquivado

Sombras laterais no layout

Recommended Posts

THCB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

thcb2 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

thcb2 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

thcb2 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

thcb2 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

THCB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante