330 likes | 467 Views
Bruno C. de Paula. Laboratório de Informática Propriedades CSS: Cores. 1º Semestre 2009 > PUCPR > BSI. Resumo da aula. Após finalizarmos nosso trabalho com os seletores do CSS, é chegado o momento de conhecer as principais propriedades do CSS ;
E N D
Bruno C. de Paula Laboratório de InformáticaPropriedades CSS:Cores 1º Semestre 2009 > PUCPR > BSI
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.
Material referente ao assunto da aula • Tutorial 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 capítulo.
Ferramentas de corColor Picker / Color Wheel • Extensã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
Ferramentas de cor • Color Blender: • http://meyerweb.com/eric/tools/color-blend/ • Referências sobre cores: • http://www.morecrayons.com/
Tags HTML referenciadas na aula (em Português –site Referenciando) • Tag de estilo: <style>; • Tag de link: <link>; • Tag de script: <script>.
Tags HTML referenciadas na aula (em Inglês – site SitePoint) • Tag de estilo: <style>; • Tag de link: <link>; • Tag de script: <script>;
Exemplos da aula • Cor em #RRGGBB • Cor em #RGB • Cor 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%).
A cor é essencial para a apresentação de um sitee pode ser representada de maneiras diferentes
Na tela do computador as cores são aditivas (cor luz) • Mistura de intensidades de: • Vermelho (red); • Verde (green); • Azul (blue).
Monitores apresentam as cores de maneira diferente • Cores 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.
Notação de cor em CSS • #RRGGBB; • #RGB; • rgb(rrr.rr%, ggg.gg%, bbb.bb%); • rgb(rrr, ggg, bbb); • Palavra-chave.
Notação de cor em CSSCSS 3 • rgba(rrr,ggg,bbb,aaa); • hsl(h, s%, l%); • hsla(h, s%, l%, a).
#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).
Base hexadecimal • 0 dec = 0 hex; • ... • 15 dec = F hex; • 16 dec = 10 hex; • 255 dec = FF hex;
#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.
rgb(rrr.rr%, ggg.gg%, bbb.bb%) • Valores RGB de 0 a 100%; • 100% corresponde a 255 (FF);
rgb(rrr, ggg, bbb) • Valores RGB de 0 a 255;
Palavra-chave • Cores do Sistema: • 29 cores; • Depende do Sistema Operacional. • HTML 4.01: • 16 cores;
Palavra-chave • Cores HTML (X11) : • http://www.w3schools.com/HTML/html_colornames.asp
rgba(rrr,ggg,bbb,a) • RGB + Transparência; • 0 => transparente; • 1 => sólido.
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%;
hsla(h, s%, l%, a) • HSL + transparência; • 0 => transparente; • 1 => sólido.
Material referente ao assunto da aula • Tutorial 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 capítulo.
Ferramentas de corColor Picker / Color Wheel • Extensã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
Ferramentas de cor • Color Blender: • http://meyerweb.com/eric/tools/color-blend/ • Referências sobre cores: • http://www.morecrayons.com/
Próximas aulas de CSS • Propriedades CSS: • Imagens e fundos.