Representando Cores com CSS3 - @Curso em Vídeo HTML5 e CSS3

tá dando continuidade os nossos estudos do capítulo 13 do curso de HTML e CSS vamos ver como representar as cores utilizando a linguagem [Aplausos] E aí [Música] o Olá tudo bem com você seja muito bem vindo muito bem na como sempre a mais uma aula do curso de HTML e CSS nós estamos nos estudos do capítulo 13 onde a gente está vendo a representação de cores do vídeo anterior eu falei sobre a importância das cores cara não pula esse vídeo você não viu volta e assistir o que cores não são só cores cores são emoções

cores representam coisas dentro do seu site e saber como aplicar cores é mais importante do que sofre calas a gente vai ver tudo isso durante a esse capítulo não pulei nenhum vídeo não pulei nenhum momento beleza Fechou então no vídeo anterior a gente falou sobre as cores hoje eu vou te mostrar como representar essas cores nas CSS né na escolha de estilo só que a gente ainda vai aprender a importância das cores assim como escolher uma cor que combina com a outra a gente vai ver na próxima aula tá mas nessa aula eu vou te

mostrar como representar Como colocar uma cor diretamente no seu site utilizando várias é porque até o momento a gente só botou black white blue Girl Standing limitado Então vem comigo que eu vou te mostrar como representar outras cores infinitas cores verdade infinitas não 65 milhões para ser mais exato Na verdade são mais de 65 milhões são 65 milhões e alguma coisa mas enfim antes de dar continuidade a esse vídeo eu tenho um recado bem rápido para te dar como você já deve saber esse curso de desenvolvimento web e tá caprichado por sinal só está sendo

possível graças ao apoio de algumas empresas queridas do meu coração e aos poucos conforme o curso foi avançando você vai conhecendo algumas iniciativas e oportunidades que elas estão trazendo para você que ela só Luna que não consegui e dessa vez eu vim aqui falar da Record que é uma organização social que tá fazendo 25 anos de vida no ano que eu tô gravando esse vídeo e o seu objetivo principal é promover o que eles chamam de empoderamento digital eu ainda vou mostrar umas histórias bem emocionantes por aqui você não perde por esperar e para você

que é nosso aluno do Conselho vídeo A recôndita a série de cursos grátis de tecnologia que vão deixar você mais preparado ou preparada para entrar no mercado de trabalho e para ter acesso a esses cursos e outras oportunidades que a Record Vai disponibilizar durante o andamento desse curso é só você apontar a câmera do seu celular pro pode que tá aparecendo aqui na tela o link também vai estar disponível na descrição desse vídeo Obrigado repúdio pelo Patrocínio e pelo apoio constante em toda essa curso de HTML e CSS em muitos outros projetos do curso em

vídeo que estão por vir vamos criar uma pasta nova essa pasta que vai representar muito para gente aí ó então vamos aqui em documentos e Estudos HTML e CSS exercícios e agora a gente tá no Exercício 16 Então vamos no pasta fx010 vamos clicar com o botão direito em cima da pasta né E vamos abrir com o show uma vez aberto a gente vai criar o arquivo index Na verdade eu vou fazer o seguinte eu não vou criar o arquivo index que eu quero criar vários arquivos aqui dentro então vou crê a cor 01. HTML

Sem problema você pode botar um nome que você quiser windex é o arquivo de índice a gente já falou sobre isso lá nesse no curso é um cor um eu vou fazer a forma mais simples ó que é o que tá lá no repositório vou te mostrar outras maneiras mas nos vídeos a gente vai ver muito mais sobre isso tá voltar que cores em CSS então faz o seguinte aqui eu vou criar um padrão aqui H2 exemplo de cores e um parágrafo com y no final só digitei Loren e foi e vou copiar isso aqui

