Busca

Carregando...

segunda-feira, 23 de julho de 2012

CSS: sombras em caixas e imagens

Sombra

Exemplo de regra CSS para colocar sombra em uma caixa com a propriedade box-shadow:

.sombra {box-shadow:5px 10px 15px 6px #880088 inset;}

Valores:

  1. h-shadow (necessário) - Onde está escrito 5px você coloca a distância horizontal entre a sombra e o objeto, da esquerda para a direita se for uma sobra outset. Se quiser que a sombra fique à esquerda, o valor deve ser negativo.
  2. v-shadow (necessário) - Onde está escrito 10px você coloca a distância vertical entre a sombra e o objeto, de cima para baixo se for outset. Se quiser que a sombra fique acima, o valor deve ser negativo.
  3. blur (opcional) - Onde está escrito 15px você define o quanto a sombra ficará “esfumaçada” (borrada). Esse valor é opcional, se você não define ou escolhe 0px a sombra será totalmente opaca, com bordas lisas. Esta opção não aceita valores negativos.
  4. spread (opcional) - Onde está está escrito 6px você define o quanto a sombra será maior do que o objeto original. Para que a sombra seja menor que o objeto original, use número negativo. Esse valor também é opcional, mas você sempre terá que definir o blur se quiser definir o spread porque os valores são lidos sempre nessa ordem.
  5. color (necessário) - Onde está escrito #880088 você define a cor desejada para a sombra.
  6. inset (opcional) – O valor inset diz que a sombra será interna. Para que apareça a sombra externa não escreva nada depois da cor.

Exemplo de regra com outras propriedades para adicionar à folha de estilos:

.sombraroxa {box-shadow:5px 5px 10px #880088;
background:pink; padding:10px; margin:20px;}

Uso em uma <div>:

<div class='sombraroxa'>Exemplo de caixa com fundo rosa e sombra roxa.</div>

Como fica:

Exemplo de caixa com fundo rosa e sombra roxa.

Uso em uma imagem:

<div style="box-shadow:5px 5px 10px #880088; width:400px; height:267px; padding:0;"><img style='padding:0;margin:0;' src="http://lh5.googleusercontent.com/-3qGm7hN7fdo/SY8oQ1wCiEI/AAAAAAAADuc/Ef7nTyzFAR4/s400/borboleta.jpg"/></div>

Como fica:

Exemplo de imagem com sombra

Exemplo de regra para sombra inset:

<style>
.sombraverde {box-shadow:0px 0px 10px #008800 inset;
background:#ccff00; padding:10px; margin:20px;}
</style>
<div class='sombraverde'>Caixa verde com borda inset.</div>
Caixa verde com borda inset.

A propriedade box-shadow pode ser usada em outros elementos block. Leia também:

Até mais!

Imagem: Pergunte ao Fred
Fonte: W3Schools

Posts relacionados