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.

Sombras

Desde a época em que está página foi criada até hoje muitas funcionalidades CSS foram implementadas entre elas as CSS3 criaram a propriedade 'box-shadow' que colocaram em desuso o método aqui mostrado. Consulte a página “Boxes com cantos arredondados e sombras” para constatar o método CSS3 de adicionar sombras. Aquela página mostra também um método mais poderoso porém mais complexo de adicionar sombras com uso das CSS2.

As CSS2 não prevêem uma propriedade para adicionar sombras em boxes. Você pode definir bordas à direita e embaixo do box para simular a sombra, mas o resultado não é apropriado. Contudo, se você tiver dois elementos aninhados será possível usar o elemento externo como sombra para o elemento interno. Observe a marcação HTML para um texto conforme mostrada a seguir: 

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

É possível usar o elemento DIV externo como sombra para o elemento DIV interno. O resultado será como mostrado nesta página. Primeiro defina para BODY uma cor de fundo clara (verde claro na página do exemplo), para o DIV externo uma cor de fundo mais escura (verde acinzentado na página do exemplo) e para o DIV interno outra cor de fundo (amarelo claro na página do exemplo), tudo como mostrado a seguir: 

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

A seguir defina margens e padding com a finalidade de deslocar o DIV interno para a esquerda e para cima em relação ao DIV externo, conforme mostrado a seguir: 

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

É necessário, ainda, mover o DIV externo um pouco para a direita e se houver múltiplas seções, provavelmente você precisará espaçá-las também: 

div.back {margin: 3em 0 3em 5em}

Basicamente é isso. Você pode definir bordas em volta do DIV interno se assim desejar. E, provavelmente definir também padding para eo DIV interno, conforme mostrado a seguir: 

div.section {border: thin solid #999; padding: 1.5em}

Obviamente o tamanho da sombra poderá ser definido conforme sua necessidade.

Sombra em textos

CSS prevê uma propriedade destinada a adicionar sombra em textos. Esta propriedade admite quatro argumentos: cor da sombra, deslocamento horizontal da sombra (valores positivos deslocam para a direita), deslocamento vertical da sombra (valores positivos deslocam para baixo) e o valor blur (esfumaçar, borrar) da sombra (valor 0 define sem esfumaçar). Observe o exemplo a seguir: 

h3 { text-shadow: red 0.2em 0.3em 0.2em }

Há uma sombra neste texto?

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2021 W3C® Privacy policy

Created 4 April 2002;
Last updated qua 06 jan 2021 05:40:49 UTC

Idiomas

Sobre traduções