Laboratório de Informática Propriedades CSS: Cores 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula
Mar 21, 2016
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.