Laboratório de InformáticaPropriedades CSS:Cores

1º Semestre 2009 > PUCPR > BSI

Bruno C. de PaulaBruno 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.

311/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 c

apítulo.

411/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.html511/04/23

Ferramentas de cor

Color Blender:– http://meyerweb.com/eric/tools/color-blend/

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

611/04/23

711/04/23

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

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

811/04/23

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

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

911/04/23

Exemplos da aula

Cor 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

1011/04/23

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

1111/04/23

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

1211/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.

1311/04/23

Notação de cor em CSS

#RRGGBB;#RGB;rgb(rrr.rr%, ggg.gg%, bbb.bb

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

1411/04/23

Notação de cor em CSSCSS 3

rgba(rrr,ggg,bbb,aaa);hsl(h, s%, l%);hsla(h, s%, l%, a).

1511/04/23

#RRGGBB

RR:– 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).

1611/04/23

Base hexadecimal

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

1711/04/23

1811/04/23

#RGB

Forma 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.

1911/04/23

2011/04/23

rgb(rrr.rr%, ggg.gg%, bbb.bb%)

Valores RGB de 0 a 100%;100% corresponde a 255 (FF);

2111/04/23

rgb(rrr, ggg, bbb)

Valores RGB de 0 a 255;

2211/04/23

Palavra-chave

HTML 4.01:–16 cores;

2311/04/23

Cores do Sistema:29 cores;Depende do

Sistema Operacional.

Palavra-chave

Cores HTML (X11) :–http://www.w3schools.com/HTML/html

_colornames.asp

2411/04/23

rgba(rrr,ggg,bbb,a)

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

2511/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%;

2611/04/23

2711/04/23

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

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

2811/04/23

2911/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.

3011/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/online-

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

wheel.html

3111/04/23

Ferramentas de cor

Color Blender:– http://meyerweb.com/eric/tools/color-blend/

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

3211/04/23

3311/04/23

Próximas aulas de CSS

Propriedades CSS: –Imagens e fundos.