text-shadow: 2px 2px 2px #FFF; (eixo x, eixo y, definição da sombra, cor)

Este exemplo acima é o que está sendo usado no primeiro parágrafo. O segundo parágrafo foi mudado apenas a cor. Não e só uma sombra que podemos mostrar, com um pouco de criatividade podemos fazer diversos estilos de sombras.

Abaixo alguns exemplos:

Ao trabalhar com cores, o css lhe permite utilizar os formatos hexadecimal (#FF9966) e RGB (rgb 125, 200, 34). No CSS 3 foi incluido um novo tipo de formato chamado HSL e o HSLA (semelhante ao RGBA).

Abaixo mostrarei as principais diferenças entre eles.

Hexadecimal

O hexadecimal possui apenas o valor referente a cor, utilizando o símbolo # no início de cada especificação de cor.

Exemplo:

RGB

O RGB possui três valores referente a cor, utilizando o formato rgb(red, green, blue) – vermelho, verde e azul, pode-se misturar a intensidade de cada cor e formar várias outras cores. Os valores utilizados devem ser de 0 (mais escuro) a 255 (mais claro).

rgb(0,0,0) = Preto;
rgb(255,255,255) = Branco (Mistura de todas as cores forma o branco);

Exemplo:

HSL (somente Browsers que suportem CSS 3)

O HSL é umas das novidades do CSS 3. Semelhante ao RGB, o HSL usa 3 valores: Hue (Matiz), Saturation (Saturação) e Lightness (Brilho, Luz e etc…).

A matiz é o grau da cor, sendo 0 ou 360 para o vermelho, 120 para o verde e 240 para o azul. Números entre cada valor determinam as diversas cores disponiveis. A saturação trabalha com porcentagem, sendo 100% para a cor real. O brilho ou luz também trabalha com valor em porcentagem, 0% é escuro (preto) e 100% é claro (branco).

Com esses valores a diversidade de cores é muito extensa.

Exemplo:

Quer saber mais sobre cores HSL, Clique aqui.

Até o próximo post!

O CSS (Cascading Style Sheet) ou folha de estilo em cascata (tradução para o português) é uma técnica simples para adicionar estilos (fontes, imagens, bordas, fundos e etc…) a elementos web.

Para não prolongar muito o assunto sobre os conceitos de CSS, recomendo o site www.maujor.com e www.css3.info que explica bem o uso do CSS e Web Standards.

Esta é uma sequência de 8 posts mostrando as principais novidades na utilização do CSS3. Abaixo mostraremos exemplos das principais novidades. OBS: nem todos os browsers são compatíveis com o CSS3, os exemplos abaixo foram testados no firefox 3.5.

border-color

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

  (continue reading…)