Ponto Nulo » CSS

CSS 3 – Parte 03

Rodrigo Leite — Fri, 24 Jul 2009 18:30:27 +0000

Nesta terceira parte abordaremos os efeitos de textos. Não sei se repararam, mas o texto está com sombra branca. Caso não esteja visualizando o efeito então o seu browser não dá suporte ao CSS 3 ou a função mostrada aqui.

Para utilizar este estilo é bem simples, basta usar a função text-shadow. Esta função não é nova, alguns browser já a utilizavão no CSS 2 e com o CSS 3 a compatibilidade foi espalhada pelos browsers mais novos.

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:

text-shadow: 5px 5px 1px blue;

text-shadow: 50px 5px 1px rgb(255, 255, 255);

text-shadow: 0px 20px 1px yellow;

CSS 3 – Parte 02

Rodrigo Leite — Fri, 17 Jul 2009 16:54:43 +0000

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!

CSS 3 – Parte 01

Rodrigo Leite — Mon, 13 Jul 2009 20:14:05 +0000

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.

BORDERS

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;

Exemplo do código acima

border-radius

background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;

Exemplo 01.

Exemplo 02.

Exemplo 03.

Exemplo 04.

Até os próximos exemplos…