4. Sombras

20/03/2013 | |

As lições vão facilitando depois que você entende direitinho as propriedades, então essa aqui vai ser a coisinha mais fácil do mundo. Nossa quarta lição é sobre sombras, então eu irei explicar os tipos e mostrar como é que se usa em caixas/imagens e em textos, elas ajudam bastante a dar um ar mais elegante ao seu design.

Primeiro vamos aos tipos, existem apenas dois: O interno e o externo, sendo o externo mais usado por ser aquele que se encaixa mais nos designs, mas a interna é a que dá um charminho nas caixinhas principalmente de sidebars e áreas de postagens. Não é nada difícil, elas são representadas por "shadow", mas mudam de acordo com o elemento a ser personalizado, principalmente de texto para outros elementos.

1. Sombra Outset

A sombra outset é a sombra externa comum que vemos sempre, ela pode ser usada em textos ou em caixas, imagens, o que vocês quiserem. Vamos ver qual a estrutura dela separadamente:

box-shadow: 1px 3px 7px #dddddd;

O número 1 indica a distância da sombra para a imagem de forma horizontal.

O número 3 indica a distância da sombra para a imagem de forma vertical.

O número 7 indica a quantidade de blur (aquele esfumaçado) presente na sombra.

E como já sabemos #dddddd é o código hex para a cor, lembrando que por ser todos com a mesma letra, podemos escrever também #ddd e tudo dará certo.

Box-shadow é a propriedade usada para aplicar sombras em caixas. se você quiser aplicar em um texto, deve modificar e deixar como text-shadow.









2. Sombra Inset

A sombra inset é a mesma que a outra, mas dessa vez ela fica por dentro do elemento e não por fora. Geralmente usamos em caixas, pois se usadas em textos, elas quase não aparecerão pela pequena escala obtida no seletor. Observe o código para que ela funcione:

box-shadow: inset 0 0 9px #999999;

A mesma coisa do anterior, mas possui a palavra inset antes dos valores e depois da propriedade. Muito simples. Por fim, a diferença para aplicar em um texto ou em uma caixa/imagem ambas as sombras é o uso de box-shadow ou text-shadow. Apenas isso e nada mais, é realmente simples. 



Antes que eu esqueça, existe esse código para usar as duas sombras no mesmo elemento, observem:

box-shadow: inset 0 0 9px #999999, 1px 3px 7px #dddddd;

Com certeza entenderam o código. A primeira parte antes da vírgula é a sombra inset e a segunda parte é a sombra outset. Para serem usadas no mesmo elemento é necessário que seja assim, juntas na mesma propriedade. Até a próxima lição!