Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

Boxes com cantos arredondados e sombras

Esta página foi inspirada na página criada por Arve Bersvendsen. Aquele autor escreveu outras demonstrações CSS interessantes.

As CSS3 prevêem propriedades para criar bordas arredondadas, bordas com imagens e boxes com sombras e com algum trabalho extra você consegue simular parcialmente estes efeitos com CSS2 — e sem uso de tabelas ou marcação extra.

É correto afirmar que criar bordas arredondadas e sombras com uso das CSS3 é muito mais fácil que criar com uso das CSS2. Por exemplo: para criar uma borda espessa na cor vermelha com cantos arredondados em um parágrafo você precisa de apenas duas linhas de CSS3 conforme mostrado a seguir:

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

E, para criar uma sombra esfumaçada com espessura de 0.5em abaixo e à direita do parágrafo uma só linha de CSS é suficiente conforme mostrado a seguir:

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

(Você poderá constatar aqui e aqui a aplicação deste efeito.) Mas, se você pretende servir o efeito para navegadores antigos e não se importa com a complexidade e flexibilidade da solução use a técnica mostrada a seguir. Pelo menos isso servirá como um belo teste para verificar bugs nos navegadores…

Cinco imagens em um elemento

O segredo é usar conteúdo gerado (':before' e ':after') para adicionar as quatro imagens extras no elemento. O pseudoelemento ':before' pode receber uma imagem de fundo e uma imagem na marcação, o pseudoelemento ':after' também pode receber uma imagem de fundo e uma imagem na marcação e finalmente o próprio elemento pode receber uma imagem de fundo, completando as cinco imagens necessárias para obter o efeito.

Nós criamos cinco imagens PNG para colocar nos quatro cantos do box e no lado direito do elemento. Eis as imagens:

canto superior esquerdo:
top left corner
borda superior e canto superior direito:
top right corner
parte central e borda direita:
background and right edge
canto inferior esquerdo:
bottom left corner
borda inferior e canto inferior direito:
bottom and bottom right corner

E, 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 as imagens de fundo tem uma largura igual a 620px não será possível criar boxes com largura superior a 620px. Esta é razão para termos definido a propriedade 'max-width'. A declaração 'display: block' é necessária para garantir que os conteúdos gerados criem boxes acima e abaixo do conteúdo principal em lugar de serem simplesmente inseridos na primeira e na última linha daquele conteúdo. A declaração 'line-height: 0' garante que nenhum espaçamento seja criado acima e abaixo das imagens definidas para os conteúdos gerados.

O resultado final

Veja o resultado obtido para este efeito:

Você está visualizando um box em tom com bordas arredondadas e sobre um fundo branco? Se não, seu navegador não suporta conteúdo gerado de modo apropriado (ou talvez de modo algum).

A marcação HTML é a estritamente necessária conforme mostrado a seguir:

<blockquote>
<p>Você está visualizando um box em tom com bordas arredondadas e sobre um fundo branco?
Se não, seu navegador não suporta conteúdo gerado de modo apropriado (ou talvez de modo algum).
</blockquote>
Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2017 W3C®

Created 6 January 2004;
Last updated qui 09 nov 2017 04:40:59 UTC

Idiomas

Sobre traduções