A linguagem CSS tem como principal função estilizar uma página web, editando elementos HTML com a adição de bordas, cor, margens, etc. Por isso, caso queiramos adicionar alguma profundidade a uma componente do nosso site o CSS é o nosso melhor amigo, nomeadamente com a criação de sombras. Mas qual é o processo de introdução de sombras em CSS?
Podemos adicionar sombras a dois elementos de HTML: a caixas e a texto.
Para adicionarmos sombras a elementos caixa (divisões por exemplo), fazêmo-lo através do código seguinte (em CSS): box-shadow: "x"px "y"px "b"px "s"px cor; em que x representa um valor desejado em pixeis para distanciar a sombra para a direita do elemento e em que y representa um valor também em pixeis, mas desta vez para distanciar a sombra para baixo do elemento.
Por outro lado, o valor de b (em pixeis) é o que se dá para aumentar o esborratamento (blur em inglês) da sombra, já o valor de s (também em pixeis) estende mais a sombra para os valores de x e y que são dados à sombra, adicionando-se, finalmente, uma cor à sombra. É de notar que também podemos fazer com que a sombra seja representada no interior da caixa adicionando a palavra inset à linha de código (em primeiro lugar), obtendo assim um resultado semelhante ao seguinte:
O processo de adição de sombras a texto é semelhante ao de adição de sombras a uma caixa, não tendo, no entanto, a opção de se "esticar" a sombra (valor de "s"), nem a opção de se criar uma sombra interior.
Para os mais interessados em dar alguma profundidade a elementos de HTML, segue aqui um link de um software interativo, que permite entender as componentes desta propriedade de CSS: http://www.cssmatic.com/box-shadow
CSS3 Shadow Effects - Welookups
ResponderEliminar