Page 58 - Locaweb - Edição 27

::lw_design
programação :: CSS3
Já a saturação e a luminosidade variam de 0% a 100% e
indicam o quão densa é a intensidade da cor (S) e a variação
de claridade (L).
color: hsl(225, 100%, 25%) /* Caso queira um azul de
tonalidade mais escura */
O HSLA, por sua vez, adiciona ao esquema HSL o
Alpha (opacidade), que varia de 0.0 (transparência total) a
1.0 (cor sólida, sem nenhuma transparência).
background-color: hsla(0,100%,50%,0.8);
Imagens para as bordas // O CSS3 oferece
a possibilidade do uso de imagens para as bordas de
um elemento na página, como uma div, por exemplo.
As imagens que serão usadas para decorar devem ser
elaboradas de maneira calculada, haja visto que deverá
haver uma consistência no "casamento" das partes
que forem compor a borda. Para uma adaptação ideal
à estilização por meio de CSS3, é importante que a
imagem que servirá de borda seja construída como
se fossem três linhas e três colunas de caixas com
exatamente a mesma medida. Isso impacta na hora
de usar o novo padrão de folhas para aplicar a borda
no objeto.
Cada parte representa: 1) Cantos, 2) Lateral
esquerda, 3) Lateral direita, 4) Superior e 5) Inferior.
As propriedades para se manipular as bordas são:
border-image-source: usado para se
apontar o caminho relativo até a imagem a ser
utilizada como borda.
Não encare o CSS3 como uma
panaceia. Afinal, os browsers
usam os mais variados motores,
e isso traz um cenário que,
inicialmente, não parece estar
livre de incompatibilidades
Imagem mostra pontos
de vista do HSL: a
saturação e a luminosidade
variam de 0% a 100% e
indicam o quão densa é a
intensidade da cor (S) e a
variação de claridade (L)
Diagrama indica áreas de borda com imagem, via CSS3,
que podem ser aplicadas a elementos da página
58