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
- Classe.
- Código em que chama o filtro de sombra.
- Valor X, ou seja o valor da horizontal, positivo = direita, negativo = esquerda.
- Valor Y, ou seja o valor da vertical, positivo = baixo, negativo = cima.
- Valor do Blur, ou desfoque.
- 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
