Propriedade box-shadow CSS
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]; |
- O deslocamento horizontal valor positivo a sombra estará à direita da caixa, um valor negativo colocará a sombra esquerda da caixa.
- O deslocamento vertical valor positivo a sombra estará à abaixo da caixa, um valor negativo colocará a sombra a cima da caixa.
- 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á.
- O raio de propagação (opcional), os valores positivos aumentam o tamanho da sombra, os valores negativos diminuem o tamanho.
- 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
