Banner propaganda da DevMedia - Cursos de desenvolvimento web

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

O efeito final

Este é um box com sombra obtido com as técnicas CSS mostradas neste tutorial.

São quatro DIV's, sendo três para as imagens que compõem a sombra e uma para o texto.

A borda em volta do box é opcional e, claro, estilizável.

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
Sombra a direita do box
Canto inferior direito - baixo-dir.jpg
Sombra a direita do box
Canto inferior esquerdo - baixo-esq.jpg
Sombra no canto esquerdo embaixo do box

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo