Vamos fazer um artigo prático de CSS para mostrar uma maneira de fazer uma caixa com CSS para colocar conteúdos. A caixa terá um design especial que emoldure os conteúdos que colocarmos dentro.

O melhor para entender o que pretendemos fazer é ver o exemplo em funcionamento.

O exemplo que escolhemos poderia ser feito de várias maneiras, cada uma com suas vantagens e inconvenientes. No obstante, nós vamos explicar a forma de fazê-lo que nos pareceu mais útil. Teria estas vantagens e inconvenientes:

Vantagens: A caixa pode crescer para baixa o quanto você desejar. Portanto não seria problema se tivéssemos que colocar mais ou menos texto, porque a caixa se ajustaria ao tamanho que tivéssemos.

Inconvenientes: A caixa tem uma largura fixa, que está marcada pelo tamanho das imagens que tivermos realizado. Se adicionarmos muitas camadas dentro desta caixa, pode dar problemas de projeção, embora não experimentamos este problema em nosso exemplos.

As imagens

Para realizar esta caixa utilizamos duas imagens. Uma para a parte de cima da moldura e outra para a parte de baixo da moldura. Estas imagens podem ser feitas com qualquer programa de edição de imagens, ajustando cores e formas ao aspecto de nossa própria página. As imagens que utilizamos são estas:



O código HTML

Realizamos o exercício utilizando duas camadas (etiqueta <DIV>), uma dentro da outra. Uma camada se chama "caixa acima", que terá o estilo da parte de cima da caixa, e outra "caixa abaixo", onde colocaremos os estilos necessários para o corpo da caixa e a parte debaixo. A camada principal é "caixaacima" e dentro estará a camada "caixaabaixo". Em "caixaabaixo" é onde colocaremos o texto para colocar dentro da caixa.

O código é o seguinte:

<div class="caixaacima">
   <div class="caixaabaixo">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit
   ….
   </div>
</div>

O código CSS

Para definir o aspecto de "caixaacima" e "caixaabaixo" foi utilizado CSS. Como comentávamos, em "caixaacima" se definem os aspectos da parte de cima da caixa e em "caixaabaixo" os da parte debaixo. Ademais, como "caixaacima" contém a "caixaabaixo", todos os estilos que tivermos definido em "caixaacima", também se herdarão em "caixaabaixo".

Este é o código de Folhas de estilo para este exemplo:

.caixaacima{
   width: 600px;
   background-image: url("acima.gif");
   background-position: top center;
   background-repeat: no-repeat;
}

.caixaabaixo {
   background-image: url("abaixo.gif");
   background-position: bottom left;
   background-repeat: no-repeat;
   padding: 58px 75px 58px 69px;
}

O exercício é bastante simples, mas é bastante útil. Podemos vê-lo em funcionamento em uma página a parte.

Publicamos no workshop de CSS outros artigos de interesse para mostrar como podem se realizar caixas projetadas com CSS com outros formatos.