Laboratório de InformáticaPropriedades CSS:Cores

1º Semestre 2009 > PUCPR > BSI

Bruno C. de Paula

Resumo da aula

Após finalizarmos nosso trabalho com os seletores do CSS, é chegado o momento de conhecer as principais propriedades do CSS;Nosso objetivo hoje será conhecer as propriedades que lidam com cores.

324/04/23

Material referente ao assunto da aulaTutorial sobre cores em CSS:–http://www.maujor.com/tutorial/cores.php

Recomendação W3C do CSS 3 (cores) (em Inglês):–http://www.w3.org/TR/css3-color/

Capítulo do Livro CSS – Guia de Bolso:–http://altabooks.tempsite.ws/capitulos

_amostra/00_cssbolso.pdf

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c

apítulo.

424/04/23

Ferramentas de corColor Picker / Color WheelExtensão para Firefox:– http://www.colorzilla.com/firefox/– https://addons.mozilla.org/en-US/firefox/

addon/60Online:– http://www.colorpicker.com/– http://www.workwithcolor.com/doughnut-

color-picker-01.htm– http://www.febooti.com/products/iezoom/on

line-help/online-color-chart-picker.html– http://www.ficml.org/jemimap/style/color/w

heel.html524/04/23

Ferramentas de corColor Blender:– http://meyerweb.com/eric/tools/color-blend/

Referências sobre cores:–http://www.morecrayons.com/

624/04/23

724/04/23

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

824/04/23

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

924/04/23

Exemplos da aulaCor em #RRGGBBCor em #RGBCor em rgb(rrr.rr%, ggg.gg%, bbb.bb%)Cor em rgb(rrr, ggg, bbb)Cor como palavra-chave;Cores do sistema operacional;Cores em rgba(rrr,ggg,bbb,a) ;Cores em hsl(h, s%, l%).

Cada cor tem um significado e uma personalidade

1024/04/23

A cor é essencial para a apresentação de um sitee pode ser representada de maneiras diferentes

1124/04/23

Na tela do computador as cores são aditivas (cor luz)Mistura de intensidades de:–Vermelho (red);–Verde (green);–Azul (blue).

1224/04/23

Monitores apresentam as cores de maneira diferenteCores de 8 bits (256 cores): – raro hoje em dia;–usar paleta web safe (216 cores).

Cores de 16 bits (65 mil cores):–usar paleta web smart (4096 cores).

Cores de 32 bits (16 milhões):–16 milhões de cores;–Liberdade na escolha da cor.

1324/04/23

Notação de cor em CSS#RRGGBB;#RGB;rgb(rrr.rr%, ggg.gg%, bbb.bb

%);rgb(rrr, ggg, bbb);Palavra-chave.

1424/04/23

Notação de cor em CSSCSS 3rgba(rrr,ggg,bbb,aaa);hsl(h, s%, l%);hsla(h, s%, l%, a).

1524/04/23

#RRGGBBRR:– Intensidade do vermelho em base

hexadecimal de 0 a 255 (FF);GG:– Intensidade do verde em base

hexadecimal de 0 a 255 (FF);BB:– Intensidade do azul em base hexadecimal

de 0 a 255 (FF).

1624/04/23

Base hexadecimal0 dec = 0 hex;...15 dec = F hex;16 dec = 10 hex;255 dec = FF hex;

1724/04/23

1824/04/23

#RGBForma abreviada;Cada dígito é replicado;Exemplos:–#f00 é a mesma coisa que #ff0000;–#ccc é a mesma coisa que #cccccc;–#123 é a mesma coisa que #112233;

Tons de cinza: #000, #111, #222,..., #ddd, #eee, #fff.

1924/04/23

2024/04/23

rgb(rrr.rr%, ggg.gg%, bbb.bb%)Valores RGB de 0 a 100%;100% corresponde a 255 (FF);

2124/04/23

rgb(rrr, ggg, bbb)Valores RGB de 0 a 255;

2224/04/23

Palavra-chaveHTML 4.01:–16 cores;

2324/04/23

Cores do Sistema:29 cores;Depende do

Sistema Operacional.

Palavra-chaveCores HTML (X11) :–http://www.w3schools.com/HTML/html

_colornames.asp

2424/04/23

rgba(rrr,ggg,bbb,a)

RGB + Transparência;0 => transparente;1 => sólido.

2524/04/23

hsl(h, s%, l%)H (hue): –Tonalidade de cor;–“Cores do arco-íris”;–0 a 360;

S (saturation):–Pureza da cor;–0 a 100%;

L (lightness):–Brilho;–0 a 100%;

2624/04/23

2724/04/23

hsla(h, s%, l%, a)

HSL + transparência;0 => transparente;1 => sólido.

2824/04/23

2924/04/23

Material referente ao assunto da aulaTutorial sobre cores em CSS:–http://www.maujor.com/tutorial/

cores.phpRecomendação W3C do CSS 3 (cores)

(em Inglês):–http://www.w3.org/TR/css3-color/

Capítulo do Livro CSS – Guia de Bolso:–http://altabooks.tempsite.ws/

capitulos_amostra/00_cssbolso.pdf

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um

capítulo.

3024/04/23

Ferramentas de corColor Picker / Color WheelExtensão para Firefox:– http://www.colorzilla.com/firefox/– https://addons.mozilla.org/en-US/firefox/addon/60

Online:– http://www.colorpicker.com/– http://www.workwithcolor.com/doughnut-color-

picker-01.htm– http://www.febooti.com/products/iezoom/online-

help/online-color-chart-picker.html– http://www.ficml.org/jemimap/style/color/

wheel.html

3124/04/23

Ferramentas de corColor Blender:– http://meyerweb.com/eric/tools/color-blend/

Referências sobre cores:–http://www.morecrayons.com/

3224/04/23

3324/04/23

Próximas aulas de CSS

Propriedades CSS: –Imagens e fundos.