Sombra com CSS

Março 2nd, 2007

É comum vermos em sites, que usam ou não web standards, o efeito sombra. Vi uma sombra dia desses num site por aí e achei interessante como foi feita. Resolvi tentar fazer e agora quero compartilhar o resultado.

Antes de criarmos a sombra propriamente dita, precisamos conhecer um pouco sobre a propriedade background que é a que será usada nessa tarefa.
Como eu já disse nesse artigo, muitas propriedades em CSS podem (e devem) ser resumidas. Background está dividida em:

• background-attachment: trata se o background vai ou não “rolar” junto com a rolagem do browser
• background-color: define uma cor de fundo para os elementos
• background-image: define uma imagem de fundo para os elementos
• background-position: se uma imagem foi usada como background, define, ao mesmo tempo, as posições horizontal (em relação a margem esquerda) e vertical (em relação ao topo) dela em relação ao espaço de renderização
• background-position-x: mesmo que o anterior, mas trata apenas a posição horizontal
• background-position-y: mesmo que o anterior, mas trata apenas a posição vertical
• background-repeat: define como uma imagem deve ser repetida em seu espaço de renderização (essa vai ser usada em nosso exemplo da sombra).

Para não estender muito o artigo, vou usar em um exemplo, todas as propriedades e, em seguida, falamos da sombra.

Veja o exemplo nesse link. Nele eu usei (o css está embutido) as regras da seguinte maneira:

background-attachment:fixed;

background-image:url(fundo.gif);

background-position:center center;

background-repeat:no-repeat;

Vejamos uma por uma:

background-attachment:fixed; - mesmo que você role a tela, o fundo fica fixo.
background-image:url(fundo.gif); - imagem fundo.gif sendo usada .
background-position:center center; - o primeiro “center” refere-se a posição da imagem em relação à margem esquerda e o segundo, a posição em relação ao topo do espaço de renderização. Nesse caso matamos dois coelhos de uma só vez, caso contrário teríamos que usar background-position-x e background-position-y que possuem os seguintes valores respectivamente: left, center, right e top, center e bottom. Lembre-se de que esses valores podem ser especificados em pixel, porcentagem ou outra unidade de medida de sua escolha.

Imagine que você quisesse uma imagem a 150px da margem esquerda e 100px do topo da página. Usaríamos então:

background-position:150px 100px;

Você percebeu o quanto pode controlar o background com essas propriedades.

background-repeat:no-repeat; - Ao menos que o espaço de renderização tenha o mesmo tamanho da imagem, se você não especificar isso, a imagem é replicada por toda a área de renderização e o resultado vira uma loucura.

Ok, sobre background é isso.

Para falar da sombra eu vou direto ao assunto. Ok, se você olhou o arquivo, percebeu como a coisa é simples.

Uma imagem de 600px de largura por 3px de altura foi criada e a declaração background:url(sombra.gif) repeat-y; usada para aplicar o background.

Como a imagem tem apenas 3px de altura, o repeat-y (repetir no eixo y ou repetir verticalmente… com queira…), “espalha” a imagem para baixo dentro do espaço de renderização.

Bom, a dica sobre a imagem é a seguinte… No caso dessa imagem específica que é na cor preta, no canto direito (que é onde quero que fique a sombra), fiz um pequeno retângulo de 8px de largura e que recebe um preenchimento gradiente linear que vai do preto até o branco. Se ficou confuso, dê uma olhada no arquivo PNG para clarear um pouco a idéia.

É isso. Recomendo que você aproveite o arquivo de exemplo sobre a propriedade background e modifique as declarações no css para experimentar outros resultados.

Isso pode ajudá-lo a entender a propriedade, mas é sempre bom ter um livro para recorrer durante o aprendizado ou o trabalho.

Até o próximo.

Categoria(s): XHTML, CSS