Nesse exemplo iremos utilizar a propriedade box-shadow do CSS para inserir sombras em classes.

Antigamente quando queriamos colocar uma sombra em imagens ou divs eramos obrigados apelarmos para o Photoshop….

Hoje não, basta utilizamos box-shadow e boommm

1
2
3
4
5
.site{
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /*Opera*/
}

Vamos detalhar um pouco mais esse código

1
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. O deslocamento horizontal  valor positivo a sombra estará à direita da caixa, um valor negativo colocará a sombra  esquerda da caixa.
  2. O deslocamento vertical  valor positivo a sombra estará à abaixo da caixa, um valor negativo colocará a sombra a cima da caixa.
  3. O raio de borrão ajustando a  nitidez da sombra, quanto maior o número mais borrado será e mais longe a sombra se estenderá.
  4. O raio de propagação (opcional), os valores positivos aumentam o tamanho da sombra, os valores negativos diminuem o tamanho.
  5. Cor (obrigatório) – inserimos a cor da sombra.

Exemplo de sombra externa

1
2
3
4
5
.shadow {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Exemplo de sombra interna

1
2
3
4
5
.shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}

Abraçøs

Mariones Bross

Tags:,