A próxima coisa que abordaremos é o fundo do corpo.
E isso realmente não é uma imagem de fundo, no entanto, se encontrarmos um que se parecesse a isso,
isso funcionaria bem.
Mas, na verdade, é um gradiente que o CSX está adicionando para mim.
Então, em essência, podemos escrever gradientes lineares e, ao invés de escrevê-los por conta própria, vou mostrar-lhe um
ótimo recurso que tem alguns gradientes de cores pré-feitos agradáveis ​​com os quais podemos trabalhar e que podemos
atualizar e editar em nosso próprio.
Então, ele é chamado gradient dot com.
E então tem um monte de diferentes gradientes, podemos usar as teclas de seta para ver algumas delas.
Então eu apenas passei até encontrar um que eu gostei.
Então, digamos que eu queria usar isso tudo o que precisamos fazer é clicar em obter o código CSSA ou
pressionar a tecla Enter e, em seguida, copiar este código para uma área de transferência e depois selecionaremos o corpo.
Então, coloque e coloque em.
Então é realmente apenas uma linha, mas existem todos os prefixos de navegador diferentes.
Então, para o Internet Explorer para o Firefox para o Chrome para a ópera, todos esses prefixos diferentes.
Mas o que isso faz.
Estamos definindo o cenário para o gradiente linear e estamos escolhendo duas cores e porcentagens diferentes
dessas cores e também o ângulo.
Então, deixe-me mostrar-lhe o que parece agora se atualizarmos os nossos.
Temos esse bom gradiente.
Então podemos continuar jogando por aí.
Você pode verificar alguns mais e sinta-se livre para usar o seu próprio.
Aquele que eu decidi, chamado Bora-Bora, aqui.
Então, vamos copiar essa cópia para a área de transferência e substituir esse código.
Tudo isso aqui com esse novo gradiente que novamente é apenas outro gradiente linear que outra pessoa
escreveu duas porcentagens diferentes de cores de cada um.
E vamos economizar.
E vá verificá-lo agora.
E nós vamos lá.
Então estamos nos aproximando.
A próxima grande coisa sobre a qual precisamos trabalhar são os ícones.
Então, temos um ícone de mais aparecer.
E o que isso faz é que mostra e esconde a forma e depois temos a lata de lixo.
Posso ver que também precisamos incluir esses ícones são parte de uma biblioteca chamada fonte.
Impressionante.
Então, vá para fonte incrível e apenas o google para o site da Web é o Fonte impressionante.
Eu a entendi.
E tudo o que é é uma coleção de um monte de ícones.
Então, deixe-me mostrar-lhe se olhamos sob os ícones, há uma enorme lista de todos os ícones diferentes que podemos usar para
que você possa ver lá.
Então, precisamos incluir esta biblioteca dentro do nosso aplicativo para que possamos fazer o download diretamente
e clicar no download ou também poderemos fazer uma fonte.
Incrível CDN e apenas use um desses CDN também.
Qualquer um funcionaria.
Então, por diversão, já que eles já baixaram a consulta do Jay, usarei o CD e aqui copi o link.
a página de índice Timo e eu preciso adicionar uma tag de link porque é um arquivo CSSA, então não é realmente um arquivo javascript ou
uma fonte, mas é um arquivo C Ss e vou salvar e o que isso faz é isso Na verdade, eu me
da um monte de aulas pré-construídas e pré-fabricadas que eu posso adicionar aos elementos, então vou lhe mostrar alguns exemplos.
Então eu irei para
Se você quisesse usar, diga a bateria vazia ou as três salas de bateria, tudo o que precisamos saber é que a classe é
chamada de uma dash bateria dash 3 dash courters. Então, precisamos adicionar uma apenas copie o código aqui
em algum lugar em nossa aplicação.
Vamos colocá-lo no H-1.
É uma marca de olho que representa ícone e nós lhe damos uma aula e não precisamos colocar nada aqui.
Nós deixamos isso vazio e isso significa que Rifan é impressionante.
ícone e economizará a atualização e agora temos esse ícone da bateria em vez do ícone da bateria de três quartos.
E então este é o nome do
Nós queremos o sinal de mais e a lata de lixo para que possamos ir até aqui e dentro do H-1 manteremos o ícone e
manteremos a classe F, mas queremos F. UMA. trace mais e sinta-se livre para usar seu próprio ícone.
Se você continuar a encontrar incrível e encontrar outro que você gosta porque também poderíamos usar
um tipo de lápis ou um lápis e papel e se eu estivesse fresco e agora tenha o sinal de
mais que entrou em estilo e se movesse para a direita e tudo o que precisamos fazer para isso é selecioná-lo primeiro,
então vamos selecionar o cão.
F um dash plus e flutuará bem assim e atualizará e agora está no site certo.
Agora vamos enfrentar as latas de lixo e ainda não vamos lidar com a animação.
Nós apenas vamos pegar a lata de lixo para aparecer em vez de um X.
Então, vamos voltar e em nossa espada, nós realmente vamos nos livrar dos X's e dentro do
período em que vamos adicionar outra e-tag e o e-TAG vai ter uma classe de FAA e o nome de O ícone
da lata de lixo é FAA Dasch lixo vamos copiar isso para o outro span e isso é apenas para o existente para usar quando a
página é carregada, mas nós temos três latas de lixo para as novas.
Ainda estamos lidando com o ex.
Então, queremos ir aqui para o nosso Javascript.
E quando escrevemos um novo, não queremos acrescentar uma extensão com o X.
Você deseja anexar um ícone e precisamos nos certificar de que nossas citações não interferem.
Então, se usarmos citações simples lá e economizar, e agora devemos ter um ícone de lata de lixo dentro da extensão.
Então vamos adicionar alguns novos.
Aqui vamos nós.
E eu ainda posso clicar porque eles ainda estão dentro de um intervalo.
Portanto, é um elemento de ícone em vez de um período.
Então, eu clique no evento ainda funcionando.
Agora vamos trabalhar nesta animação simples e tudo isso é feito com C avaliar os intervalos aqui são realmente
escondidos quando a página é carregada.
Eles têm uma riqueza de zero.
E então, quando eu desliso, estamos realmente aumentando a largura para 40 pixels e então estamos fazendo isso animado
usando a propriedade de transição.
Então vamos tentar um pouco disso.
Abra nosso arquivo CSSA e a primeira coisa que faremos é que o estilo abrange tanto tempo
e nós vamos dar-lhes uma cor de fundo que a cor vermelha que é e 4C 3 C e irá atualizar.
E agora temos esse fundo vermelho em torno disso.
A próxima coisa que faremos é dar-lhes uma altura de 40 pixels, o que não parece fazer muito ainda, mas uma vez que
adicionamos algumas outras propriedades, você notará uma diferença.
Vamos adicionar uma margem à direita de 20 pixels e voltar.
Agora, isso nos dá o espaço que queríamos aqui.
Em seguida, vamos dar-lhes texto alinhar o Centro,
que é apenas uma diferença muito pequena nos intervalos aqui.
Os ícones dentro de um importante são fazer o ícone muito branco, de modo que a cor branca.
Tudo bem.
Então, vou mostrar-lhe como fazer com que pareçam isso primeiro sem a animação para que eles
estejam sempre lá.
E então vamos buscá-los para animar para que eles estejam escondidos até que nós hover.
Então, estamos chegando perto, mas precisamos deles para ocupar mais espaço verticalmente e horizontalmente.
Então, vou adicionar um com uns 40 pixels que eventualmente vamos definir para zero e para configurar a exibição dois
na linha de Bloco.
E eu atualizo agora.
E isso parece exatamente.
Então, a próxima coisa é fazer a animação.
E a maneira como isso funciona, nós realmente vamos definir a largura como zero.
Então, todos esses intervalos têm com um zero até eu passar por cima de um aliado e então aumentamos
isso com 40 para esse intervalo.
Então vamos fazer isso agora.
um aliado e não apenas o span, mas quando passamos o mouse sobre um aliado, queremos selecionar o intervalo que está dentro de um
aliado que está sendo suspenso.
Eu vou definir com zero e, em seguida, quando passarmos o mouse sobre
Então, vamos definir com 40 pixels assim.
E vamos voltar para nossa própria versão e atualizar.
Você pode ver que as extensões já se foram.
E quando eu passar e voar, o intervalo aparece e o botão funciona.
Então, o próximo recurso é conseguir que ele seja animado para que ele não apareça apenas instantaneamente e,
para isso, usaremos a propriedade de transição.
e nós o tornaremos linear, o que apenas se refere à flexibilização, o que significa que ele se moverá a uma velocidade constante.
Então, no intervalo, vamos adicionar um ponto zero de transição dois segundos
E nós vamos lá.
Temos nossa animação agradável.
Há um pequeno item que me incomoda aqui, que é que o ícone ainda mostra mesmo quando o intervalo é
de zero pixels de largura.
Portanto, é realmente difícil de ver, mas veja o ícone aqui.
Ainda está lá, mesmo quando não estou pairando sobre isso.
Então, o que faremos é simplesmente definir a opacidade no intervalo para ser zero e, em seguida, configurá-lo para ser um quando deslocamos.
Portanto, opacidade zero e, em seguida, opacidade 1. 0 quando passamos o mouse.
E isso deve cuidar disso.
Então, agora não podemos ver os ícones.
Lá está e então desaparece e também desaparece porque a propriedade de transição está
afetando tudo.
Então vamos fazer isso 2. 2 segundos e eu vou te mostrar.
Observe como ele desaparece e depois desaparece.
Então essa é uma versão muito lenta.
E nós apenas faremos 0. 2.
Há uma pequena coisa irritante que deixamos que é se você olha muito perto aqui ou
aumenta o tamanho, há uma pequena lacuna entre a entrada e, em seguida, esta lista da UL.
Mas a lacuna desaparece quando eu me concentro agora, esbarrando.
E então, quando não estou concentrado, ele volta.
Então, para corrigir que vamos adicionar uma pequena borda invisível, na verdade, ela terá
uma cor apenas uma pequena borda de R. G. seja 0 0 0 0 0 0, o que acabaremos de ocupar o mesmo espaço que
nossa fronteira faz quando estivermos focados.
Então, vamos voltar e gostar da entrada que temos aqui e dar uma borda de R-Ga sólido de três pixéis.
zero zero zero zero.
Então, isso acabará por nos dar uma fronteira invisível.
Mas observe aqui que vou atualizar agora que essa pequena lacuna vai embora.
Então, agora, não só é o flush da borda quando a gente está focada, mas também há uma borda que
nos ajuda a liberar que na verdade não vemos