Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Cantos arredondados e sombras em caixas

CSS3 vai ter propriedades para fazer cantos arredondados, fronteiras constituidas por imagens e caixas com sombras, mas com algum trabalho pode simular algumas destas propriedades com o CSS2 - e sem nenhum tabela ou Mar-up extra.

Esta página foi inspirada por uma criada por Arve Bersvendsen. Ele tem muitas mais demostrações interessantes de CSS.

Claro que cantos arredondados e sombras irão ser muito mais simples com CSS3. Por exemplo, para dar a um parágrafo uma fronteira espessa com cantos arredondados, vai precisar apenas de duas linhas de CSS3 como estas:

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

E para adiccionar uma sombra borrão em queda metade baixo e à direita do parágrafo, só uma linha é suficiente:

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

(Podes tentar aqui se já funcionar) Mas se quiser utilizar isto tudo já e não te importas com a complexidade e com a falta de flexividade, pode usar a técnica em baixo. No minimo é um bom teste para navegadores com defeitos.....

Cinco imagens em um elemento

O truque principal é usar conteúdo já gerado ('::before' e '::after') para por quatro imagens extras no elemento. O '::before' pseudo-elemento pode ter um fundo e uma imagem plano, e o '::after' pseudo-elemento também. O elemento pode ter um fundo num total de quatro imagens.

Criamos cinco imagens PNG, colocamo-las em quatro cantos. Aqui estão as imagens:

Canto superior esquerdo:

Limite e canto superior direito:

Parte média e limite direito:

Canto inferior esquerdo:

Limite inferior e canto direito inferior:

Aqui estão as regras CSS para as posicionar:

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) }

Porque a nossa imagem de fundo é 620px largura, não podemos permitir caixas maiores de que 629px, sem ter falhas. Isso é por a propriedade largura máxima está lá. A propriedade 'display:block' é necessária para assegurar que o conteúdo gerado forma as caixas por si próprio em cima e em baixo do conteúdo principal, em vez de ser inserido na primeira e última linha. A 'line-height:0' assegura que não existe espaço aberto à esquerda para subidas e descidas em cima e em baixo das imagens na propriedade 'content'.

O resultado

Aqui está o resultado:

O código HTML não é mais do que deve ser:

<blockquote>
<p>Vê uma caixa de verde pálido com cantos arredondados
e uma sombra em queda num fundo branco? Se não,
o teu navegador não está a gerar o conteúdo
correctamente(ou nem todo o conteúdo).

</blockquote>

Se quer testar se o seu navegador já suporta o CSS3, pode tentar aqui.