algumas vezes está na verdade vou fazer um dois três só demais a gente coloca depois o que eu vou fazer o seguinte vou aplicar configurações pontuais né Vou botar aqui com online né como Style eu vou configurar duas coisas ou background-color a que eu vou botar aqui Blue e a color que é a cor da letra color que eu vou colocar aqui White a principal maneira que a gente aprendeu né até o momento que representar com os seus nomes é bem zoado bem limitado porque a chegar o momento que as coisas vão acabar né quando

você fazendo vou apagar essa palavra Blue aqui vou apertar conta no espaço você vai ver aqui a quantidade de cores é bastante é bastante máscara não chega perto dos 65 milhões de cores que a gente vai poder representar utilizando essa técnica que eu vou te mostrar agora vamos abrir o arquivo ele se ficou né exercício 16 cor 01 clique em duas vezes ele vai abrindo navegador para dar uma arrumadinha aqui Beleza deixa eu te mostrar uma outra coisa agora cores em HTML a gente representa de várias maneiras até botar mais uma aqui porque eu sei

que já já dei uma lembrada que tem mais um eu botei quatro vezes Aqui ó era você vê aqui ó o fundo tá azul e a letra tá Branca a primeira forma de representar é utilizando nomes é a forma mais simples porém limitada como a gente acabou eu vou fazer nesse segundo H2 aqui uma outra maneira de representar vou criar que o mesmo Style tá na verdade eu vou fazer o seguinte eu vou pegar o estágio daqui de cima a mpm vou fazer esse essa segunda forma aqui de outra maneira eu vou tirar esse grupo

aqui e vou colocar assim ó 0000 FF dá uma olhada Calma que eu já vou te explicar e eu vou botar assim #ffffff um dois três quatro cinco seis beleza e representação essa essa é a nossa representação hexadecimal eu vou botar aqui ó um comentário representação por nome a próxima essa aqui vai ser representação por códigos hexadecimais primeira coisa que você tem que lembrar é que hexadecimal é o seguinte quando eu falo de desse mal eu falo de números que tem esses dígitos era 123456789 acima disso eu faço combinações né um com 10 que dá

o 10 um com o que dá 11 e assim sucessivamente a base é desse mal porque é que eu tenho 10 dígitos é só com o zera o primeiro digito 2º 3º 4º 5º 6º 7º 8º 9º 10º são 10 e eu falo de hexadecimal ó eu tô falando de 16 Então são uns 10 horas era 123456789 e não pode ser desde que são dois dígitos né são dois algarismos então a gente coloca assim ó a perceber é e f se você contar isso aqui ó vai dar 16 algarismos fala para uma vara a é

um algarismos em que se for na base hexadecimal então se você quiser dar uma estudada depois de misturado em bases numéricas eu tenho inclusive um curso básico lá no YouTube que fala sobre representações de base numérica mas o fato aqui hexadecimal seria a 0 o valor menos né o dígito menos significativo e f ou dígito mais significativo por isso que eu coloquei um número aqui ó tem 10 Cê tem é fiz aqui é nada e aqui é o máximo se você dá uma olhada eu fiz isso no segundo a dois certo nesse segundo aqui ó

E cria um quarto na verdade quando eu atualizar Olha isso ficou igual a esse daqui tá igual esse daqui isso porque essa representação aqui ó Isso aqui é a cor azul que você vê até uma dica por aqui né tá e como funciona esse código em hexadecimal bem vamos lá é basicamente toda cor Ela é formada por um conjunto de combinações de vermelho verde e azul então aqui ó basicamente eu tenho 100 de vermelho 00 de verde e FF de azul BFF seria o máximo de azul esses valores aqui vão de 0 a 255 Ah

eu vou fazer o seguinte eu vou te mostrar ou Minimizar aqui e vou abrir o INPI que foi o programa que a gente instalou gratuitamente aqui no início do curso Paulo abre 20 aqui e vou te mostrar que aquele Azul ali é justamente 10000 FS Tá então vamos lá quando você abrir o Greenpeace é só clicar em qualquer uma dessas duas coisinhas que aparecem aqui o clicar nesse verdinho aqui eu vou fazer o seguinte Olha só eu vou puxar aqui primeira coisa que você vai fazer é clicar aqui ó de 0 a 255 tá você

