1 / 33

Laboratório de Informática Propriedades CSS: Cores

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 ;

olympe
Download Presentation

Laboratório de Informática Propriedades CSS: Cores

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Bruno C. de Paula Laboratório de InformáticaPropriedades CSS:Cores 1º Semestre 2009 > PUCPR > BSI

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

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

  4. Material referente ao assunto da aula • CSS – Guia de Bolso; • Editora AltaBooks; • 2008; • Download de um capítulo.

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

  6. Ferramentas de cor • Color Blender: • http://meyerweb.com/eric/tools/color-blend/ • Referências sobre cores: • http://www.morecrayons.com/

  7. Tags HTML referenciadas na aula (em Português –site Referenciando) • Tag de estilo: <style>; • Tag de link: <link>; • Tag de script: <script>.

  8. Tags HTML referenciadas na aula (em Inglês – site SitePoint) • Tag de estilo: <style>; • Tag de link: <link>; • Tag de script: <script>;

  9. 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%).

  10. Cada cor tem um significado e uma personalidade

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

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

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

  14. Notação de cor em CSS • #RRGGBB; • #RGB; • rgb(rrr.rr%, ggg.gg%, bbb.bb%); • rgb(rrr, ggg, bbb); • Palavra-chave.

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

  16. #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).

  17. Base hexadecimal • 0 dec = 0 hex; • ... • 15 dec = F hex; • 16 dec = 10 hex; • 255 dec = FF hex;

  18. #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.

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

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

  21. Palavra-chave • Cores do Sistema: • 29 cores; • Depende do Sistema Operacional. • HTML 4.01: • 16 cores;

  22. Palavra-chave • Cores HTML (X11) : • http://www.w3schools.com/HTML/html_colornames.asp

  23. rgba(rrr,ggg,bbb,a) • RGB + Transparência; • 0 => transparente; • 1 => sólido.

  24. 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%;

  25. hsla(h, s%, l%, a) • HSL + transparência; • 0 => transparente; • 1 => sólido.

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

  27. Material referente ao assunto da aula • CSS – Guia de Bolso; • Editora AltaBooks; • 2008; • Download de um capítulo.

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

  29. Ferramentas de cor • Color Blender: • http://meyerweb.com/eric/tools/color-blend/ • Referências sobre cores: • http://www.morecrayons.com/

  30. Próximas aulas de CSS • Propriedades CSS: • Imagens e fundos.

More Related