CSS 3

CORES E OPACIDADE

121

casa decimal: rgb(80.5%,23.6%,15.4%). O valor 255 corresponde a 100%, e a F ou FF em hexadecimal.

Trabalhar com o sistema hexadecimal é bastante complicado para quem não o conheça. Contudo, a calculadora do Windows permite fazer uma conversão rápida entre o sistema decimal e o sistema hexadecimal. Além disso, todos os programas atuais de desenho, como o Adobe Photoshop, apresentam o valor hexadecimal de uma cor.

Os valores RGB nunca foram muito utilizados em propriedades CSS, algumas vezes por desconhecimento, outras pelo mau suporte no passado apresentado por alguns browsers.

4.2.3

MODELO DE CORES HSL

A maioria dos web designers acha que o modelo RGB não é intuitivo, dado que é orientado para o hardware, refletindo a utilização dos antigos monitores CRT. No modelo RGB, quando queremos criar uma paleta de cores compatíveis, temos de localizar a notação RGB correta para a cor base e depois, para obter variações na matiz (hue), temos de alterar o valor de uma das cores primárias.

Para obter uma cor mais saturada ou escolher cores dentro de uma determinada paleta, temos de procurar as cores, dado que não basta alterar as percentagens.

O modelo HSL (hue, saturation, lightness), permite uma forma mais rápida e intuitiva de construir uma paleta de cores ou de selecionar a cor pretendida.

Como base é escolhida a matiz (hue). Depois, as percentagens de saturação e luminosidade podem ser modificadas de forma independente utilizando percentagens. Obtemos assim um conjunto de cores compatíveis.

As cores HSL são codificadas como um valor triplo, hue, saturation, lightness, como se pode ver na figura 4.1.

O valor para a matiz (hue) é um valor inteiro sem unidade, enquanto os valores para a saturação e luminosidade são especificados em percentagens.

A matiz é representada como um ângulo do círculo de cores (implicitamente medido em graus) que representa o arco-íris. Existem seis cores principais no círculo cromático HSL que estão espaçadas por ângulos de 60 graus (ver figura 4.2): red, yellow, green, cyan, blue e magenta.

© FCA – Editora de Informática

122

CSS3

FIGURA 4.1 – Modelo de cores HSL (imagem a cores disponível no verso da contracapa)

w– llo e Y

–3 00 º

4 –2

0º

Cyan – 180º

ue Bl

Red – 0º

Ma ge n ta

Gr ee

n–

º 60

12

0º

FIGURA 4.2 – Cores principais no modelo HSL (imagem a cores disponível no verso da contracapa)

A quantidade de cor utilizada, isto é, a saturação (saturation) é definida como uma percentagem na qual 100% é a saturação completa e 0% é um nível de cinzento. Pode também ser vista como a quantidade de cinzento “existente” na cor. Na luminosidade, 0% é preto, 100% é branco e 50% é uma luminosidade normal.

No modelo HSL, quando a saturação está a 100% e a luminosidade a 50% obtém-se uma matiz pura: hsl(0, 100%, 50%) – red; hsl(60, 100%, 50%) – yellow; © FCA – Editora de Informática

CORES E OPACIDADE

123

hsl(120, 100%, 50%) – green; hsl(180, 100%, 50%) – cyan; hsl(240, 100%, 50%) – blue; hsl(300, 100%, 50%) – magenta.

Mas, e se pretendermos uma cor diferente destas, como o roxo? O roxo está a meio caminho entre o azul (240°) e o magenta (300°), por isso, escolhemos o meio-termo, 270°. Se acharmos que deve ser mais azul, aproximamos o ângulo do azul, ou, para ter menos azul, aproximamo-lo do magenta.

Como já referimos, uma grande vantagem da utilização de cores HSL é a criação de paletas de cor. Depois de selecionarmos uma cor base, podemos ajustar os níveis de saturação e luminosidade para criar essa paleta.

Para exemplificar, comecemos com a cor lime (hsl(120, 100%, 50%)) e, variando apenas a luminosidade dois níveis mais escuro e dois níveis mais claro (cap4/color.html), #paleta1 { … background-color: } #paleta2 { … background-color: } #paleta3 { … background-color: } #paleta4 { … background-color: } #paleta5 { … background-color: }

hsl(120, 100%, 80%);

hsl(120, 100%, 65%);

hsl(120, 100%, 50%);

hsl(120, 100%, 35%);

hsl(120, 100%, 20%);

conseguimos criar uma paleta de cores (ver figura 4.3). © FCA – Editora de Informática

124

CSS3

FIGURA 4.3 – Paleta de cores criada com valores HSL (imagem a cores disponível no verso da contracapa)

