Com a constante mudança da internet e dos padrões do W3C, vamos falar um pouco sobre a nova tendência da web: Criar sombras com CSS3, o "text shadow".
Essa nova propriedade do CSS já estava sendo analisada a muito tempo atrás pelo W3C em sua seção 16.3.2 sobre colocar efeitos de sombra em textos. Já é possível notar sinais de uma movimentação efetiva no sentido de acelerar os estudos para efetivar as CSS3 como uma Recomendação oficial do W3C. É certo que há muito trabalho pela frente, contudo alguns módulos das CSS3, embora ainda em fase de rascunho de trabalho, já começam a ser implementados em alguns navegadores, proporcionando à comunidade um meio de testar as novas propriedades e opinar sobre elas.
Bom, vamos a sintaxe geral desta propriedade:
seletor {
text-shadow: medida-1 medida-2 medida-3 cor;
}
Onde:medida-1
: é o deslocamento da sombra para a direita (valor positivo) ou para a esquerda (valor negativo);medida-2
: é o deslocamento da sombra para baixo (valor positivo) ou para cima (valor negativo);medida-3
: é o raio para um efeito blur na sombra;cor
: é a cor da sombra.
Suponhamos q nosso código HTML seja o seguinte:
HTML: <h1>Construindo sites com CSS e (X)HTML</h1> CSS: h1 { font-size:30px; color:black; text-shadow: 2px -2px lime; }
o código renderizado ficará da seguinte forma:
Construindo sites com CSS e (X)HTML
Por enquanto, podemos utilizar box-shadow nas versões mais modernas do navegador Opera. Por sua parte, navegadores baseados em Mozilla e WebKit
têm suporte a esta funcionalidade de CSS3, porém, através de uns atributos CSS com uma ligeira variação em seu nome.
Para o Firefox, por exemplo, temos q escrever o código da seguinte forma:
-moz-box-shadow: 1px 1px 0px #090;
Nos navegadores webkit, tipo Google Chrome e Safari desta forma:
-webkit-box-shadow: 3px 3px 1px #fc8;
Bom, isso é apenas uma prévia de como podemos utilizar o text-shadow em nossas páginas...
Existem vários exemplos de combinações de sombra e efeitos, é só testar!
seguem os sites que tirei a inspiração para criar este post:
http://www.maujor.com/tutorial/css3-text-shadow.php
http://www.criarweb.com/artigos/sombras-em-css3-com-box-shadow.html
Valeu!!
Fala Brother!
ResponderExcluirRespondi seu comment por lá mesmo.
Abraço!