Aplicando efeitos de sombra com CSS 3

26/08/12     Web Design




Anuncie aqui

Pessoal neste post eu estarei mostrando algumas da funcionalidades do CSS3 e aplicações que te ajudarão bastante quando você for criar o seu próprio layout de blog ou site, antes de tudo o CSS3 é incompatível com o Internet Explorer, já os outros navegadores como Firefox e Chrome, já são compatíveis com CSS3, em algumas notícias recentes diz a Microsoft que a partir do IE 9 já estará compatível com o CSS3, isto é uma coisa que a Microsoft deveria já ter resolvido a muito tempo.

Então vamos deixar de falatório e ir ao que interessa. Nos tutoriais eu coloquei os exemplos em foto para que você não tenha problemas de incompatibilidade caso você tenha o IE 6, 7 e etc…

Neste primeiro tutorial sobre CSS3 estarei mostrando aplicações em texto, neste caso sombras,

Aplicando sombra em textos com CSS3

Aplicando sombras em textos com css3

Para aplicarmos sombras em textos com CSS é só usar o código abaixo em seu estilo:

text-shadow: 2px 2px 5px #000; color:#FFF;

Entendendo a estrutura do código, abaixo eu estou mostrando um exemplo de como o código funciona.

Aplicando sombras em textos com css3

Legenda

  1. Classe.
  2. Código em que chama o filtro de sombra.
  3. Valor X, ou seja o valor da horizontal, positivo = direita, negativo = esquerda.
  4. Valor Y, ou seja o valor da vertical, positivo = baixo, negativo = cima.
  5. Valor do Blur, ou desfoque.
  6. Aqui você coloca a cor que será a sombra.

Abaixo eu estou colocando alguns exemplos do que podemos fazer com o filtro de sombra juntamente com o respectivo código;

Relevo

Aplicando sombras em textos com css3
text-shadow:#000 0px 1px 0, #999 0 -1px 0;color:#FFF; color:#f2f2f2;

Neon

Aplicando sombras em textos com css3
text-shadow: 0 -2px 8px #0cf, 0 2px 8px #0cf, -2px 0 8px #0cf, 2px 0 8px #0cf;color: #Fff;

Multiplas Sombras Coloridas

Aplicando sombras em textos com css3
text-shadow:0px -6px 0px #0f0, -6px 0px 0px #00f, 6px 0px 0px #f00, 0px 6px 0px #ff0;color: #Fff;

Texto em chamas

Aplicando sombras em textos com css3
text-shadow:0px -6px 12px #f00, 0px -12px 12px #f60, 0px -18px 12px #fc0, 0px -24px 20px #ff9;color: #Fff;

Efeito de distancia

Aplicando sombras em textos com css3
text-shadow:-4px -4px 0px #ccc, -8px -8px 0px #999, -16px -16px 0px #666;color: #Fff;

Espero que eu tenha ajudado, até o próximo tutorial de CSS!

Receba atualizações grátis do bt no seu E-mail

Temos total respeito com você, nunca enviaremos spam, ok? Apenas nossas novas matérias, basta colocar seu email abaixo e depois realizar sua confirmação via email, simples assim :-D

Victor Brito

Diretor de criação amante da área de Branding, fundador do blog Bons Tutoriais onde compartilha suas experiências com artigos sobre Design Gráfico, Web Design e outras coisas mais. Você pode encontrá-lo postando no Publicinove ou em sua agência - Criativito Comunicação.

865 posts publicados
veja todos aqui.

Comente aqui

© Bons Tutoriais | 2008 - 2016 todos os direitos reservados. Design e Desenvolvimento Criativito Comunicação | Plataformas: WordPress & Bootstrap