clica aqui e o resto pode deixar assim vamos escolher o azul aqui ó o azul é esse cara aqui ó tá vendo eu fiquei nesse cara aqui ele já me deu o código aqui ó 0000 RSA O que que significa 0000 FF ele não tem nada de vermelho zero de vermelho aqui ó red red red vermelho nada de vermelho eu não tenho nada de verde od Green a tabela para o mouse em cima verde para o mouse em cima vermelho zero de Vermelho e o máximo 255 que representa e representará em hexadecimal da efe eu

tenho o máximo de azul se você tirar o máximo por isso a botar 88 você dígitos iguais não tá se você botar 88 o azul vai ficar um pouco mais escuro tá vendo o adulta 88 aqui máximo ó tá vendo que eu tô arrastando Ele tá mudando aqui ó fica de olho aqui nesse caso aqui ó ele tá mudando o valor seu arrastar coladinho aqui ó ele vai me colocando mais escuro é só olhar esse azul aqui debaixo mais escuro mais claro se eu quiser mais um mais para cá um azul clarinho Olha esse azul

clarinho Olha O código dele 5757 é a 17 significa 85 em base decimal a 85 86 e meio na verdade na verdade 86 é e o que significa 234 certo então assim eu monto Esses códigos baseados na quantidade de RD Red Green e blue RGB já gente vai falar um pouquinho mais sobre RGB antes daqui é uma das maneiras certo e você pode ver isso utilizando o Greenpeace que foi o programa gratuito que a gente aprendeu aí a instalar e usar se você não sabe usar ele você mas você não sabem como instalar é sinal

de que você pulou alguns vídeos aí porque eu te ensinei lá no início do curso Então beleza a primeira forma é por nome a segunda forma é por código hexadecimal a terceira forma é utilizando o código RGB normal Então vou jogar o mesmo código aqui tá do style em vez de blue aqui eu vou botar RGB tudo minúsculo tá abro parênteses e digo quantidade de vermelho zero quantidade de verde zero e fim desse mal tá quantidade de azul 15 também gata o branco é a presença total de cores ó quer ver vamos fazer o branco

aqui no Gimp já tá até aqui o branco Olha o branco o branco anotação do Branco FF FF FF tudo efe O que é 255 no red255 do green255 num certo é o máximo o preto vou botar o preto aqui ó é 000 000 nada de vermelho nada eu vejo nada de azul Pensa como se fossem 3 luzinhas uma luz vermelha é uma luz verde uma luz azul e o acendendo ou apagando e ela é gradativa certo ela vai acendendo e apagando inclusive essas luzes que eu tô colocando aqui essa exclusivo que eu estou iluminando

a parede aqui elas são luzes RGB eu configuro o controle Zinho não sei se vai dar para você ver deixa eu pegar aqui Se você prestar atenção aqui ó eu tenho o código RGB tá vendo essa luz daqui ela tá azul ela tá com zero de vermelho zero de verde e 99 da zona aqui na verdade a escala não é com dor é que tá a escala aqui é de de 0 a 100 tá de 0 a 99 na verdade que vai dar certo então basicamente a minha luz azul por causa disso se eu diminuir

isso daqui ó você vai ver lá atrás ó vou dar uma diminuída o azul de florescendo cheio de se vai tá vendo e eu tô vendo aqui o Asus crescendo não sei se você tá conseguindo ver deixa eu botar aqui no 99 de novo para voltar ao normal já que quer virar por exemplo vou tirar totalmente o azul a zero de azul tá apagou Tá vendo Agora vou botar o máximo de vermelha você ver que está sendo vermelha no canto tá vendo vermelho vai ficando tudo vermelho certo então eu posso voltar aqui e vai apagar

