Tableless - Desenvolvimento inteligente com Padrões Web

16/06/2011
CSS

CSS3 – Sombras em textos e elementos

Sombras em elementos e textos. O CSS3 nos trouxe essa possibilidade. Saiba como funciona as propriedades text-shadow e box-shadow.

Por

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:

1
2
3
4
p {
    text-shadow: 5px 5px 5px rbga(0,0,0,0.5);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

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. ;-)

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.laurapausinibrasil.com Deivid Marques

    Mas o text-shadow nao pega no IE-7/8e aí tem design q nao deixa a gente usar no desenvolvimento ja q vai ficar diferente. Ai tenho q criar dois textos e 1 com absolute, mó trampo. Mas vlw a Dica!!

  • Robson Sobral

    Na verdade, o primeiro número, como é padrão no CSS, é para o eixo X e o segundo para o eixo Y. Primeiro horizontal e depois vertical. Da especificação:
    “The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
    The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.”
    http://www.w3.org/TR/css3-background/#the-box-shadow

    Ainda podemos colocar mais de uma sombra, separadas por vírgula. É como o truque de simular prensa tipográfica no texto funciona: uma sombra escura para cima e uma clara para baixo.

    Não entendi seu desejo de colocar sombra só de um lado.

  • http://tutsmais.com.br/blog/ Ofelquis

    É o post é bom, e o comentário acima também.

  • http://twitter.com/gustavaum Gustavo

    Eu já comecei a usar em muitos projetos, independente dos browsers… E,ótimo artigo!

  • Hugo Fittipaldi

    Oi Diego,
    Na verdade existe ainda um quarto parâmetro que indica a distância da borda: box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.5) e quando quero fazer a sombra só de um lado (no caso de box), eu ponho o valor negativo nele e zero no lado que eu quero sumir (box-shadow: 10px 0px 10px -10px rgba(0,0,0,0.5)).

  • Pingback: CSS3 – Texturizando textos | Tableless

  • Pingback: WebPatterns – Seu site nos padrões WEB » Archive » CSS3 – Texturizando textos