Tudo bem, de volta.
Neste vídeo, vamos trabalhar no estilo do nosso site agora.
Definitivamente, não está perto do que deveria parecer no final.
Então, vamos compará-los lado a lado.
Aqui estamos aqui.
Então, algumas das grandes mudanças que precisamos para fazer arredondar os cantos, adicionando alguns espaçamentos aqui em cima.
Alterando o estilo dos botões aqui.
conseguimos um efeito de deslocamento, nossos botões são definitivamente hediondos e nós não temos nenhum efeito sobre ele.
Então, esses botões realmente não se parecem com botões até você passar por cima deles e nós
Também a posição deles está um pouco errada.
Como você pode ver se eu acho que aqui eu recebo texto, mas se eu estivesse fresco, esse espaço de tecnologia já foi ocupado
em relação à nossa versão se eu acho que o texto empurra tudo para os lados.
Também há uma animação aqui.
Então, quando eu clico em notar como eles desaparecem devagar nos nossos quando clicamos bem se eu clicar em um erro que
ele imediatamente foi removido.
Então queremos adicionar uma transição para isso.
Também temos o H-1 aqui que precisa de algum trabalho no nosso.
Precisa ocupar mais espaço.
Precisamos alterar a cor de fundo.
Queremos mudar a fonte.
Nós precisamos ter certeza de que o lapso de nossa cor está formatado corretamente, por isso está em sua própria linha
e é uma fonte maior.
Também precisamos alterar a fonte para todo o corpo.
Então, essas são todas da mesma fonte.
E, finalmente, você notará que temos um pouco de espaço aqui entre a faixa
e o fim do corpo e, na versão da solução, não há espaço.
ESTÁ BEM.
Comecemos por abordar primeiro este H-1.
Então, vamos para o meu texto sublinhado e vou para o H-1 e o primeiro a fazer é alinhar as coisas
no meio, como você pode ver na solução.
As coisas estão alinhadas ao centro.
Então, tudo o que precisamos fazer é adicionar texto alinhado no centro e salvar e atualizar.
Ok, leve melhoria.
Em seguida, vamos mudar a cor do plano de fundo para que a cor ainda seja azul, mas você notará
que, se eu atualizar a página agora, funciona perfeitamente.
Mas se eu atualizar novamente e depois ganho o jogo ou clico em novas cores.
Ele volta a preto e é porque o nosso código javascript está sobrescrevendo que estamos configurando-o
de volta a essa cor cinzenta cinza escuro em nosso javascript.
Precisamos encontrar os lugares onde estamos redefinindo a esta cor que é 2 3 2 3 2 3.
Aqui vamos nós.
Nós só queremos mudar isso para ser ainda azul.
E isso também é quando eu atualizo, ele ainda é azul.
Recebo novas cores.
Permanece como ainda azul.
ESTÁ BEM.
Então é isso.
Agora vamos nos livrar de todo o espaço preto de cada lado do nosso H-1.
Então, no nosso H-1, vamos desembarcar de toda margem de margem zero no topo e na parte inferior esquerda e direita.
Então observe o que acontece quando fazer isso.
Esse espaço preto desaparece em todos os lados, exceto por esse pouco de espaçamento na parte superior esquerda e direita.
E isso não está vindo ou H-1 que realmente está vindo do corpo.
Então, para corrigir que podemos ir ao corpo e dar-lhe margem zero.
E, agora, preste atenção a essa pequena lacuna que vou atualizar e isso vai embora.
Então, nossa faixa branca vai todo o caminho até o lado exatamente como faz nesta versão aqui.
ESTÁ BEM.
Em seguida, vamos nos concentrar na diversão.
Então, a diversão vai ser a mesma para todos os nossos elementos.
Os botões e o H-1 e o span aqui são todos os tipos de letras de letra ligeiramente diferentes.
E nós vamos usar apenas uma das fontes incorporadas, as covardes do sistema que se chama Avenir.
Então, essa será a família de fontes Avenir.
Essa é uma fonte que pode não funcionar em todos os sistemas lá fora.
Então, vamos adicionar uma outra opção, que é Mont. Serat assim.
Então, acabamos com essa diversão, o que, obviamente, não parece exatamente o mesmo.
E isso se resume ao nosso peso de fonte.
Então precisamos mudar o peso desta fonte porque é um H1.
O padrão é torná-lo em negrito ou ter como 700 ou 800 ou mesmo peso de fonte 900.
O que queremos fazer é dar-lhe o peso da fonte normal.
Então, quando o nosso H-1 pode adicionar peso de fonte normal e salvar.
Atualizar.
Isso está se aproximando.
Agora, há algumas outras coisas que precisamos mudar.
garantir que nossa cor esteja em sua própria linha e que nós dominamos essa extensão ligeiramente diferente fazer isso.
O primeiro deles é que isso é tudo em letras maiúsculas e podemos fazer isso com o RCSS usando o texto transformar
maiúsculas e salvar Então, agora olhe mais de perto e também queremos
Nós vamos passar aqui para a nossa equipe e, na verdade, vamos editar o idoso um pouco
para ele.
E esta é a primeira maneira que vamos fazer isso funcionar.
Veremos outra maneira de fazê-lo com Pearcey SS Mas vamos começar por desenhar isso onde temos o
ótimo em uma linha e depois para adicionar uma pausa.
e fácil de começar a adicionar alguns retornos e algumas quebras de linha e é só isso que essa tag faz. uma quebra de linha.
Nós podemos usar a etiqueta abr e, na verdade, essa não é uma ótima idéia, tanto quanto o estilo
é um pouco franzido, mas é uma maneira rápida
Então, queremos um depois do Ótimo, queremos uma pausa e, em seguida, a nossa extensão e então queremos outra quebra e, em seguida, o
jogo de cores na parte inferior e se atualizarmos Agora você pode ver que estamos nos aproximando.
Agora precisamos nos concentrar em tornar o espaço muito maior.
Então, essa banda tem uma idéia de exibição em cores.
Então, iremos para R C S S e selecione a exibição colorida assim.
Id color display e então vamos dizer que o tamanho da fonte é 200 por cento do tamanho da fonte H-1.
E se atualizarmos, agora temos esse tamanho de fonte muito maior.
E estamos nos aproximando.
Nós temos nossos intervalos aqui.
Você também percebe que temos muito mais espaço entre as linhas do que fazemos aqui.
Então, há algumas coisas que podemos fazer para trabalhar nisso.
O primeiro é alterar a altura da linha.
Então, daremos uma linha de altura de 1. 1 e salve.
E vamos ver nossa versão novamente e atualizar e você pode ver que diminui um pouco.
Mas agora perdemos o espaço no topo e no fundo.
Precisamos de um pouco de espaço lá.
Então, o que faremos é entrar e adicionar algum preenchimento.
Então, vamos adicionar o preenchimento para cima e para baixo, não apenas para a esquerda e para a
direita, e queremos 20 pixels na parte superior e inferior para que possamos fazer isso exatamente como este preenchimento 20 pixels e zero.
Nós também poderíamos ter feito o preenchimento do top 20 pixels e o preenchimento inferior, mas esta é uma maneira mais agradável de
fazê-lo atualizar e você pode ver que estamos quase lá agora.
Então nosso cabeçalho parece bem.
Nós temos a fonte correta da fonte correta, é tudo em letras maiúsculas a cor de fundo correta.
Certifique-se de que, à medida que eu jogo, fica correto parece tudo bem.
A próxima coisa que devemos abordar são os botões desta barra de navegação.
Portanto, definitivamente temos um longo caminho a percorrer para melhorar.
A primeira coisa que queremos fazer é livrar-se das fronteiras, então não temos essa fronteira óbvia em
torno do botão.
Nós também queremos livrar-nos da cor de fundo.
Portanto, não deve haver antecedentes, como você pode ver aqui.
É apenas esperar até que nós hover ou até que nós selecionamos um.
Também queremos garantir que a família de fontes seja a mesma fonte desta fonte aqui.
Então vamos começar.
E vou selecionar todos os botões, então botão, e vamos apenas dizer nada e salvar.
Preste atenção nos botões quando eu atualizar.
ESTÁ BEM.
Então, agora não temos fronteira.
Mas ainda temos essa cor de fundo.
Então, agora, esse mesmo fundo, nenhum e salve e atualize e estamos nos aproximando.
Então, agora temos apenas texto simples.
E nós começaremos fazendo com que todo esse texto seja maiúsculo como nós temos aqui.
Então, usamos a transformação de texto novamente, basta copiar essa linha sobre colar que lá e atualizar.
Agora, nossos botões estão em maiúscula.
A próxima coisa que queremos fazer é certificar-se de que o botão vai todo o caminho
de cima para baixo do contêiner div stripe.
Agora, apenas ocupa parte do espaço para que possamos fazer isso, estabelecendo altura para 100%.
E isso significa que vai demorar até 100 por cento do elemento contendo, como você pode ver,
que nos aproxima muito.
Agora precisamos mudar algumas cores, altere o tamanho da fonte do peso da fonte e, em seguida,
altere o efeito hover que ainda não configuramos.
A próxima coisa que fará é fazer com que a fonte aguarde um pouco mais e mudar a cor para
ficar ainda azul.
Então, o peso da fonte fará setecentos e depois a cor também será azul.
E vamos verificar isso atualizar.
Então, fica um pouco mais velho e você também pode ver que a cor agora
mudou para o mesmo azul da mesma cor que temos aqui.
Há uma mudança muito pequena que podemos fazer, que é mudar o espaçamento das letras para ser um pixel.
E se você prestar atenção quando eu atualizar, você pode ver coisas separadas um pouco
entre cada letra.
Leslie vamos nos concentrar no tamanho da fonte.
Eles parecem um pouco pequenos demais.
Então, vamos apenas usar o tamanho da fonte e configurá-lo para ser herdado.
E se eu atualizar, você pode ver que eles herdam o tamanho da fonte e não precisamos dizer explicitamente isso.
Então vamos dar uma olhada agora.
Uma das grandes diferenças é que eles estão atualmente espaçados de maneira diferente.
Assim que a página estiver carregada, temos o espaço aqui na nossa versão.
No entanto, não temos esse espaço até clicarmos em um botão.
Então, o que precisamos fazer é realmente definir o intervalo que está aqui e esse espaço é chamado de mensagem e vamos querer ir
e dar-lhe algumas propriedades para que ele ocupe esse espaço e tudo o que precisamos
fazer é mudar um propriedade na verdade.
Então, vamos selecionar exibir nossa mensagem, que é essa fã e vamos mudar a
propriedade de exibição para estar na linha.
BLOCK Então, o que isso fará se eu atualizar você não notará uma grande diferença imediatamente,
mas isso é porque também precisamos atribuí-lo com você, conheça dar com 20 por cento e salvar e atualizar.
Agora temos esse intervalo, mesmo que não tenha nada nele que absorva 20% dessa tela.
Então, isso empurra esses elementos para o lado que é exatamente o que queremos.
Vamos dar uma olhada e compará-los.
Tudo bem, então parece muito próximo.
Agora, o que vamos trabalhar no próximo é conseguir que a classe selecionada corresponda à cor certa
e ter nosso efeito hover também.
Então, isso vai cair no nosso botão e nós vamos adicionar o efeito hover primeiro.
Então, tudo o que precisamos fazer é adicionar no botão Colan Huffer e
nós vamos mudar a cor da fonte para ser branco e a cor de fundo para ser azul de aço.
Então, basicamente, invertem as cores e nós vamos economizar e atualizar.
Agora que eu passo, você pode ver que eu entendo esse efeito.
Perfeito.
E a nossa classe selecionada que temos vai parecer exatamente a mesma coisa.
Apenas vou copiar os estilos.
Não há diferença quando estamos passando sobre algo versus quando é selecionado.
Eles devem parecer os mesmos.
Então você pode ver que parece certo e eu passo e só enquanto eu passo.
Obtém esse fundo azul e cor de texto em branco.
E quando eu mudo, ele vai embora.
Há uma pequena diferença.
Se eu passar o mouse sobre os botões da solução, fale com essa cor.
Não é apenas uma mudança instantânea na minha versão.
Ele simplesmente alterna instantaneamente.
Podemos consertar isso usando uma propriedade de transição C Ss dentro do seletor do botão.
Vamos escrever a transição e passá-la.
Dois argumentos são dois valores e o primeiro é o que queremos fazer de transição e, no nosso caso, vamos apenas
adicioná-lo a cada propriedade e, em seguida, o próximo é o tempo que queremos.
Então eu vou exagerar a princípio com dois segundos.
Então, novamente, a propriedade de transição é como podemos informar ao CSX como animar transições entre mudanças de cores ou
alterações de tamanho de fonte e propriedades.
Então, o que eu disse aqui é que, em qualquer momento, a propriedade muda em qualquer botão que, em nosso
caso, realmente seja apenas cor e fundo.
Portanto, sempre que a cor muda e a cor de fundo muda, deve demorar dois segundos e
você verá quando eu atualizar.
E eu passo.
Ah, isso ainda não está funcionando.
Estou perdendo meu s aqui 2. 00 s.
E agora, se eu atualizar e passar o mouse, demora dois segundos para desaparecer e quando eu clicar para adicionar a
classe selecionada também demora dois segundos e demora dois segundos para desaparecer quando eu sair.
Então dois segundos são definitivamente muito longos.
Eu acho que estou apontando para cerca de três segundos.
Vamos testar isso.
Aqui vamos nós.
Parece muito bom para mim.
A última grande coisa é obter os cantos arredondados nesses quadrados da maneira que conseguimos esses cantos arredondados
é usar uma propriedade chamada Rádion de fronteira.
Então eu tenho a mediana dos documentos abertos se quiser dar uma olhada.
É uma boa leitura.
Mas eles mostram alguns exemplos sobre as diferentes coisas que você pode fazer com um raio.
Então, o que vamos fazer é dar-lhe um pequeno raio de fronteira e estes são quadrados aqui.
E vamos dar uma olhada no que estamos buscando.
Então, esses são o que queremos receber.
Por isso, foi uma ligeira curva leve.
Vamos para a nossa classe quadrada e atribuir um raio de fronteira e vamos fazer algo realmente exagerado para começar.
Vou mostrar-lhe o que acontece se fizermos 50 por cento.
Nós conseguimos círculos e você pode realmente preferir usar círculos.
Eu estava pensando em usá-los, mas no final eu preferia esses quadrados de canto arredondados e
o número que usei é de 15%.
E apenas verificamos e comparamos essas.
OK, então isso parece ser bom.
Quinze por cento, mas se você quisesse, eu vou mostrar o que acontece se fizéssemos algo como 5 por
cento e atualizarmos.
Temos cantos levemente arredondados.
Então vou voltar para a minha atualização 15 e agora temos nossos bons cantos arredondados, mas também precisamos trabalhar para
obter o efeito da animação, porque quando eu clicar em um desses.
Observe como, quando a cor muda, desaparece, assim como o efeito flutuante desapareceu dentro e fora.
Para conseguir isso, também precisamos usar a propriedade de transição, mas de uma maneira ligeiramente diferente.
para o quadrado e a única coisa que queremos fazer é a cor de fundo ou apenas o plano de fundo.
Então eu vou
E novamente vamos fazer um longo tempo como 2. 0 segundos e veja como isso parece.
Então vou atualizar e vou clicar em um desses.
Você pode ver que demora dois segundos para desaparecer.
Então, não queremos que dure algo por muito tempo.
Provavelmente, vá para zero ponto seis talvez.
Vamos tentar isso.
ESTÁ BEM.
Isso parece razoável.
Então você pode ver sempre que esse fundo muda, é preciso 0. 6 segundos.
O que é diferente, porém, é que, quando outras propriedades mudam, não os anima como os
nossos botões, quando dizemos quando qualquer propriedade muda, deve demorar três segundos.
Estamos apenas visando o plano de fundo e isso muda.
Deve levar 0. 6 segundos.
Uma coisa menor que queremos estar ciente é que a propriedade de transição não funcionará em todos os navegadores da
maneira que o escrevemos agora para ser tão amigável quanto possível para o navegador.
Na verdade, precisamos adicionar mais duas propriedades que não notaremos nenhuma diferença na funcionalidade, mas
apenas para o suporte do navegador.
Então, a primeira é a transição do Web Kit Dasch e vamos adicionar o mesmo valor exato
aqui exatamente.
E então precisamos de outro que é este deve ser um dash Moz M. Ozy.
Portanto, estes são realmente prefixos do navegador.
Então o Web Kit é para o Web Kit, que é um mecanismo que os navegadores usam como o Safari.
E então temos Moz e Mozy, que é uma forma curta, é Zilah, sobre o qual o Firefox está construído.
Então, estes são apenas para adicionar mais suporte porque a propriedade de transição não está integrada
em todos os navegadores.
Então, atualizamos.
Nada deve parecer diferente.
Nosso jogo ainda funciona do mesmo jeito e ainda recebemos a mesma animação e
devemos fazer a mesma coisa aqui, quando fizermos a transição, simplesmente duplicar isso e mudar isso para ser de transição e fazer a transição
para todos os 0. 3 segundos para a transição MOOC.
coisa que podemos consertar aqui é o pouco de espaçamento entre a faixa e o início da nossa grade.
Uma última
Então, você pode ver que temos mais espaçamentos aqui que não temos aqui.
E agora, se inspecionarmos, temos um elemento que está em torno da nossa grade.
Nós temos nossos quadrados e nós temos um contêiner de identificação div e esse div de contêineres circunda todos os 6 quadrados.
Então, podemos usar isso e apenas adicionar algum espaçamento a esse div de contêiner, vamos adicionar uma margem
para cima e para baixo.
Então eu acho que já o denominamos um pouco.
Aqui vamos nós.
Então dissemos que a margem é zero.
E, automaticamente, o que faremos é dizer que a margem é de 20 pixels na parte superior e inferior e auto na esquerda e
na direita, que é como se centra.
Então queremos que seja auto na esquerda e direita, mas 20 pixels na atualização superior.
Temos o nosso espaçamento.
OK, então acabamos com o estilo por enquanto.