Web Design

Aplicando efeitos de sombra com CSS 3

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

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.

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

text-shadow:#000 0px 1px 0, #999 0 -1px 0;color: #2b4c60;

Neon

Publicidade

text-shadow: 0 -2px 8px #0cf, 0 2px 8px #0cf, -2px 0 8px #0cf, 2px 0 8px #0cf;color: #Fff;

Multiplas Sombras Coloridas

text-shadow:0px -6px 0px #0f0, -6px 0px 0px #00f, 6px 0px 0px #f00, 0px 6px 0px #ff0;color: #Fff;

Texto em chamas

text-shadow:0px -6px 12px #f00, 0px -12px 12px #f60, 0px -18px 12px #fc0, 0px -24px 20px #ff9;color: #Fff;

Efeito de distancia

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!

Publicidade

0 Compart.
Compartilhar
Twittar
Compartilhar
Pin