Um ponto importante a reter é que se consegue as mesmas cores no modelo HSL do que no modelo RGB. Contudo, a forma de se especificar a cor é diferente.

O Adobe Photoshop utiliza um modelo de cores HSB (hue, saturation, brightness), que é uma variante do modelo HSL. Tenha cuidado pois não pode utilizar estes valores diretamente em propriedades CSS.

O suporte do modelo HSL nos browsers é o apresentado na tabela 4.3.

9.0+

3.0+

Pelo menos desde a versão 4.0

3.1+

10.0+

3.2+

2.1+

10.0+ 5.0+ no Opera Mini

TABELA 4.3 – Suporte do modelo HSL nos browsers

Devemos sempre incluir uma cor de fallback que não seja especificada utilizando o modelo HSL, de forma a suportar os browsers mais antigos.

Por exemplo: p { color: rgb(85,0,128); color: hsl(280,100%,50%); }

4.2.4

WEB SAFE COLORS

Um dos conceitos mais persistentes ao nível da utilização da cor em sítios Web é o de browser safe palette. Nos primórdios da World Wide Web, a maioria © FCA – Editora de Informática

158

CSS3

Em agosto de 2009 a Mozilla anunciou que o Firefox 3.6 suportaria uma implementação de gradientes, ligeiramente diferente do WebKit e baseada na utilização de gradientes no SVG. O Cascading Style Sheets Working Group (CSSWG) do W3C mostrou interesse, e Tab Atkins Jr, um membro desse grupo, redigiu uma proposta que utilizava uma sintaxe mais simples. Pouco tempo depois, em novembro de 2009, chegou-se a um consenso para adicionar gradientes ao módulo CSS I M A G E V A L U E S , utilizando uma sintaxe muito próxima da proposta por Tab Atkins Jr. Antes de o Firefox 3.6 ser lançado, a Mozilla adotou esta especificação.

Até à versão 5.1, lançada em meados de 2011, o Safari ainda só suportava a versão antiga, isto é, a versão proprietária.

5.3.3

GRADIENTES CSS3

Uma das vantagens da utilização de gradientes CSS nativos é que não existe um pedido HTTP extra para a imagem e é extremamente rápida a alteração de um gradiente, sendo assim mais flexível. Outra vantagem reside no facto de ser escalável, isto é, a possibilidade de aplicar gradientes a imagens sem dimensões predefinidas é intrínseca.

Como os gradientes CSS são criados de forma declarativa, se quisermos ajustar as cores basta alterá-las na propriedade CSS onde está especificada, sem necessidade de utilizar um programa de desenho como o Photoshop. Além disso, podemos alterar os valores interativamente, ou mesmo criar animações, recorrendo a JavaScript.

A desvantagem em relação à utilização de imagens é que não existe a utilização da sintaxe W3C na maioria dos browsers, dado que ainda recorrem aos prefixos.

