Folhas de Estilo para Web
dicas & macetes CSS

Caixas com cantos arredondados e sombras

As recomendações CSS3 irão prever propriedades para construção de bordas arredondadas, no entanto você pode simular estes efeitos usando as propriedades já disponíveis em CSS2 — e sem uso de qualquer tabela ou marcação extra no código.

Esta página foi inspirada em uma página criada por Arve Bersvendsen. Ele desenvolveu várias outras demonstrações sobre CSS .

Sem dúvidas, construir bordas arredondadas e caixas (boxes) com sombra será uma tarefa bem mais simples com a implementação de CSS3. Por exemplo: Para colocar uma borda arredondada grossa na cor vermelha em um parágrafo, você terá que escrever regras CSS como abaixo mostrado:

P { border: solid thick red;
    border-radius: 1em }

E, para colocar uma sombra em um parágrafo, uma regra CSS apenas é suficiente, como mostrado abaixo, onde a cor da sombra é black x-offset e y-offset são 0.5em e com raio de 0.3em.

P { box-shadow: black 0.5em 0.5em 0.3em }

(Você pode tentar este link para constatar se estas propriedades já estão implementadas.) Mas, se precisar usar estes efeitos sem se preocupar se eles já foram ou não implementados e sem encontram suporte nos browsers, use a técnica mostrada a seguir.

Cinco imagens em um elemento

O uso da propriedade CSS2 "content", gerador de conteúdo antes e depois ('::before' e '::after') possibilita colocar quatro imagens extras em um elemento. O pseudo-elemento '::before' admite a colocação de duas imagens (uma imagem é o fundo do pseudo-elemento e a outra imagem é o próprio conteúdo a inserir), da mesma forma o pseudo-elemento '::after' admite a colocação de duas imagens e por fim o próprio elemento em si admite uma imagem de fundo, perfazendo um total de cinco imagens.

Usamos neste tutorial cinco imagens PNG colocando-as nos quatro cantos e no lado direito do elemento. Abaixo estão as imagens usadas:

canto superior esquerdo (top left corner):

borda superior e canto superior direito (top edge and top right corner):

parte central e borda direita (middle part and right edge):

canto inferior esquerdo (bottom left corner):

borda inferior e canto inferior direito ( bottom edge and bottom right corner):

E a seguir as regras CSS para posicionar as imagens:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote:before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote:after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Uma vez que construimos nossa imagem de fundo com 620px de largura não devemos permitir que o box possa distender-se além daquela largura, para evitar "aparecimento" de uma faixa branca no fundo. Por isto escrevemos uma regra para 'max-width'. A propriedade 'display: block' é necessária para garantir que os conteúdos gerados por "content" formem elementos nível de bloco e em consequência ocupem posição acima e abaixo do bloco principal e não, inseridos na primeira e última linhas. A regra 'line-height: 0' garante a não existência de espaçamentos horizontais extras entre as imagens de fundo.

O resultado

E, abaixo o resultado final:

O HTML é simplesmente, o mostrado a seguir:

<blockquote>
<p>Você vê uma caixa na cor verde com cantos 
arredondados e sombra, assentada em um fundo 
branco? Se não vê, seu browser não  consegue 
"entender" a propriedade CSS para gerar conteúdo
denominada "content".</p>
</blockquote>

E, mais ainda, se você quer saber se seu browser "entende" esta técnica com propriedades CSS-3, veja neste link.