Cores, gradientes e sombras no CSS3

Algumas melhorias visuais que o CSS3 nos traz, e que facilitará o abandono do uso de imagens em algumas situações, são as (já não tão) novas propriedades para cores, gradientes e sombras. Vou explicar aqui cada uma delas, apresentando uma série de exemplos e de ferramentas que auxiliarão o nosso trabalho 🙂


CSS3 Colors

Existem várias formas de representarmos cores através do CSS. para entendermos um pouco melhor cada um deles, vamos dar uma rápida olhada no Seletor de Cores do Photoshop, onde vocês podem ver três modelos destacados.

Color Picker

O modelo RGB (Red, Green, Blue) é a forma que os monitores ou TVs utilizam para exibir as cores, ou seja, fazem uma combinação de luzes vermelhas, verdes e azuis. Trabalhando com 256 tons para cada cor (0-255), chegamos a mais de 16 milhões de cores.

O modelo HSL (Hue, Saturation, Luminosity) trabalha indicando a posição da matiz (hue) dentro do circulo cromático, indicando o nível de saturação da cor (saturation) entre 0% (cinzento) e 100% (saturado), e o nível de Luminosidade (que no Photoshop utiliza a letra B, para abreviar a palavra brightness), que determina o nível de luminosidade entre 0% (preto) e 100% (branco).

O modelo Hexadecimal utiliza algarismos de 0 a 9, e letras de A a F para representar em diferentes combinações os valores do RGB. No exemplo acima, temos o número Hexadecimal #E82336, onde E8 representa a tonalidade 232 de vermelho, 23 representa a tonalidade 35 de verde, e 36 representa a tonalidade 54 do azul.

No site http://hslpicker.com podemos selecionar uma cor em um seletor HSL, e ver a representação dessa cor nos três modelos citados, como nos mostra a imagem abaixo.

HSL Color Picker

O modelo Hexadecimal sempre foi o mais utilizado no CSS, pois além de mais compacto, não existiam vantagens na representação de outros modelos. Mas com o CSS3 esse cenário muda um pouco de figura, pois um novo elemento entra para fazer a diferença: o canal Alpha.

Canal Alpha nada mais é do que o nível de transparência que uma cor pode ter, em uma variação de 0 (transparente) a 1 (sólida). Com o CSS3, o canal Alpha pode ser representado nos modelos RGB e HSL, como podemos ver nos exemplos abaixo:

CSS3 Colors: Canal Alpha

Na imagem acima, o bloco azul está com uma porcentagem de transparência de 0.85, e podemos ver a aplicação desse efeito no modelo RGBA (onde o A representa o canal Alpha):

background-color: rgba(51, 102, 153, 0.85);

Também podemos chegar a esse valor no modelo HSLA:

background-color: hsla(210, 67%, 60%, 0.85);

O site http://24ways.org/ utiliza o modelo RGBA do CSS3 em vários elementos, como podemos ver abaixo:

body {
    color: rgba(14, 32, 59, 0.75);
    }

#navigation li a {
    background: rgba(170, 178, 192, 0.75);
    color: rgba(255, 255, 255, 0.75);
    }

#content {
    background-color: rgba(14, 32, 59, 0.5);
    }

CSS3 Colors: Canal Alpha


CSS3 Gradient

A criação de um plano de fundo gradiente sempre exigiu a utilização de imagens, em gradientes normalmente lineares na vertical ou horizontal, para que pudéssemos utilizar imagens pequenas como padrão.

Com o CSS3, podemos criar um efeito gradiente linear ou radial utilizando a propriedade background-image, especificando a posição de início de cada cor e até mesmo o grau de inclinação. Vejamos alguns exemplos.

background-image: linear-gradient(45deg, #291633, #D35529);

CSS3 Gradient

background-image: linear-gradient(#291633 0%, #FFEBA3 50%, #D35529 100%);

CSS3 Gradient

background-image: linear-gradient(#FFC500 0%, #FFC500 50%, #D35529 50%, #D35529 100%)

CSS3 Gradient

background-image: radial-gradient(#D35529, #291633);

CSS3 Gradient

Para você obter um código CSS para gradiente que funcione em todos os navegadores, uma boa opção é usar a ferramenta disponibilizada pelo pessoal do Colorzilla, no endereçohttp://colorzilla.com/gradient-editor/.

CSS3 Gradient Generator


CSS3 Shadow

Outro recurso visual que sempre precisou de usar imagens para se implementar, agora pode ser criado facilmente com CSS3, tanto em elementos de bloco como Divs quanto em textos.

box-shadow

Podemos aplicar sombra nos elementos de bloco com a propriedade box-shadow. Nela, especificamos quatro valores diferentes: [1] deslocamento da sombra a partir do topo, [2] deslocamento da sombra a partir da esquerda, [3] enevoamento da sombra e [4] cor. Também é possível adicionar várias sombras a um mesmo elemento. Veja alguns exemplos abaixo.

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.75);

CSS3 box-shadow

box-shadow: -5px 5px 0 #00486F, -10px 10px 0 #000000;

CSS3 box-shadow

text-shadow

Podemos aplicar sombra em textos da mesma forma que nos elementos de bloco, mas com a propriedade text-shadow. Os valores a serem aplicados são os mesmos: [1] deslocamento da sombra a partir do topo, [2] deslocamento da sombra a partir da esquerda, [3] enevoamento da sombra e [4] cor. Veja alguns exemplos abaixo.

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);

CSS3 text-shadow

text-shadow: -2px 2px 0 #00486F;

CSS3 text-shadow

Um post no blog Line25 nos mostra diferentes exemplos de como aplicar sombras em textos. Abaixo vemos alguns dois desses exemplos:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

CSS3 text-shadow

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

CSS3 text-shadow

O site do evento BeerCamp SXSW 2010 é um outro grande exemplo do uso de sombras com CSS3. Alias, todas as ilustrações deste site são criadas apenas com CSS3. No logo do site, cada letra possui valores diferentes para a sombra, tento várias sombras aplicadas simultaneamente. Abaixo você pode ver a imagem do logo, e o código usado na primeira letra (B).

h1 .b {
   text-shadow:
       0 0 #FFEE88,
       0 2px #EEBB00,
       0 1px #FFEE88,
       0 3px #EEBB00,
       -1px 2px #FFEE88,
       (...)
       -4px 26px #EEBB00;
}

CSS3 text-shadow


Gostou do post? Achou as informações úteis, ou falta alguma coisa? Comente e deixe sua opinião, vamos compartilhar informação 😉

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Rolar para cima