de novo já pagou e vou colocar Verde a lá então eu consigo fazer combinações de RGB até com a minha luz então sim porque você entender essa forma de representação você vai entender qualquer sistema que utiliza uma tela tá porque eu fiz besteira aqui mas enfim depois eu conserto é que você consegue representar qualquer valor que utiliza uma tela Como vai com certeza Existem várias maneiras de você apoiar o canal do curso em vídeo mais uma das mais importantes é entrando no site do curso em vídeo é esse aqui que tá aparecendo aqui do lado

e clicando na parte de cima o que seja um apoiador você ajuda muito projeto a se manter gratuito e como recompensa a gente oferece alguns vídeos exclusivos alguns vídeos de backstage alguns cursos exclusivos como um curso básico de programação usando Portugal estúdio algumas aulas adiantadas do curso de html que você tá vendo aqui e de quebra muito em breve também vamos oferecer certificados para quem é apoiador então não perca tempo se você pode ajudar a gente acesso a conseguido pontocom e clica no link que está na parte superior do site Seja um apoiador então basicamente

aqui ó eu tenho White como sendo RGB 255 255 255 Se você olhar aqui agora na hora que eu atualizar ao exatamente a mesma coisa e uma terceira maneira é utilizando o características de cores é o seguinte algumas cores é todas as cores na verdade possui características como mates QRU saturação que é se e luminosidade Kelly então consigo fazer a Inovação através da função de CSS hsl E aí ó eu tenho aqui 240d Martins sem por cento de faturação e cinquenta por cento de luminosidade E aí eu tenho azul aqui eu tenho 0 de mate

chá minha Matriz minha mat0 eu tenho zero por cento de saturação e sem por cento de luminosidade isso vai mexer o branco tá então basicamente eu tenho tá Eu tenho quatro resultados iguais só que com técnicas diferentes eu tive a primeira com representação por nomes a segunda por códigos hexadecimais e a terceira eu tive por representação em RGB que é Red vermelho Green e blue e a última eu tenho representação Por hsl que é rio que mate ich7 High acham que a saturação iluminose que é luminosidade perto então assim basicamente eu consigo fazer com que

a representação Olá seja feita com esses quatro métodos ou eu uso representação por nomes ou eu uso por códigos hexadecimais ou em código RGB né com a função RGB ou com a função hsl lembrando RGB aqui hsl Aqui tudo em letras minúsculas por favor só que agora Olha só eu vou te mostrar uma maneira que o visual Studio code te ajuda que ela fala pow Guanabara mas como é que eu vou pesquisar quantidade de rio de sete Waiting the luminosity estamos a fazer nada disso você só precisa fazer o seguinte uma creio um uma uma

outra versão aqui tá uma última versão aqui você consegue simplesmente fazer assim ó vou fazer dessa maneira que vou botar o grupo e vou botar o White eu falo um pouco na agora você vai me mostrar é prometeu no início me mostrar 65 milhões de possibilidade até mais do que essas porque olha só eu tenho aqui é o da crônica color Blue na hora que você escrever a cor você tiver qualquer uma né geralmente perto eu venho me desculpe perto daquilo que eu quero ser Amarelo bota o galo mas eu não vou aceitar o amarelo

do Gelo eu vou e eu escrevo a cor voltei aqui Blue e passa o mouse em cima da letra Na 10 letras da palavra Blue Olha isso que ele abre a seja deve ter visto ele ainda algumas vezes se você mexer aqui ó você consegue tá vendo representar e olha só ele já tá fazendo aqui em cima a cor do RG dele então consigo por exemplo mexer aqui ó aqui eu mexo na cor perto aqui eu mexo na tonalidade dela então por exemplo se eu quiser um verde mais escuro tá aqui ó RGB 6 16484

ele já escreveu isso para você tanto fala copiar colar nem nada aquela mexer em cima do White vou botar uma cor verde Só que mais escura vou fazer um verde parecido com aquele Só que mais escuro ó a hora que atualizam tá aqui tá horroroso mas tá aqui inclusive excitar horroroso a gente vai resolver isso no próximo vídeo tá então vou botar aqui me pouquinho mais de contraste outra coisa que você pode fazer é modificar representação arma Mas eu não quero com a recebeu prefiro com hexadecimal que fica mais fácil Beleza tem mexe o mouse

