Criando um exemplo real - @Curso em Vídeo HTML5 e CSS3

Já chegamos aqui a mais um vídeo ainda falando sobre cores então ele estamos no Capítulo 13 [Música] [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS nós estamos aprendendo a trabalhar com cores não só trabalhar com cores colocando cores mas harmonizando essas cores e agora como eu prometi no vídeo anterior a gente vai criar um exemplo prático Claro não espere muita coisa desse exemplo é o são os primeiros passos algumas propriedades de CSS a gente ainda não aprendeu

mas a gente vai aprender mais para frente não tem problema mas eu vou tentar criar aqui uma coisa harmônica uniforme e que tenha um corpo que tem um conteúdo Fechou então vem comigo abre aí no seu computador para a gente poder trabalhar juntos e sempre vai pausando esse vídeo e fazendo na sua casa aqui vendo se seu resultado se parece com meu Fechou então vamos nessa vamos começar direto do computador e vamos dar start nesse projeto porque eu já tô ansioso aqui e o recado dessa aula aqui quem vai trazer para você é um estudo

na alta e como eu disse um recado anterior traz vários cursos para você mas não pense só que é só com é muito avançado não aqui não consegui por exemplo nós temos um curso de introdução à programação utilizando a ferramenta aviso áudio e para você que está se perguntando o que que é introdução programação se você tá querendo aprender só a criar sites pois saiba que a parte Inicial você não precisa saber programar o problema quando você vai aprender JavaScript PHP Java ser que aí você precisa nos fundamentos de programação e não estudou na alta

a gente tem um curso mais atualizado muito mais atualizado do que esse que a gente disponibiliza aqui no curso em vídeo mas não estudou na outra a gente tem cinco módulos de desenvolvimento dentro de princípios básicos os primeiros passos utilizando uma ferramenta Nacional muito mais atualizada que é o Portugal estúdio então se você já teve algum problema em relação à desenvolvimento nos princípios de desenvolvimento Talvez seja uma ótima pedida dá uma olhada nesse curso de cinco módulos cheio de aulas e cheio de exercícios para você e você pode ter maiores informações a o seu celular

para esse pode porque tá aparecendo aqui embaixo ou pegando o link na descrição desse vídeo vamos agora a nossa aula normal Então já estou aqui eu vou fechar isso tudo mas eu vi que falta um negócio aqui ó globais é ótimo falta globais botãozinho aqui pra complementar eu vou fechar aqui ó não vou fechar não vou criar o cor 03 nos criar o cor 03 aqui nesse aqui a gente vai fazer a parada maneira vamos fazer aqui com 103 pontos HTML para na maneira que eu tô falando isso aqui ó a gente vai criar o

código base pt-br a gente vai manter esse documento aqui vou botar aqui site de exemplo eu vou manter HTML e CSS separados Então já vou criar aqui ó embaixo do Tairo um link esse link para CSS Cadê o link para CSS e aqui eu tenho Style pontos SS Segurei o controle cliquei ele vai dizer que não foi possível encontrar o arquivo eu mando criar ele já criou o estilo aqui também vou colocar aqui ó uma chamada cassete ou há 8 Para eu não ter problema de compatibilidade aqui com caracteres especiais dentro das minhas ISS a

aqui o HTML separado até encolher aqui ó já tô com os dois arquivos e vou criar aqui a o meu o código principal o código principal do meu HTML do meu site vai tá dentro de uma série chamada Amém depois a gente vai entender um pouco mais sobre essa técnica aqui que a gente vai configurar é como se fosse uma div que só que é uma div especial que diz que isso aqui é o meu conteúdo principal Vamos criar um olhar um aqui outro dizer site de exemplo que vai ser meu agarrou meu título principal

e vamos ver como é que tá funcionando só que eu não quero né Eu não quero esse arquivo mais eu quero o meu arquivo cor 03 eu vou abrir ele duas vezes fiquei duas vezes né não vou abrir hoje e já tá lá e aqui cara html html conteúdo Então vou colocar lá um H2 é título um aí eu vou ter um parágrafo com um Lauren eu vou só lotar aqui de conteúdo tá botar na verdade dois parágrafos com um homem depois eu tenho um outro h2q o título dois está ficando legal beleza tipo tudo

eu tô mais dois parágrafos de Lauren tá se sentindo rápido demais pausar o vídeo e vai fazendo aqui vou fazer só mais um título ch2 título três e mais dois parágrafos online que inventar o texto do cliente né Beleza até então HTML5 vão a única coisa nova foi a nossa tag mãe aqui só para povoar o conteúdo vamos lá no estilo e vamos fazer o seguinte nós vamos em primeiro lugar manter vou fazer as minhas configurações globais aqui aí CSS só para botar a minha altura com 100 porcento só para eu poder usar o daquela

de cima para baixo que eu vou querer e aqui no meu um corpo eu já vou configurar o seguinte nas configurações globais eu também posso dizer que a minha font-family vai ser essa daqui a gente vai ver fonte nos próximos Tá eu vou usar a fonte sem serifa você vai aprender o que que é isso eu posso também e deixa eu ver se tá certo aqui atualizando aquele sumiu Vamos colocar esse aqui como comentário depois a gente vê o que que tá acontecendo tá beleza então tá o que eu vou fazer aqui também todos os

meus parágrafos vão estar justificar então text-align justify só para ficar arrumadinha aqui no cantinho depois a gente vai ver isso também nesse mês o módulo ainda de CSS baixo o que eu vou fazer aqui o seguinte vamos primeiro pegar as cores né porque a gente tá meio sem cor vamos começar configurando o estilo e eu vou aqui para o meu Adobe color e eu vou fazer um negócio eu vou ver aqui em explorar e vou pegar uma paleta pronta tá eu não vou escolher uma parede você pode criar sua paleta com 5 cores a vontade

você aprendeu isso durante esse módulo né E se você pulou o que vocês vão que esse aqui é criação de um site na prática tu perdeu um monte de coisa cara então é essas coisas não serão explicadas aqui nesse exercício como explicadas durante as aulas então não dá mole não pula tanto aqui tá todas as fontes eu vou mudar aqui para as mais usadas e vou escolher uma paleta qualquer aqui deixa eu ver uma paleta que isso Olá seja bem monocromática eu vou usar essa aqui ó tá cliquei aqui eu tenho essa minha paleta certo

gostei dela vou usar esses dois aqui no background vou usar posso brincar nessa com essa né posso brincar dessa com essa também enfim fica legal gostei Então vou começar pelo e fora preto e branco né como eu falei ah eu vou começar a fazer um degradê dessa compra essa então vamos lá no bar em Vamos fazer um degradê então pé Krause em leite vai ser um Linea greans to reach a primeira cor vai ser essa copiei ouvir aqui vou colar eu comecei entre aqui também copiei ouvir aqui vou colar Então beleza Já criei as duas

vamos ver se o degradê funcionou tá vendo o degradê tá bem clarinha que bem escuro Deixa eu botar aqui tudão tubarão na verdade que ele vai fazer é ele ele fez aqui o meu conteúdo só deixa eu ver aqui se eu colocar esse raio de sangue aqui aí agora eu não tô entendendo porque que ele quebrou Ai meu Deus por isso aqui não dá não tô aqui no bar vai ainda não foi a gente não vou usar degradê para baixo vamos desaturate Beleza já fiz um degradê só que esse conteúdo não pode estar dentro degradê

né conteúdo ideal é todo branco letra preta então vamos lá esse conteúdo todo se você ver uma olhada aqui no meu HTML tá dentro de mim arruma um cão seletor também meu seletor para mim vai ser o seguinte meu background-color vai ser branco é isso é branco cara bota met White lá tem problema precisa ficar olha eu sou programador eu vou usar o wi-fi tem que dar para fazer só três tá então né seria duplo mas eu não precisa disso tá você pode botar o Haiti aqui sem problema se não te torna um desenvolvedor pior

ou melhor outra coisa que eu quero aquele não ocupe a largura inteira Então vamos mudar a largura aqui ó largura é Winder Winder Vou colocar aqui de 600 pixels Acredito que esteja bom show outra coisa é a gente vai aprender isso mais pra Oi tá com mais detalhes mas tá faltando um espacinho aqui né que a gente não de acolchoamento Então vamos botar aqui um pezinho de 10 pixels aí você vai ver que ele dá uma engordadinha aqui um negócio outra coisa que eu quero eu quero isso aqui no meio da tela não posso botar

senha depois eu vou te explicar como é que funciona isso massagem alto quando botar margem alto ele automaticamente vai centralizar independente do tamanho da tela quer ver ó seu aumentar a janela ou diminuir Ele sempre vai ficar no meio então você que é bem interessante já deu uma organizada aqui o estilo do negócio vamos utilizar que o meu H1 H2 vamos configurar aqui meu H1 você retorno e o meu seletor do H2 também usando coerência de cores então vamos aqui na nossa paleta eu vou querer que o Gagá um fique dessa cor então eu olhar

um vai ficar dessa cor a cor da letra A gente viu isso nesse módulo color é uma color cola aqui os dois vai ser o Color vou usar essa cor aqui vamos ver se vai colar e se vai ficar legal achei que ficou bem apagadinho não deu para ler direito não que a gente pode fazer é o seguinte a gente pode pegar essa cura aqui e trabalhar uma escala abaixo uma mini escala monocromática não posso vir aqui deixa eu ver se eu consigo botar eu nem sei se azul aqui vai falar vai conseguir falar comigo

deixa eu ver antes de mexer na monocromática Tá OK tá bom se não ia ter que mexer em subir escala e eu não quero isso quero fazer como eu disse antes só com o que a gente aprendeu é outra coisa que a gente vai fazer aqui e isso é legal eu gosto para caramba aqui no meu homem que essa parte branca eu vou fazer o seguinte ó border-radius vou botar 20 pixels que que eu boto rádios dá uma olhada nessas pontinhos aqui ó as pontinhas estão retas certo agora elas estão um pouquinho mais arredondadas achei

muito gritante vou botar 10 pixels só um pouquinho beleza outra coisa a fazer é fazer uma sombrinha aqui embaixo Vamos fazer uma sombra embaixo usar esse aqui ó box-shadow depois a gente vai aprender em detalhes Tá mas por enquanto vai vai repetindo aqui o box-shadow é o seguinte imagina que esse banco aqui tem uma sombra o primeiro parâmetro é quanto essa sombra vai andar para o lado o segundo parâmetro quantas a sombra vai andar para baixo o terceiro parâmetro é contra essa Sombra Vai espalhar e o último parâmetro é quanto de Transparência essa sombra vai

ter com a cor né cor e transparência eu vou te mostrar aqui ó vou botar 10 eu vou botar bem gritante 10 pixels 10 pixels 10 pixels Preto a gente vai tornar a coisa mais bonitinha tá vendo ficou 10 pixels andando para o lado 10 pixels andando para baixo 10 pixels de espalhamento esperando que a sombra tá as paradinha e preto que a cor eu vou fazer o seguinte agora depois a gente vai aprender os parâmetros direito vou botar 5:05 para andar para ficar mais discreta tá vendo vou colocar também a vou botar uns o

centro de três pra ficar mais dura não vou botar 15 aqui botar ela bem espalhada ginha e eu não quero ela preta porque ela Preta tá muito escura eu vou pegar aqui ó a cor mais escura que tem vou copiar vou jogar ela aqui até só que quando fizer isso ela meio que vai sumir porque ela é a mesma cor que tá aqui atrás que que eu vou fazer aqui ó passa o mouse em cima e aí Olha só se você quiser trabalhar monocromia na você simplesmente pode arrastá-la para baixo você vai encontrando um tom

da mesma cor só que mais escura será sempre arraste para baixo quando você quer trabalhar monocromia então tá vendo já deu uma sombreada bonitinho aqui e outra coisa que eu vou fazer mexer na transparência vou transformar RGB em RGB a passa o mouse em cima do RGB e vou mexer nessa transparência para ela ficar mais discreta vou arrastar tem um pouquinho acima da metade quando eu atualizar falar ela ficou com uma sombrinha você percebe a sombra só que é bem sua vizinha dela meu o título aqui eu vou colocar ele no meio então eu vou

pegar aqui o meu olhar um a gente vai ver se eu não me engano daqui é dois capítulos isso text-align-center para ele ficar no meio falar certo e por fim eu vou fazer uma sombrinha aqui no texto pra gente não ficar muito alongado aqui no vídeo eu vou botar um Tex Shadow mesmo esquema um só que eu vou botar um pixel deslocamento lateral um fixa deslocamento para baixo 10 pixels de espalhamento vou botar Preto a gente vai tirar esse preto já vai lá ficou só uma sombrinha aqui deixa eu colocar dois picos de pagamento e

ficar um pouquinho só e aqui o que eu vou fazer mesmo esquema vou pegar essa cor para jogar aqui certo ele meio que sumiu eu vou pegar ela vou trabalhar ela só arrastando para baixo só arrastei para baixo já ficou uma sombrinha bem discreta também vou trabalhar um pouco ou a transparência e falar vendo ela ficou ligeiramente estufada você não precisa no teu mostrar aqui tem sombra mostrar aqui tem né o número discreto mas discreta configuração aqui pessoa então é só cara dá uma olhada no meu código meu site é esse aqui eu vou tirar

o estilo vou dar control-x isso era só site só de vir aqui ó dá control ver ó já virou isso e olha como ficou harmônico o negócio olha como é que o nosso conteúdo teve harmonia das cores eu utilizei cores que fazem sentido o meu conteúdo Claro depois eu poderia fazer algumas sides aqui do lado com um desses tons aqui poderia dizer que o link quando eu passar em cima de vai ficar escuro enquanto eu não passar ele vai ficar clarinho a gente ainda tem mais aprender isso que eu quero te mostrar a gente tinha

um projeto totalmente sem estilo e agora eu tenho um projeto com estilo e harmônico a coisa funciona harmonicamente graças a escolha coerente de cores fechou E você tá gostando desse curso tá achando que ele é útil para você e também para uma comunidade inteira então não pensa duas vezes antes de compartilhar esse curso com as pessoas se você participa de qualquer comunidade qualquer grupo no Facebook e você tem aquele grupo Pão de estudo do seu colégio ou faculdade no WhatsApp ou no telegram Não esquece de divulgar os nossos links você ajuda muito divulgando o link

da playlist completa e como esse curso vai ter cinco módulos vão ser cinco playlists eu te agradeço bastante se você ajudar com esse compartilhamento foi pelo Instagram não esquece de marcar a gente nas redes sociais Então é isso meu querido é isso minha querida ou isso a gente encerra aqui o capítulo 13 a gente falou sobre cores no próximo a gente vai até voltar sobre o assunto de designer porque a gente vai falar muito sobre como escolher boas Fontes também há Outro fator muito importante do Design vai por mim não desmotivo anão que a gente

tá aprendendo HTML e CSS do jeito mais moderno do jeito mais completo utilizando os há setores decisão das melhores propriedades as melhores declarações e mega atualizado aí com todos os conceitos de HTML5 e css3 pode confiar em mim Fechou então é isso Bons estudos para ti que escolhi uma planeta qualquer vai lá no Adobe Colors escolhe uma paleta um monta você mesmo sua paleta de 5 e brinca criando seu site utilizando essas coisas que você fez na parede beleza um grande abraço a gente se vê na próxima aula e no próximo capítulo tchau tchau [Música]

[Aplausos] E aí E aí [Música]