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