Uma das vantagens mais interessantes que o CSS3 nos dá é a possibilidade de cada vez menos abrirmos o Photoshop. Não precisamos mais abrir o Photoshop para criar bordas arredondadas, gradientes e agora até mesmo sombras. Agora temos a possibilidade de inserirmos sombras em textos e em elementos. As propriedades tem nomes diferentes mas a mesma sintaxe. Veja abaixo:
[cc lang=”html”]
p {
text-shadow: 5px 5px 5px rbga(0,0,0,0.5);
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
[/cc]
Esqueça agora o nome da propriedade e entenda melhor seus parâmetros: colocamos 3 números e por último a cor. Na cor utilizamos RGBA para termos controle sobre o canal de transparência da cor. Você pode ver um artigo sobre RGBA neste link.
Agora vamos entender o significado dos números: os dois primeiros números se referem a posição da sombra: o primeiro número é referente a posição vertical começando pelo topo e o segundo número é referente a posição horizontal, começando pela esquerda.
O terceiro número se refere ao Blur. Sua sombra pode ser rígida ou “esfumaçada”. Isso depende do design que você criou o pegou para implementar. Você controla a rigidez da sombra por este número.
Praticamente todo o controle de sombra que você tem no Illustrator, você agora tem com o CSS3.
Na minha opinião pessoal há ainda algumas features que poderiam ser incluídas nessa especificação como por exemplo a possibilidade de colocarmos sombras apenas nos lados que quisermos e termos o controle individual das sombras. Mais ou menos como temos na propriedade border, onde podemos inserir borda apenas de um lado do objeto e podemos controlar as características dessa borda.
Você pode ver um exemplo em nosso Github. Lembre-se que codificar é de graça… Faça um teste agora, antes de deixar este post de lado. 😉
Apoio: Com o NET Combo você pode obter muitos descontos ao invés de contratar os serviços de forma isolada. Acesse e conheça todos os planos e saiba os descontos que pode obter com a operadora!