Os gradientes são definidos no módulo CSS I M A G E V A L U E S A N D R E P L A C E D C O N T E N T (http://www.w3.org/TR/css3-images/). Esta especificação declara que um gradiente pode ser utilizado em qualquer propriedade onde se pode utilizar uma imagem: background-image (tem o melhor suporte); border-image; list-style-image; © FCA – Editora de Informática

BACKGROUNDS E GRADIENTES

159

cursor; content;

etc.

Na prática, muitos browsers têm limitações na aplicação de gradientes, e a maioria das vezes só os permite na propriedade background-image.

Nenhum browser suporta ainda a especificação do W3C, isto é, sem prefixos (ver tabela 5.5).

Sintaxe específica com filtros desde a versão 5.5 10+ Sintaxe W3C com prefixo -ms

3.6+ Sintaxe W3C com prefixo -moz

3.0+ Sintaxe antiga com prefixo -webkit

4.0 Sintaxe antiga com prefixo -webkit

10+ Sintaxe W3C com prefixo -webkit

5.1+ Sintaxe W3C com prefixo -webkit

11.10+ Sintaxe W3C com prefixo -o Apenas gradientes lineares 11.60+ Suporte completo com prefixo -o

3.2+ Sintaxe antiga com prefixo -webkit

2.1+ Suporte parcial com prefixo -webkit

5.0+ suporte completo com prefixo -webkit

4.0+ suporte completo com prefixo -webkit

Gradientes lineares com sintaxe W3C – 11.10+ com prefixo -o Sem suporte no Opera Mini

TABELA 5.5 – Suporte de gradientes nos browsers

5.3.3.1 TIPO DE GRADIENTES

Existem dois tipos de gradientes: Linear – constituído por linhas paralelas normalmente verticais ou horizontais, podendo ser linhas diagonais (figura 5.19);

FIGURA 5.19 – Gradiente linear © FCA – Editora de Informática

160

CSS3

Radial – baseado em círculos, mais concretamente em elipses concêntricas (figura 5.20).

FIGURA 5.20 – Gradiente radial

O WebKit e o W3C utilizam sintaxe diferente e um modelo diferente para o que um gradiente deve ser. A implementação do W3C utiliza duas funções distintas para cada tipo de gradiente (linear-gradient e radial-gradient), enquanto o WebKit utiliza apenas uma única função (-webkit-gradient) com dois valores do primeiro parâmetro (linear e radial).

5.3.4

GRADIENTES LINEARES

Dado que nenhum browser suporta ainda a especificação do W3C para os gradientes CSS3, isso significa que existem diversas sintaxes que atualmente têm mais que ver com o nome da propriedade do que propriamente com a definição do gradiente.

A sintaxe da norma CSS3 para um gradiente linear é: linear-gradient( [<ponto> || <ângulo>,]? <cor>, <cor> [, <cor>]* )

Na sua forma mais básica, só temos de especificar uma cor de início e uma cor de fim. É disso exemplo (cap5/gradientes-simples.html) o resultado na figura 5.21: background: linear-gradient(#f09, black)

FIGURA 5.21 – Gradiente linear com a sintaxe W3C

© FCA – Editora de Informática

BACKGROUNDS E GRADIENTES

161

Nesta forma mais básica, pressupõe-se que o gradiente seja vertical começando no topo. Na especificação da cor, podem-se utilizar valores hexadecimais, nomes de cores, valores RGB, RGBA, HSL e HSLA. O Firefox utiliza a mesma sintaxe da norma, só que recorre ao prefixo -moz, e os gradientes apenas podem ser aplicados às propriedades background e background-image.

O Opera, a partir da versão 11.10, adotou os gradientes CSS3 utilizando o prefixo -o, embora pelo menos até à versão 11.5 (inclusive) só suporte gradientes lineares. Os gradientes do Opera apenas podem ser aplicados às propriedades background e background-image.

O Internet Explorer, a partir da versão 10, suporta a sintaxe do W3C, utilizando o prefixo -ms.

Até à versão 10 do Chrome e 5.1 do Safari, era utilizada uma sintaxe específica do WebKit, do tipo: -webkit-gradient(<tipo>, <ponto>, <ponto> [, <cor>]*)

Como exemplo de utilização (cap5/gradientes-simples.html): #gradiente1 { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7)); …

O primeiro valor é o tipo de gradiente que pode ser linear ou radial. Em seguida aparecem as posições. Pode utilizar-se os valores ‘left top’, ‘right top’, ‘left bottom’, ‘right bottom’ ou coordenadas x/y. As coordenadas são pares de posições de início (0% 0%) e de fim (0% 100%). Os gradientes lineares são desenhados ao longo do caminho entre estes dois pontos, o que permite alterar a direção do nosso gradiente simplesmente alterando os pontos de início e de fim. Os dois últimos parâmetros definem as cores de início e de fim.

Esta sintaxe permite um controlo mais preciso relativamente aos gradientes, mas é bastante mais complexa do que a sintaxe do W3C. Na implementação do WebKit, os gradientes CSS podem ser adicionados às seguintes propriedades: background-image; border-image; © FCA – Editora de Informática

8

TRANSFORMAÇÕES, TRANSIÇÕES E ANIMAÇÕES 8

O JavaScript foi utilizado inicialmente para criar animações em páginas Web. Mais tarde, o Flash da Adobe ocupou esse lugar, que tem mantido desde então.

Com a evolução do JavaScript e o aparecimento de bibliotecas, como a jQuery, tornou-se outra vez moda criar animações em JavaScript. Com as transformações, transições e animações CSS3, o W3C pretende passar parte dessas animações para as CSS, evitando assim que os web designers tenham de programar em JavaScript.

8.1

TRANSFORMAÇÕES

As CSS nunca possibilitaram grande interatividade com o visitante de uma página. O máximo que se conseguia era trocar uma imagem por outra, aproveitando a pseudoclasse :hover. Esta técnica é conhecida na gíria por rollover, sobretudo quando é aplicada para simular botões. Mesmo assim, podiam criar-se efeitos visuais bastante agradáveis. O problema é que se tinha sempre de criar uma nova imagem sempre que se pretendia alterar o efeito.

O módulo CSS 2 D T R A N S F O R M S (http://www.w3.org/TR/css3-2dtransforms/) das CSS3 permite que diversas transformações (por exemplo, rotações) sejam aplicadas a todos os elementos HTML, sem necessidade de utilizar JavaScript ou outra tecnologia.

Quando se efetuam transformações CSS num elemento, o resto do conteúdo da página não é afetado, nem mesmo outros elementos que interajam com o elemento que é transformado. As transformações CSS são assim parecidas com o posicionamento relativo (isto é, com elementos posicionados através da propriedade position com o valor relative). Uma das consequências é que o layout da página não é afetado, dado que as transformações ficam por cima do conteúdo normal. © FCA – Editora de Informática

254

CSS3

Além do tradicional efeito de rollover, as transformações podem ser utilizadas, por exemplo, para criar texto vertical ou na diagonal, ou para produzir efeitos especiais quando se passa com o rato por cima dos itens de um menu.

O suporte nos browsers das transformações é o apresentado na tabela 8.1.

9.0+ com prefixo -ms

3.5+ com prefixo -moz

Pelo menos desde a versão 4.0+ com prefixo -webkit

3.1+ com prefixo -webkit

10.5+ com prefixo -o

3.2+ com prefixo -webkit

2.1+ com prefixo -webkit

11.0+

TABELA 8.1 – Suporte das transformações nos browsers

As transformações CSS3 são bastante exigentes em termos de performance. A maioria dos browsers não suporta aceleração por hardware, o que significa que são efetuadas no CPU. Se uma página tiver muitas transformações a serem efetuadas em simultâneo, a performance degrada-se. Os novos browsers, como o Internet Explorer 9, já suportam aceleração por hardware, o que melhora muito a performance.

8.1.1

PROPRIEDADE TRANSFORM

A propriedade transform descreve uma função bidimensional (2D) que pode ser aplicada a qualquer elemento HTML do tipo block-level ou inline-level, incluindo, entre outros, imagens, texto ou mesmo vídeo HTML5. A sintaxe desta propriedade é: transform: função(valores);

As funções que podemos utilizar, semelhantes às permitidas em SVG, são: rotate – rodar um elemento; translate – mover um elemento; skew – distorcer um elemento; scale – aumentar ou diminuir o tamanho de um elemento; matrix – efetuar transformações complexas num elemento. © FCA – Editora de Informática

TRANSFORMAÇÕES, TRANSIÇÕES E ANIMAÇÕES

255

Estes efeitos podem ser aplicados utilizando a pseudoclasse :hover para que a transformação seja o resultado da interação de um utilizador com o elemento: #botao:hover { transform: rotate(45deg); }

Neste exemplo, o elemento é rodado 45° quando o visitante da página passa o cursor por cima do elemento.

8.1.1.1 FUNÇÃO ROTATE

Uma das funções que se pode utilizar para efetuar uma transformação de um elemento é rotate, que roda um elemento. Como estamos a trabalhar a duas dimensões, isto é, utilizando os eixos dos X e dos Y, apenas podemos rodar num plano à volta do eixo dos Z, que é perpendicular ao ecrã. Só nas transformações 3D é que podemos rodar em vários eixos.

O valor passado para esta função corresponde ao ângulo de rotação, que tem de ser especificado utilizando rad para radianos (radians), deg para graus (degrees) e grad para grados (grads). Por exemplo: transform: rotate(45deg);

A rotação é efetuada na direção dos ponteiros do relógio. Caso utilizemos valores negativos, então a rotação será efetuada na direção contrária à do movimento dos ponteiros de um relógio. Normalmente especifica-se um ângulo entre os 0 e os 360°. Contudo, é possível especificar valores superiores para criar efeitos de rotação, mas que só são visíveis quando também se aplicam, aos elementos transformados, as transições CSS. Partindo da primeira imagem da figura 8.1, obtemos a segunda imagem quando aplicámos uma rotação de 135° (cap8/transforms_rotate.html): #exemplo1 { transform: rotate(135deg); } Um dos problemas das primeiras versões dos browsers que começaram a suportar esta propriedade era o da falta de suavização (smoothing e antialiasing) das linhas retas e do texto, sobretudo em ângulos menos habituais, como 105°. Versões mais recentes já começaram a tentar resolver este problema. © FCA – Editora de Informática

256

CSS3

FIGURA 8.1 – Aplicação da função rotate

Esta transformação é efetuada tendo como ponto de rotação, por predefinição, o centro do elemento (figura 8.2).

FIGURA 8.2 – Centro de um elemento

A rotação é efetuada no eixo dos Z, isto é, perpendicular ao plano do ecrã.

8.1.1.2 FUNÇÃO SKEW

A função skew permite inclinar um elemento, como se fosse desenhado ou escrito em itálico. O valor que é passado para a função também é um ângulo e, por isso, pode ser especificado utilizando uma de três unidades possíveis: rad para radianos (radians), deg para graus (degrees) e grad para grados (grads). O ângulo tem que ver com a inclinação, como se pode ver na figura 8.3.

25º

FIGURA 8.3 – Inclinação utilizada numa função skew com um valor de 25deg

© FCA – Editora de Informática