Aplicando efeitos de sombra com CSS 3

26/08/12     Web Design

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!



Novidades do BT por email

Coloque abaixo eu email para receber em primeira mão todas as novas matérias do BT, de tutoriais, cursos e inspirações!

Comente aqui

compartilhe
compartilhar no Facebook compartilhar no Twitter compartilhar no Linkedin compartilhar no Pintrest compartilhar no WhatzApp compartilhar no Skype compartilhar no pocket
Sobre o BT

Tudo começou com uma simples ajuda, um colega de trabalho estava tentando criar o seu álbum de fotos digital com uma música de fundo para poder dar de presente em seu casamento, até ai não tem nada ver com Bons Tutoriais, mas vamos chegar lá... Veja mais.

Patrocínio
Desenvolvimento de identidades visuais e estratégias de marketing digital
Recomendamos
AE Dicas Comunique 9 Minuto Design Mkt News Pixel Coffee Publicinove Revelando Ideias Sala7Design Tutorial Web Design
Criar um site

© Bons Tutoriais | Desde 2008 - Direitos reservados. ❤ Design | Ps+Ai+In | PHP+HTML+CSS | WordPress