2 replies to this topic

[bimonti]

Vou ensinar agora como fazer uma sombra ao redor da página. É um truque muito simples, feito apenas com uma imagem e CSS.

A imagem é esta:
 shadow.gif   155bytes   230 downloads

Independente do tamanho da página, a imagem é fina pois será repetida.

A marcação da página (HTML):

<div id="shadow">
	Texto
</div>

Bem simples, somente um um elemento para armazenar nosso texto. Agora o CSS:

html, body{
	margin:0px; padding:0px; height:100%;
}
#shadow{
	width:300px;
	height:100%;
	background:#fff url(shadow.gif) top left repeat-y;
	padding:0px 10px;
	margin:0px auto;
}

Explicando, zerei a margem e padding da página, e defini um tamanho de 100% para o corpo. Depois apliquei as alterações necessárias no meu elemento. Largura e altura, depois apliquei a imagem como fundo, ao topo e esquerda, e repetição no eixo-y (vertical). O segredo é agora, usando o padding, todo o conteúdo interno é colocado um pouco mais para dentro da div, em outras palavras uma margem interna, então a sombra fica afastada. A margem foi só para centralizar no navegador.

Salve a imagem no seu computador e coloque os códigos em uma página (atenção para o caminho da imagem).

[Augusto Saggese]

ok.. mas e o background central da pagina.. se n for branco? nada haver?

mt bom! abraços!

[bimonti]

É só mudar a imagem ....