em cima e aí você vai clicar em cima dessa barra de cima aqui ó do o que queima vez mudou para hexadecimal porque outra vez mudou para hsl porque outra vez volta para RB tranco os três as três maneiras estão aqui e aí eu cliquei ele já substitui já tá aqui como é que faz esse mal passei o mouse em cima cliquei de novo já tá com o hexa decimal então eu consigo representar em qualquer sistema qualquer uma das cores Inclusive eu consigo modificar aqui ó deixa eu colocar aqui Branco você conseguir entender eu consigo

dizer que essa cor aqui deixa eu mostrar pra você ataque esse Verde aqui eu quero transparência nele também então por exemplo aqui passei o mouse em cima lembra que eu falei desse lado aqui você escolhe a cor desse lado aqui você escolhe o Tom para não botei um tom bem escuro tá aqui e na terceira barra que eu não falei ó quer ver nessa terceira/aqui você que escolhe a transparência Olha isso ele já colocou outro digita ali para mim então tenho esse aqui ó eu consigo dizer que ela é um pouco transparente tá vendo aqui

ele ficou até com quadriculadinho embaixo se você usa o em algum que você sabe que transparência e representa assim então tá vendo Então assim esse aqui esse exemplo de cores ele tá branco mesmo não tá transparente não até botar uma cor verde bem forte aqui para você poder entender ó ele não tá transparente ele tá bem bem forte inclusive aqui atrás ele tá com transparência parece que tava tudo gente que o fundo realmente branco também então você consegue brincar e agora na sua casa que é o seguinte você consegue configurar aqui ó desse lado com

desse lado e no meio a transparência inclusive se você clicar aqui ó ele em hexadecimal ele já adicionou dois dígitos aqui que foi 160 se você for para RGB ele muda para RGB Ah tá seu Red Green Blue e ao fã tá que é transparência esse valor aqui vai dizer era um aí se último valor aqui que eu mostrar de novo esse último valor vai dizer era um até lá no seu tirar tudo é zero Se eu colocar tudo é um a um não porque ele vira RGB né mas vendo aqui ó quase sem transparência

bem transparente é rooteado a transparência toda vocês vão uma sujeirinha de verde aqui ó tá vendo bem fraquinho como transparência utilizando a função rgba a mesma coisa acontece com o hsl Vira hsl a histeria Rio saturation luminosity Alpha que a transparência o mesmo esquema ele aumenta que disseram a um eu consigo configurar a transparência Beleza então é isso meu querido é isso minha querida te mostrei quatro formas de representar uma cor utilizando o nome dela utilizando o código hexadecimal e as funções RGB e hsl perto e também te mostrei Como trabalhar com transparências de cores

só que aí fica uma dúvida tá Guanabara eu te entendo eu entendi como é que se faz uma cor é bem fácil só que eu não consigo fazer uma combinação bonita de cores que esse é o grande problema de quando a gente está começando na só que isso daí é uma praticamente uma ciência se tornar as coisas bonitas utilizando cores e é sobre esse assunto que a gente vai falar no próximo vídeo Então se prepara prepara o teu caderno aí provavelmente caderno tá na tua mão a nossa essas técnicas que a gente aprendeu Nesta aula

né representação por nome por RGB por hsl e também representação hexadecimal escreve sobre transparência tá Anota tudo bonitinho Porque no próximo vídeo vai ter coisa para caramba para você anotar Inclusive eu vou preparar uns slides para você entender legal como fazer Harmonia de cores harmonização de cores saquinhos a gente vai ver no próximo vídeo fechou Combinado então a isso a gente tem encontro marcado na aula que vem lá na próxima aula onde a gente vai aprender bastante sobre cores e suas harmonias um grande abraço e até lá E aí [Aplausos] [Música] E aí E aí

[Aplausos] [Música]