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.
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.
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:
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 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);
background-image: linear-gradient(#291633 0%, #FFEBA3 50%, #D35529 100%);
background-image: linear-gradient(#FFC500 0%, #FFC500 50%, #D35529 50%, #D35529 100%)
background-image: radial-gradient(#D35529, #291633);
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 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);
box-shadow: -5px 5px 0 #00486F, -10px 10px 0 #000000;
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);
text-shadow: -2px 2px 0 #00486F;
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;
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;
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;
}
Gostou do post? Achou as informações úteis, ou falta alguma coisa? Comente e deixe sua opinião, vamos compartilhar informação 😉
