Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Laboratório de Informática Propriedades CSS: Cores
23/03/2017 Bruno C. de Paula Laboratório de Informática Propriedades 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: Recomendação W3C do CSS 3 (cores) (em Inglês): Capítulo do Livro CSS – Guia de Bolso: 23/03/2017
4
Material referente ao assunto da aula
CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. 23/03/2017
5
Ferramentas de cor Color Picker / Color Wheel
Extensão para Firefox: Online: 23/03/2017
6
Ferramentas de cor Referências sobre cores:
Color Blender: Referências sobre cores: 23/03/2017
7
Tags HTML referenciadas na aula (em Português –site Referenciando)
Tag de estilo: <style>; Tag de link: <link>; Tag de script: <script>. 23/03/2017
8
Tags HTML referenciadas na aula (em Inglês – site SitePoint)
Tag de estilo: <style>; Tag de link: <link>; Tag de script: <script>; 23/03/2017
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%). 23/03/2017
10
Cada cor tem um significado e uma personalidade
23/03/2017 Cada cor tem um significado e uma personalidade Fonte: 23/03/2017
11
A cor é essencial para a apresentação de um site e pode ser representada de maneiras diferentes
23/03/2017
12
Na tela do computador as cores são aditivas (cor luz)
Mistura de intensidades de: Vermelho (red); Verde (green); Azul (blue). 23/03/2017
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. 23/03/2017
14
rgb(rrr.rr%, ggg.gg%, bbb.bb%); rgb(rrr, ggg, bbb); Palavra-chave.
Notação de cor em CSS #RRGGBB; #RGB; rgb(rrr.rr%, ggg.gg%, bbb.bb%); rgb(rrr, ggg, bbb); Palavra-chave. 23/03/2017
15
Notação de cor em CSS CSS 3
rgba(rrr,ggg,bbb,aaa); hsl(h, s%, l%); hsla(h, s%, l%, a). 23/03/2017
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). 23/03/2017
17
Base hexadecimal 0 dec = 0 hex; ... 15 dec = F hex; 16 dec = 10 hex;
255 dec = FF hex; 23/03/2017
18
23/03/2017 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <title>Exemplo: Cor RGB</title> <style type="text/css"> /* Cor RRGGBB */ .c1 { color: #FF0000;} .c2 { color: #00FF00;} .c3 { color: #0000FF;} .c4 { color: #FFFFFF; background-color: #000000;} .c5 { color: #435677;} </style> </head> <body> <h1 class="c1">color: #FF Lorem ipsum dolor sit amet</h1> <h1 class="c2">color: #00FF00 - Lorem ipsum dolor sit amet</h1> <h1 class="c3">color: #0000FF - Lorem ipsum dolor sit amet</h1> <h1 class="c4">color: #FFFFFF; background-color: # Lorem ipsum dolor sit amet</h1> <h1 class="c5">color: # Lorem ipsum dolor sit amet</h1> <p class="c1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at mi a quam tempus fermentum sed eget lectus. Nunc vestibulum commodo luctus. Aenean id feugiat velit. Sed sit amet nisl vel lectus posuere laoreet sed id velit. Suspendisse at velit a metus euismod vulputate. Nunc odio ante, ornare id porttitor sit amet, fringilla vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in risus in odio ullamcorper commodo. Aliquam sed urna libero. Mauris quis lorem ante. Aliquam ornare risus at dui scelerisque consequat. In vel lectus id arcu faucibus tincidunt id ac neque. Praesent sodales dapibus quam id scelerisque. Pellentesque blandit turpis et sapien dignissim imperdiet. Sed eget ante ut nisi vestibulum pellentesque a vitae quam. Nunc dictum dui et mauris pharetra ut pharetra turpis ultricies. Donec porta ultrices libero sed aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor, est vel rutrum laoreet, est magna convallis tellus, a ullamcorper eros elit eget dolor. Proin tempus tempor diam, ac adipiscing elit fermentum vitae. </p> <p class="c2">Vestibulum tincidunt scelerisque massa sed fringilla. Suspendisse ornare adipiscing nibh, vel tempor arcu fringilla elementum. Phasellus porta orci quis magna molestie id suscipit enim pulvinar. Suspendisse potenti. Nunc vehicula, enim non gravida volutpat, augue eros dapibus quam, nec sollicitudin metus nunc eget sapien. Nulla facilisi. Nullam gravida sem ac enim condimentum suscipit. Nulla consectetur sollicitudin nunc a condimentum. Donec venenatis massa at est fermentum tristique. Etiam eu tincidunt tortor. Sed vel gravida lacus. Aliquam vulputate lacus a nisi vehicula molestie. Nam euismod tempor orci, ut dictum sapien venenatis ut. </p> <p class="c3">Sed posuere congue leo et facilisis. Ut eu urna non neque vestibulum pretium nec vitae mauris. Nunc eget consectetur dolor. Maecenas in lacus quis orci posuere vestibulum eget non quam. Donec nec lorem orci, nec facilisis nunc. Nullam sodales blandit eros, ut molestie elit aliquam et. Integer faucibus scelerisque tellus ut aliquet. Maecenas sodales quam et leo pharetra consectetur. Cras eu sapien quis arcu dignissim pretium eget luctus mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras luctus vulputate nulla, vel pulvinar ipsum facilisis vel. Fusce feugiat mi in felis mollis dapibus. Quisque placerat lobortis odio blandit consectetur. </p> <p class="c4">Donec facilisis imperdiet condimentum. Nulla ultricies aliquam lorem sodales porta. Vivamus augue purus, ultricies in egestas sed, tristique at velit. Praesent vulputate, urna ut faucibus euismod, arcu diam pharetra nisl, sed ullamcorper augue metus at diam. Nullam lacinia auctor leo, vitae eleifend justo blandit ac. Aliquam hendrerit, odio quis convallis iaculis, eros arcu varius ligula, nec varius erat libero aliquam elit. Nunc id turpis urna. Donec ut dui et ligula aliquam sagittis sed sed nibh. Nulla facilisi. Maecenas sit amet ipsum tortor. Vestibulum pellentesque odio in lacus malesuada at elementum elit adipiscing. Phasellus eu posuere leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus velit eget dolor vehicula euismod at eget elit. Phasellus vitae volutpat lacus. Donec lorem nisl, cursus ut luctus tincidunt, rutrum sed sapien. Phasellus et mi sed libero dictum accumsan et vitae urna. Fusce ac gravida libero. Quisque ornare, felis malesuada gravida congue, sapien orci hendrerit nulla, vitae rhoncus justo nisl sit amet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <p class="c5">Morbi a urna elit, sit amet pellentesque mi. Suspendisse potenti. Sed blandit metus et neque laoreet rutrum. Proin sit amet tellus ipsum. Sed ullamcorper odio dictum velit tincidunt euismod. Suspendisse quis varius dui. Nunc quis mauris at est vulputate adipiscing sed quis nunc. Praesent est erat, condimentum quis venenatis non, rhoncus eu augue. Phasellus dui sem, tincidunt ultricies aliquet quis, ornare et quam. Praesent id lobortis dui. Morbi massa lectus, placerat quis semper at, pretium non neque. Proin magna dolor, placerat sit amet facilisis non, rutrum eget sem. </p> </body> </html> 23/03/2017
19
#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. 23/03/2017
20
23/03/2017 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <title>Exemplo: Cor RGB</title> <style type="text/css"> /* Cor RGB */ .c1 { color: #f00;} .c2 { color: #ccc;} .c3 { color: #ddd;} .c4 { color: #eee; background-color: #123;} </style> </head> <body> <h1 class="c1">color: #f00; - Lorem ipsum dolor sit amet</h1> <h1 class="c2">color: #ccc; - Lorem ipsum dolor sit amet</h1> <h1 class="c3">color: #ddd; - Lorem ipsum dolor sit amet</h1> <h1 class="c4">color: #eee; background-color: #123; - Lorem ipsum dolor sit amet</h1> <p class="c1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at mi a quam tempus fermentum sed eget lectus. Nunc vestibulum commodo luctus. Aenean id feugiat velit. Sed sit amet nisl vel lectus posuere laoreet sed id velit. Suspendisse at velit a metus euismod vulputate. Nunc odio ante, ornare id porttitor sit amet, fringilla vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in risus in odio ullamcorper commodo. Aliquam sed urna libero. Mauris quis lorem ante. Aliquam ornare risus at dui scelerisque consequat. In vel lectus id arcu faucibus tincidunt id ac neque. Praesent sodales dapibus quam id scelerisque. Pellentesque blandit turpis et sapien dignissim imperdiet. Sed eget ante ut nisi vestibulum pellentesque a vitae quam. Nunc dictum dui et mauris pharetra ut pharetra turpis ultricies. Donec porta ultrices libero sed aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor, est vel rutrum laoreet, est magna convallis tellus, a ullamcorper eros elit eget dolor. Proin tempus tempor diam, ac adipiscing elit fermentum vitae. </p> <p class="c2">Vestibulum tincidunt scelerisque massa sed fringilla. Suspendisse ornare adipiscing nibh, vel tempor arcu fringilla elementum. Phasellus porta orci quis magna molestie id suscipit enim pulvinar. Suspendisse potenti. Nunc vehicula, enim non gravida volutpat, augue eros dapibus quam, nec sollicitudin metus nunc eget sapien. Nulla facilisi. Nullam gravida sem ac enim condimentum suscipit. Nulla consectetur sollicitudin nunc a condimentum. Donec venenatis massa at est fermentum tristique. Etiam eu tincidunt tortor. Sed vel gravida lacus. Aliquam vulputate lacus a nisi vehicula molestie. Nam euismod tempor orci, ut dictum sapien venenatis ut. </p> <p class="c3">Sed posuere congue leo et facilisis. Ut eu urna non neque vestibulum pretium nec vitae mauris. Nunc eget consectetur dolor. Maecenas in lacus quis orci posuere vestibulum eget non quam. Donec nec lorem orci, nec facilisis nunc. Nullam sodales blandit eros, ut molestie elit aliquam et. Integer faucibus scelerisque tellus ut aliquet. Maecenas sodales quam et leo pharetra consectetur. Cras eu sapien quis arcu dignissim pretium eget luctus mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras luctus vulputate nulla, vel pulvinar ipsum facilisis vel. Fusce feugiat mi in felis mollis dapibus. Quisque placerat lobortis odio blandit consectetur. </p> <p class="c4">Donec facilisis imperdiet condimentum. Nulla ultricies aliquam lorem sodales porta. Vivamus augue purus, ultricies in egestas sed, tristique at velit. Praesent vulputate, urna ut faucibus euismod, arcu diam pharetra nisl, sed ullamcorper augue metus at diam. Nullam lacinia auctor leo, vitae eleifend justo blandit ac. Aliquam hendrerit, odio quis convallis iaculis, eros arcu varius ligula, nec varius erat libero aliquam elit. Nunc id turpis urna. Donec ut dui et ligula aliquam sagittis sed sed nibh. Nulla facilisi. Maecenas sit amet ipsum tortor. Vestibulum pellentesque odio in lacus malesuada at elementum elit adipiscing. Phasellus eu posuere leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus velit eget dolor vehicula euismod at eget elit. Phasellus vitae volutpat lacus. Donec lorem nisl, cursus ut luctus tincidunt, rutrum sed sapien. Phasellus et mi sed libero dictum accumsan et vitae urna. Fusce ac gravida libero. Quisque ornare, felis malesuada gravida congue, sapien orci hendrerit nulla, vitae rhoncus justo nisl sit amet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </body> </html> 23/03/2017
21
rgb(rrr.rr%, ggg.gg%, bbb.bb%)
23/03/2017 rgb(rrr.rr%, ggg.gg%, bbb.bb%) Valores RGB de 0 a 100%; 100% corresponde a 255 (FF); <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <title>Exemplo: Cor RGB</title> <style type="text/css"> /* Cor RGB% */ .c1 { color: rgb(0%, 50%, 30%);} .c2 { color: rgb(100%,0%,0%);} .c3 { color: rgb(44%, 44%, 44%);} .c4 { color: rgb(100%, 0%, 100%); background-color: rgb(100%, 50%, 100%);} </style> </head> <body> <h1 class="c1">color: rgb(0%, 50%, 30%); - Lorem ipsum dolor sit amet</h1> <h1 class="c2">color: rgb(100%,0%,0%); - Lorem ipsum dolor sit amet</h1> <h1 class="c3">color: rgb(44%, 44%, 44%); - Lorem ipsum dolor sit amet</h1> <h1 class="c4">rgb(100%, 0%, 100%); background-color: rgb(100%, 50%, 100%); - Lorem ipsum dolor sit amet</h1> <p class="c1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at mi a quam tempus fermentum sed eget lectus. Nunc vestibulum commodo luctus. Aenean id feugiat velit. Sed sit amet nisl vel lectus posuere laoreet sed id velit. Suspendisse at velit a metus euismod vulputate. Nunc odio ante, ornare id porttitor sit amet, fringilla vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in risus in odio ullamcorper commodo. Aliquam sed urna libero. Mauris quis lorem ante. Aliquam ornare risus at dui scelerisque consequat. In vel lectus id arcu faucibus tincidunt id ac neque. Praesent sodales dapibus quam id scelerisque. Pellentesque blandit turpis et sapien dignissim imperdiet. Sed eget ante ut nisi vestibulum pellentesque a vitae quam. Nunc dictum dui et mauris pharetra ut pharetra turpis ultricies. Donec porta ultrices libero sed aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor, est vel rutrum laoreet, est magna convallis tellus, a ullamcorper eros elit eget dolor. Proin tempus tempor diam, ac adipiscing elit fermentum vitae. </p> <p class="c2">Vestibulum tincidunt scelerisque massa sed fringilla. Suspendisse ornare adipiscing nibh, vel tempor arcu fringilla elementum. Phasellus porta orci quis magna molestie id suscipit enim pulvinar. Suspendisse potenti. Nunc vehicula, enim non gravida volutpat, augue eros dapibus quam, nec sollicitudin metus nunc eget sapien. Nulla facilisi. Nullam gravida sem ac enim condimentum suscipit. Nulla consectetur sollicitudin nunc a condimentum. Donec venenatis massa at est fermentum tristique. Etiam eu tincidunt tortor. Sed vel gravida lacus. Aliquam vulputate lacus a nisi vehicula molestie. Nam euismod tempor orci, ut dictum sapien venenatis ut. </p> <p class="c3">Sed posuere congue leo et facilisis. Ut eu urna non neque vestibulum pretium nec vitae mauris. Nunc eget consectetur dolor. Maecenas in lacus quis orci posuere vestibulum eget non quam. Donec nec lorem orci, nec facilisis nunc. Nullam sodales blandit eros, ut molestie elit aliquam et. Integer faucibus scelerisque tellus ut aliquet. Maecenas sodales quam et leo pharetra consectetur. Cras eu sapien quis arcu dignissim pretium eget luctus mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras luctus vulputate nulla, vel pulvinar ipsum facilisis vel. Fusce feugiat mi in felis mollis dapibus. Quisque placerat lobortis odio blandit consectetur. </p> <p class="c4">Donec facilisis imperdiet condimentum. Nulla ultricies aliquam lorem sodales porta. Vivamus augue purus, ultricies in egestas sed, tristique at velit. Praesent vulputate, urna ut faucibus euismod, arcu diam pharetra nisl, sed ullamcorper augue metus at diam. Nullam lacinia auctor leo, vitae eleifend justo blandit ac. Aliquam hendrerit, odio quis convallis iaculis, eros arcu varius ligula, nec varius erat libero aliquam elit. Nunc id turpis urna. Donec ut dui et ligula aliquam sagittis sed sed nibh. Nulla facilisi. Maecenas sit amet ipsum tortor. Vestibulum pellentesque odio in lacus malesuada at elementum elit adipiscing. Phasellus eu posuere leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus velit eget dolor vehicula euismod at eget elit. Phasellus vitae volutpat lacus. Donec lorem nisl, cursus ut luctus tincidunt, rutrum sed sapien. Phasellus et mi sed libero dictum accumsan et vitae urna. Fusce ac gravida libero. Quisque ornare, felis malesuada gravida congue, sapien orci hendrerit nulla, vitae rhoncus justo nisl sit amet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </body> </html> 23/03/2017
22
rgb(rrr, ggg, bbb) Valores RGB de 0 a 255; 23/03/2017 23/03/2017
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <title>Exemplo: Cor RGB</title> <style type="text/css"> /* Cor RGB (0 a 100) */ .c1 { color: rgb(0, 127, 100);} .c2 { color: rgb(255,0,0);} .c3 { color: rgb(110, 110, 110);} .c4 { color: rgb(255, 0, 255); background-color: rgb(255, 128, 255);} </style> </head> <body> <h1 class="c1">color: rgb(0, 127, 100); - Lorem ipsum dolor sit amet</h1> <h1 class="c2">color: rgb(255,0,0); - Lorem ipsum dolor sit amet</h1> <h1 class="c3">color: rgb(110, 110, 110); - Lorem ipsum dolor sit amet</h1> <h1 class="c4"> color: rgb(255, 0, 255); background-color: rgb(255, 128, 255); - Lorem ipsum dolor sit amet</h1> <p class="c1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at mi a quam tempus fermentum sed eget lectus. Nunc vestibulum commodo luctus. Aenean id feugiat velit. Sed sit amet nisl vel lectus posuere laoreet sed id velit. Suspendisse at velit a metus euismod vulputate. Nunc odio ante, ornare id porttitor sit amet, fringilla vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in risus in odio ullamcorper commodo. Aliquam sed urna libero. Mauris quis lorem ante. Aliquam ornare risus at dui scelerisque consequat. In vel lectus id arcu faucibus tincidunt id ac neque. Praesent sodales dapibus quam id scelerisque. Pellentesque blandit turpis et sapien dignissim imperdiet. Sed eget ante ut nisi vestibulum pellentesque a vitae quam. Nunc dictum dui et mauris pharetra ut pharetra turpis ultricies. Donec porta ultrices libero sed aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor, est vel rutrum laoreet, est magna convallis tellus, a ullamcorper eros elit eget dolor. Proin tempus tempor diam, ac adipiscing elit fermentum vitae. </p> <p class="c2">Vestibulum tincidunt scelerisque massa sed fringilla. Suspendisse ornare adipiscing nibh, vel tempor arcu fringilla elementum. Phasellus porta orci quis magna molestie id suscipit enim pulvinar. Suspendisse potenti. Nunc vehicula, enim non gravida volutpat, augue eros dapibus quam, nec sollicitudin metus nunc eget sapien. Nulla facilisi. Nullam gravida sem ac enim condimentum suscipit. Nulla consectetur sollicitudin nunc a condimentum. Donec venenatis massa at est fermentum tristique. Etiam eu tincidunt tortor. Sed vel gravida lacus. Aliquam vulputate lacus a nisi vehicula molestie. Nam euismod tempor orci, ut dictum sapien venenatis ut. </p> <p class="c3">Sed posuere congue leo et facilisis. Ut eu urna non neque vestibulum pretium nec vitae mauris. Nunc eget consectetur dolor. Maecenas in lacus quis orci posuere vestibulum eget non quam. Donec nec lorem orci, nec facilisis nunc. Nullam sodales blandit eros, ut molestie elit aliquam et. Integer faucibus scelerisque tellus ut aliquet. Maecenas sodales quam et leo pharetra consectetur. Cras eu sapien quis arcu dignissim pretium eget luctus mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras luctus vulputate nulla, vel pulvinar ipsum facilisis vel. Fusce feugiat mi in felis mollis dapibus. Quisque placerat lobortis odio blandit consectetur. </p> <p class="c4">Donec facilisis imperdiet condimentum. Nulla ultricies aliquam lorem sodales porta. Vivamus augue purus, ultricies in egestas sed, tristique at velit. Praesent vulputate, urna ut faucibus euismod, arcu diam pharetra nisl, sed ullamcorper augue metus at diam. Nullam lacinia auctor leo, vitae eleifend justo blandit ac. Aliquam hendrerit, odio quis convallis iaculis, eros arcu varius ligula, nec varius erat libero aliquam elit. Nunc id turpis urna. Donec ut dui et ligula aliquam sagittis sed sed nibh. Nulla facilisi. Maecenas sit amet ipsum tortor. Vestibulum pellentesque odio in lacus malesuada at elementum elit adipiscing. Phasellus eu posuere leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus velit eget dolor vehicula euismod at eget elit. Phasellus vitae volutpat lacus. Donec lorem nisl, cursus ut luctus tincidunt, rutrum sed sapien. Phasellus et mi sed libero dictum accumsan et vitae urna. Fusce ac gravida libero. Quisque ornare, felis malesuada gravida congue, sapien orci hendrerit nulla, vitae rhoncus justo nisl sit amet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </body> </html> 23/03/2017
23
Palavra-chave Cores do Sistema: 29 cores;
23/03/2017 Palavra-chave Cores do Sistema: 29 cores; Depende do Sistema Operacional. HTML 4.01: 16 cores; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <title>Exemplo: Cor RGB</title> <style type="text/css"> /* Palavra chave */ .c1 { background-color: black; } .c2 { background-color: silver; } .c3 { background-color: gray; } .c4 { background-color: white; } .c5 { background-color: maroon; } .c6 { background-color: red; } .c7 { background-color: purple; } .c8 { background-color: fuchsia; } .c9 { background-color: green; } .c10 { background-color: lime; } .c11 { background-color: olive; } .c12 { background-color: yellow; } .c13 { background-color: navy; } .c14 { background-color: blue; } .c15 { background-color: teal; } .c16 { background-color: aqua; } </style> </head> <body> <pre> Black # <span class="c1"> </span> Silver #c0c0c0 <span class="c2"> </span> Gray # <span class="c3"> </span> White #ffffff <span class="c4"> </span> Maroon # <span class="c5"> </span> Red #ff0000 <span class="c6"> </span> Purple # <span class="c7"> </span> Fuchsia #ff00ff <span class="c8"> </span> Green # <span class="c9"> </span> Lime #00ff00 <span class="c10"> </span> Olive # <span class="c11"> </span> Yellow #ffff00 <span class="c12"> </span> Navy # <span class="c13"> </span> Blue #0000ff <span class="c14"> </span> Teal # <span class="c15"> </span> Aqua #00ffff <span class="c16"> </span> </pre> </body> </html> /* Palavra chave (Sistema operacional) */ .c1 {background-color: ActiveBorder;} .c2 {background-color:ActiveCaption;} .c3 {background-color:AppWorkspace;} .c4 {background-color:Background;} .c5 {background-color:ButtonFace;} .c6 {background-color:ButtonHighlight;} .c7 {background-color:ButtonShadow;} .c8 {background-color:ButtonText;} .c9 {background-color:CaptionText;} .c10 {background-color:GrayText;} .c11 {background-color:Highlight;} .c12 {background-color:HighlightText;} .c13 {background-color:InactiveBorder;} .c14 {background-color:InactiveCaption;} .c15 {background-color:InactiveCaptionText;} .c16 {background-color:InfoBackground;} .c17 {background-color:InfoText;} .c18 {background-color:Menu;} .c19 {background-color:MenuText;} .c21 {background-color:Scrollbar;} .c22 {background-color:ThreeDDarkShadow;} .c23 {background-color:ThreeDFace;} .c24 {background-color:ThreeDHighlight;} .c25 {background-color:ThreeDLightShadow;} .c26 {background-color:ThreeDShadow;} .c27 {background-color:Window;} .c28 {background-color:WindowFrame;} .c29 {background-color:WindowText;} ActiveBorder <span class="c1"> </span>, ActiveCaption <span class="c2"> </span>, AppWorkspace <span class="c3"> </span>, Background <span class="c4"> </span>, ButtonFace <span class="c5"> </span>, ButtonHighlight <span class="c6"> </span>, ButtonShadow <span class="c7"> </span>, ButtonText <span class="c8"> </span>, CaptionText <span class="c9"> </span>, GrayText <span class="c10"> </span>, Highlight <span class="c11"> </span>, HighlightText <span class="c12"> </span>, InactiveBorder <span class="c13"> </span>, InactiveCaption <span class="c14"> </span>, InactiveCaptionText<span class="c15"> </span>, InfoBackground <span class="c16"> </span>, InfoText <span class="c17"> </span>, Menu <span class="c18"> </span>, MenuText <span class="c19"> </span>, Scrollbar <span class="c20"> </span>, ThreeDDarkShadow <span class="c21"> </span>, ThreeDFace <span class="c22"> </span>, ThreeDHighlight <span class="c23"> </span>, ThreeDLightShadow <span class="c24"> </span>, ThreeDShadow <span class="c25"> </span>, Window <span class="c26"> </span>, WindowFrame <span class="c27"> </span>, WindowText <span class="c29"> </span> 23/03/2017
24
Palavra-chave Cores HTML (X11) :
23/03/2017
25
rgba(rrr,ggg,bbb,a) RGB + Transparência; 0 => transparente;
23/03/2017 rgba(rrr,ggg,bbb,a) RGB + Transparência; 0 => transparente; 1 => sólido. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <title>Exemplo: Cor RGB</title> <style type="text/css"> /* Cor RGB */ body {background: green; } .c1 { color: rgba(255, 0, 0, 0);} .c2 { color: rgba(255, 0, 0, 0.2);} .c3 { color: rgba(255, 0, 0, 0.4);} .c4 { color: rgba(255, 0, 0, 0.8);} </style> </head> <body> <h1 class="c1">color: rgba(255, 0, 0, 0); - Lorem ipsum dolor sit amet</h1> <h1 class="c2">color: rgba(255, 0, 0, 0.2); - Lorem ipsum dolor sit amet</h1> <h1 class="c3">color: rgba(255, 0, 0, 0.4); - Lorem ipsum dolor sit amet</h1> <h1 class="c4">rgba(255, 0, 0, 0.8) - Lorem ipsum dolor sit amet</h1> <p class="c1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at mi a quam tempus fermentum sed eget lectus. Nunc vestibulum commodo luctus. Aenean id feugiat velit. Sed sit amet nisl vel lectus posuere laoreet sed id velit. Suspendisse at velit a metus euismod vulputate. Nunc odio ante, ornare id porttitor sit amet, fringilla vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in risus in odio ullamcorper commodo. Aliquam sed urna libero. Mauris quis lorem ante. Aliquam ornare risus at dui scelerisque consequat. In vel lectus id arcu faucibus tincidunt id ac neque. Praesent sodales dapibus quam id scelerisque. Pellentesque blandit turpis et sapien dignissim imperdiet. Sed eget ante ut nisi vestibulum pellentesque a vitae quam. Nunc dictum dui et mauris pharetra ut pharetra turpis ultricies. Donec porta ultrices libero sed aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor, est vel rutrum laoreet, est magna convallis tellus, a ullamcorper eros elit eget dolor. Proin tempus tempor diam, ac adipiscing elit fermentum vitae. </p> <p class="c2">Vestibulum tincidunt scelerisque massa sed fringilla. Suspendisse ornare adipiscing nibh, vel tempor arcu fringilla elementum. Phasellus porta orci quis magna molestie id suscipit enim pulvinar. Suspendisse potenti. Nunc vehicula, enim non gravida volutpat, augue eros dapibus quam, nec sollicitudin metus nunc eget sapien. Nulla facilisi. Nullam gravida sem ac enim condimentum suscipit. Nulla consectetur sollicitudin nunc a condimentum. Donec venenatis massa at est fermentum tristique. Etiam eu tincidunt tortor. Sed vel gravida lacus. Aliquam vulputate lacus a nisi vehicula molestie. Nam euismod tempor orci, ut dictum sapien venenatis ut. </p> <p class="c3">Sed posuere congue leo et facilisis. Ut eu urna non neque vestibulum pretium nec vitae mauris. Nunc eget consectetur dolor. Maecenas in lacus quis orci posuere vestibulum eget non quam. Donec nec lorem orci, nec facilisis nunc. Nullam sodales blandit eros, ut molestie elit aliquam et. Integer faucibus scelerisque tellus ut aliquet. Maecenas sodales quam et leo pharetra consectetur. Cras eu sapien quis arcu dignissim pretium eget luctus mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras luctus vulputate nulla, vel pulvinar ipsum facilisis vel. Fusce feugiat mi in felis mollis dapibus. Quisque placerat lobortis odio blandit consectetur. </p> <p class="c4">Donec facilisis imperdiet condimentum. Nulla ultricies aliquam lorem sodales porta. Vivamus augue purus, ultricies in egestas sed, tristique at velit. Praesent vulputate, urna ut faucibus euismod, arcu diam pharetra nisl, sed ullamcorper augue metus at diam. Nullam lacinia auctor leo, vitae eleifend justo blandit ac. Aliquam hendrerit, odio quis convallis iaculis, eros arcu varius ligula, nec varius erat libero aliquam elit. Nunc id turpis urna. Donec ut dui et ligula aliquam sagittis sed sed nibh. Nulla facilisi. Maecenas sit amet ipsum tortor. Vestibulum pellentesque odio in lacus malesuada at elementum elit adipiscing. Phasellus eu posuere leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus velit eget dolor vehicula euismod at eget elit. Phasellus vitae volutpat lacus. Donec lorem nisl, cursus ut luctus tincidunt, rutrum sed sapien. Phasellus et mi sed libero dictum accumsan et vitae urna. Fusce ac gravida libero. Quisque ornare, felis malesuada gravida congue, sapien orci hendrerit nulla, vitae rhoncus justo nisl sit amet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </body> </html> 23/03/2017
26
hsl(h, s%, l%) H (hue): Tonalidade de cor; “Cores do arco-íris”;
23/03/2017 H (hue): Tonalidade de cor; “Cores do arco-íris”; 0 a 360; S (saturation): Pureza da cor; 0 a 100%; L (lightness): Brilho; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <title>Exemplo: Cor RGB</title> <style type="text/css"> /* Cor RGB */ body {background: green; } .c1 { color: hsl(61, 60%,50%);} .c2 { color: hsl(61, 60%,40%);} .c3 { color: hsl(61, 60%,30%);} .c4 { color: hsl(61, 60%,20%);} </style> </head> <body> <h1 class="c1">color: hsl(61, 60%,50%); - Lorem ipsum dolor sit amet</h1> <h1 class="c2">color: hsl(61, 60%,40%); - Lorem ipsum dolor sit amet</h1> <h1 class="c3">color: hsl(61, 60%,30%); - Lorem ipsum dolor sit amet</h1> <h1 class="c4">color: hsl(61, 60%,20%); - Lorem ipsum dolor sit amet</h1> <p class="c1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at mi a quam tempus fermentum sed eget lectus. Nunc vestibulum commodo luctus. Aenean id feugiat velit. Sed sit amet nisl vel lectus posuere laoreet sed id velit. Suspendisse at velit a metus euismod vulputate. Nunc odio ante, ornare id porttitor sit amet, fringilla vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in risus in odio ullamcorper commodo. Aliquam sed urna libero. Mauris quis lorem ante. Aliquam ornare risus at dui scelerisque consequat. In vel lectus id arcu faucibus tincidunt id ac neque. Praesent sodales dapibus quam id scelerisque. Pellentesque blandit turpis et sapien dignissim imperdiet. Sed eget ante ut nisi vestibulum pellentesque a vitae quam. Nunc dictum dui et mauris pharetra ut pharetra turpis ultricies. Donec porta ultrices libero sed aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor, est vel rutrum laoreet, est magna convallis tellus, a ullamcorper eros elit eget dolor. Proin tempus tempor diam, ac adipiscing elit fermentum vitae. </p> <p class="c2">Vestibulum tincidunt scelerisque massa sed fringilla. Suspendisse ornare adipiscing nibh, vel tempor arcu fringilla elementum. Phasellus porta orci quis magna molestie id suscipit enim pulvinar. Suspendisse potenti. Nunc vehicula, enim non gravida volutpat, augue eros dapibus quam, nec sollicitudin metus nunc eget sapien. Nulla facilisi. Nullam gravida sem ac enim condimentum suscipit. Nulla consectetur sollicitudin nunc a condimentum. Donec venenatis massa at est fermentum tristique. Etiam eu tincidunt tortor. Sed vel gravida lacus. Aliquam vulputate lacus a nisi vehicula molestie. Nam euismod tempor orci, ut dictum sapien venenatis ut. </p> <p class="c3">Sed posuere congue leo et facilisis. Ut eu urna non neque vestibulum pretium nec vitae mauris. Nunc eget consectetur dolor. Maecenas in lacus quis orci posuere vestibulum eget non quam. Donec nec lorem orci, nec facilisis nunc. Nullam sodales blandit eros, ut molestie elit aliquam et. Integer faucibus scelerisque tellus ut aliquet. Maecenas sodales quam et leo pharetra consectetur. Cras eu sapien quis arcu dignissim pretium eget luctus mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras luctus vulputate nulla, vel pulvinar ipsum facilisis vel. Fusce feugiat mi in felis mollis dapibus. Quisque placerat lobortis odio blandit consectetur. </p> <p class="c4">Donec facilisis imperdiet condimentum. Nulla ultricies aliquam lorem sodales porta. Vivamus augue purus, ultricies in egestas sed, tristique at velit. Praesent vulputate, urna ut faucibus euismod, arcu diam pharetra nisl, sed ullamcorper augue metus at diam. Nullam lacinia auctor leo, vitae eleifend justo blandit ac. Aliquam hendrerit, odio quis convallis iaculis, eros arcu varius ligula, nec varius erat libero aliquam elit. Nunc id turpis urna. Donec ut dui et ligula aliquam sagittis sed sed nibh. Nulla facilisi. Maecenas sit amet ipsum tortor. Vestibulum pellentesque odio in lacus malesuada at elementum elit adipiscing. Phasellus eu posuere leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus velit eget dolor vehicula euismod at eget elit. Phasellus vitae volutpat lacus. Donec lorem nisl, cursus ut luctus tincidunt, rutrum sed sapien. Phasellus et mi sed libero dictum accumsan et vitae urna. Fusce ac gravida libero. Quisque ornare, felis malesuada gravida congue, sapien orci hendrerit nulla, vitae rhoncus justo nisl sit amet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </body> </html> 23/03/2017
27
23/03/2017
28
hsla(h, s%, l%, a) HSL + transparência; 0 => transparente;
1 => sólido. 23/03/2017
29
Material referente ao assunto da aula
Tutorial sobre cores em CSS: Recomendação W3C do CSS 3 (cores) (em Inglês): Capítulo do Livro CSS – Guia de Bolso: 23/03/2017
30
Material referente ao assunto da aula
CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. 23/03/2017
31
Ferramentas de cor Color Picker / Color Wheel
Extensão para Firefox: Online: 23/03/2017
32
Ferramentas de cor Referências sobre cores:
Color Blender: Referências sobre cores: 23/03/2017
33
Próximas aulas de CSS Propriedades CSS: Imagens e fundos. 23/03/2017
Apresentações semelhantes
