Sombras em boxes

Publicado em: 21/03/2005

Este tutorial está desatualizado. As CSS3 prevêem aplicação de sombras em boxes sem uso de imagens.

O efeito final

Neste tutorial mostrarei as técnicas para obter um efeito de sombra em um box, usando três imagens inseridas em três DIV's, com a propriedade CSS background.

Mostro abaixo o efeito final

As imagens utilizadas

As imagens e seus respectivos nomes são mostradas a seguir.
(Clique sobre a imagem, para vê-la em seu tamanho natural. Ao ir para a tela que mostra a imagem, use o botão Voltar do seu navegador para retornar ao tutorial.)

Canto superior direito - topo-dir.jpg

Canto inferior direito - baixo-dir.jpg

Canto inferior esquerdo - baixo-esq.jpg

Sobre as imagens

A imagem denominada:
topo-dir.jpg será colocada no canto superior direito e se estenderá para baixo, até o canto inferior direito (é a sombra lateral à direita) e termina na imagem baixo-dir.jpg;

baixo-dir.jpg será colocada no canto inferior direito. É a sombra em forma de uma 'curvinha' embaixo à direita;

baixo-esq.jpg será colocada no canto inferior esquerdo e se estenderá para a direita, até o canto inferior direito (é a sombra embaixo) termina na imagem baixo-dir.jpg;

Por que as imagens são tão compridas ?

Você deve ter observado nos links para as páginas que mostram as imagens em seu tamanho natural (clique sobre a imagem mostrada no titulo acima) que as imagens das sombras à direita e embaixo, são bem mais compridas do que o tamanho do box. A razão disto é o seguinte:

Quanto mais texto você for adicionando ao box, mais comprido ele ficará. Se você projetar uma imagem topo-dir.jpg muito 'baixa', quando o box ultrapassar a altura da imagem, a sombra será interrompida. Veja um exemplo onde foi projetada uma sombra esquerda muito 'baixa' .

O mesmo efeito vai acontecer se você projetar uma imagem para a sombra de baixo do box baixo-dir.jpg muito 'curta'. Neste caso o box crescerá de comprimento quando o usuário aumentar o tamanho das fontes no seu navegador , interrompendo a sombra mal projetada.

Veja você mesmo este efeito :
Volte na página que você acabou de visualizar e aumente o tamanho da fonte no seu navegador. Nesta página projetei a sombra de baixo muito 'curta' além de muito 'baixa'.

Para aumentar o tamanho das fontes no seu navegador faça o seguinte:
Navegadores Mozilla; Crtl + aumenta e Ctrl - diminui
Navegadores Internet Explorer; Exibir=>Tamanho de fonte=>marque maior tamanho.
Ou, adote os procedimentos que você já conhece!

As DIV's para as imagens e o texto

Usaremos quatro DIV's sendo três para imagens e uma para o texto. Para cada DIV, criaremos uma classe, e usaremos o mesmo nome da imagem para a classe.

O código HTML é mostrado a seguir:

  <div class="topo-dir">
 <div class="baixo-esq">
  <div class="baixo-dir">
   <div class="texto">
    <h3>Cabeçalho</h3>
     <p>Aqui entra o texto do box</p>
   </div>
  </div>
 </div>
</div>

As regras CSS para posicionar as imagens

<style type="text/css">
.topo-dir {
background:url(topo-dir.jpg) 100% 0 no-repeat; 
width:25em;
}
.baixo-esq {
background: url(baixo-esq.jpg) 0 100% no-repeat;
}
.baixo-dir {
background: url(baixo-dir.jpg) 100% 100% no-repeat; 
}
</style>

As imagens posicionadas conforme as regras CSS acima produzem este efeito no navegador.

Quer rever a propriedade background? Leia este tutorial

Observe que foi definida uma largura de 25em para o box,. Esta unidade de medida CSS é relativa ao tamanho de fonte do navegador, produzindo aquele efeito de 'esticar' o box (que você viu lá em cima neste tutorial) quando o usuário redimensiona o tamanho de fonte.

Você notou na página visitada que o nosso box está com fundo branco e o texto ultrapassa o tamanho do box. Vamos acertar isto, com regras de estilo.

As regras CSS para colorir o fundo

O fundo sobre o qual se assenta o texto será estilizado na DIV que contém o texto. Observe o acréscimo das regras de estilo

<style type="text/css">
.topo-dir {
background:url(topo-dir.jpg) 100% 0 no-repeat; 
width:25em;
}
.baixo-esq {
background: url(baixo-esq.jpg) 0 100% no-repeat;
}
.baixo-dir {
background: url(baixo-dir.jpg) 100% 100% no-repeat; 
}
div.texto {
background:#ffc;
}
</style>

Este acréscimo de regra de estilo, produz outro efeito no navegador.

OPS! Sumiu a sombra? Sim ela foi 'coberta' pelo background que acabamos de definir para a DIV que contém o texto.

Revelando a sombra escondida

A espessura das imagens da sombra é de 27px. Vamos então definir um padding de 27px à direita e embaixo para 'puxar' a DIV que está escondendo a sombra.

<style type="text/css">
.topo-dir {
background:url(topo-dir.jpg) 100% 0 no-repeat; 
width:25em;
}
.baixo-esq {
background: url(baixo-esq.jpg) 0 100% no-repeat;
}
.baixo-dir {
background: url(baixo-dir.jpg) 100% 100% no-repeat; 
padding:0 27px 27px 0;}
div.texto {
background:#ffc;
}
</style>

Este acréscimo da regra de estilo, produz mais este efeito no navegador.

OPS! Puxou muito embaixo? Sim mas ali a causa é a margem 'default' do parágrafo.

Acresentaremos esta regra de estilo p{margin-bottom:0;}para obter o quarto efeito no navegador

OPS! Agora sim! Finalmente nosso box com sombra. Resta apenas estilizar o texto. Isto você adapta às suas preferências e necessidades.

Estilizando o texto

E aqui as regras de estilo completas para produzir o efeito final proposto no ínicio deste tutorial.

<style type="text/css">
.topo-dir {
background: url(topo-dir.jpg) 100% 0 no-repeat; 
width:25em;
}
.baixo-esq {
background: url(baixo-esq.jpg) 0 100% no-repeat;
}
.baixo-dir {
background: url(baixo-dir.jpg) 100% 100% no-repeat; 
padding:0 27px 27px 0;
}
.texto {
background:#ffc; 
border:1px solid #333;
}
.texto h3 {
text-align:center; 
margin:0.5em 0; 
}
p {
margin-bottom:0;
font: 0.8em Georgia, "Times New Roman", Times, serif;
padding:0 10px 10px; 
text-align:justify;< 
}
</style>

Este artigo foi traduzido para o russo. Grato ao Nikolay.