1
00:00:00,210 --> 00:00:03,460
A próxima coisa que abordaremos é o fundo do corpo.

2
00:00:03,660 --> 00:00:08,430
E isso realmente não é uma imagem de fundo, no entanto, se encontrarmos um que se parecesse a isso,

3
00:00:08,430 --> 00:00:09,270
isso funcionaria bem.

4
00:00:09,420 --> 00:00:13,590
Mas, na verdade, é um gradiente que o CSX está adicionando para mim.

5
00:00:13,650 --> 00:00:19,430
Então, em essência, podemos escrever gradientes lineares e, ao invés de escrevê-los por conta própria, vou mostrar-lhe um

6
00:00:19,470 --> 00:00:25,290
ótimo recurso que tem alguns gradientes de cores pré-feitos agradáveis ​​com os quais podemos trabalhar e que podemos

7
00:00:25,560 --> 00:00:27,470
atualizar e editar em nosso próprio.

8
00:00:27,750 --> 00:00:29,850
Então, ele é chamado gradient dot com.

9
00:00:30,030 --> 00:00:35,580
E então tem um monte de diferentes gradientes, podemos usar as teclas de seta para ver algumas delas.

10
00:00:36,180 --> 00:00:39,860
Então eu apenas passei até encontrar um que eu gostei.

11
00:00:40,050 --> 00:00:46,080
Então, digamos que eu queria usar isso tudo o que precisamos fazer é clicar em obter o código CSSA ou

12
00:00:46,080 --> 00:00:52,120
pressionar a tecla Enter e, em seguida, copiar este código para uma área de transferência e depois selecionaremos o corpo.

13
00:00:52,360 --> 00:00:56,960
Então, coloque e coloque em.

14
00:00:57,540 --> 00:01:02,610
Então é realmente apenas uma linha, mas existem todos os prefixos de navegador diferentes.

15
00:01:02,880 --> 00:01:09,130
Então, para o Internet Explorer para o Firefox para o Chrome para a ópera, todos esses prefixos diferentes.

16
00:01:09,240 --> 00:01:09,990
Mas o que isso faz.

17
00:01:10,020 --> 00:01:16,170
Estamos definindo o cenário para o gradiente linear e estamos escolhendo duas cores e porcentagens diferentes

18
00:01:16,170 --> 00:01:18,740
dessas cores e também o ângulo.

19
00:01:18,750 --> 00:01:24,390
Então, deixe-me mostrar-lhe o que parece agora se atualizarmos os nossos.

20
00:01:24,390 --> 00:01:26,190
Temos esse bom gradiente.

21
00:01:26,580 --> 00:01:28,420
Então podemos continuar jogando por aí.

22
00:01:28,620 --> 00:01:31,890
Você pode verificar alguns mais e sinta-se livre para usar o seu próprio.

23
00:01:31,980 --> 00:01:35,860
Aquele que eu decidi, chamado Bora-Bora, aqui.

24
00:01:36,210 --> 00:01:42,840
Então, vamos copiar essa cópia para a área de transferência e substituir esse código.

25
00:01:42,840 --> 00:01:49,410
Tudo isso aqui com esse novo gradiente que novamente é apenas outro gradiente linear que outra pessoa

26
00:01:49,410 --> 00:01:52,870
escreveu duas porcentagens diferentes de cores de cada um.

27
00:01:53,150 --> 00:01:54,450
E vamos economizar.

28
00:01:54,780 --> 00:01:56,250
E vá verificá-lo agora.

29
00:01:56,520 --> 00:01:57,830
E nós vamos lá.

30
00:01:57,840 --> 00:01:59,190
Então estamos nos aproximando.

31
00:01:59,430 --> 00:02:02,860
A próxima grande coisa sobre a qual precisamos trabalhar são os ícones.

32
00:02:03,060 --> 00:02:05,530
Então, temos um ícone de mais aparecer.

33
00:02:05,640 --> 00:02:10,130
E o que isso faz é que mostra e esconde a forma e depois temos a lata de lixo.

34
00:02:10,130 --> 00:02:16,100
Posso ver que também precisamos incluir esses ícones são parte de uma biblioteca chamada fonte.

35
00:02:16,110 --> 00:02:16,780
Impressionante.

36
00:02:17,050 --> 00:02:22,650
Então, vá para fonte incrível e apenas o google para o site da Web é o Fonte impressionante.

37
00:02:22,660 --> 00:02:24,030
Eu a entendi.

38
00:02:24,930 --> 00:02:29,660
E tudo o que é é uma coleção de um monte de ícones.

39
00:02:29,970 --> 00:02:36,780
Então, deixe-me mostrar-lhe se olhamos sob os ícones, há uma enorme lista de todos os ícones diferentes que podemos usar para

40
00:02:38,260 --> 00:02:39,720
que você possa ver lá.

41
00:02:40,380 --> 00:02:48,030
Então, precisamos incluir esta biblioteca dentro do nosso aplicativo para que possamos fazer o download diretamente

42
00:02:48,030 --> 00:02:52,740
e clicar no download ou também poderemos fazer uma fonte.

43
00:02:52,740 --> 00:02:57,370
Incrível CDN e apenas use um desses CDN também.

44
00:02:57,450 --> 00:02:58,710
Qualquer um funcionaria.

45
00:02:59,100 --> 00:03:06,030
Então, por diversão, já que eles já baixaram a consulta do Jay, usarei o CD e aqui copi o link.

46
00:03:07,470 --> 00:03:15,780
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

47
00:03:15,780 --> 00:03:23,100
uma fonte, mas é um arquivo C Ss e vou salvar e o que isso faz é isso Na verdade, eu me

48
00:03:23,100 --> 00:03:29,540
da um monte de aulas pré-construídas e pré-fabricadas que eu posso adicionar aos elementos, então vou lhe mostrar alguns exemplos.

49
00:03:29,550 --> 00:03:30,940
Então eu irei para

50
00:03:31,230 --> 00:03:40,740
Se você quisesse usar, diga a bateria vazia ou as três salas de bateria, tudo o que precisamos saber é que a classe é

51
00:03:40,740 --> 00:03:47,760
chamada de uma dash bateria dash 3 dash courters. Então, precisamos adicionar uma apenas copie o código aqui

52
00:03:49,140 --> 00:03:51,350
em algum lugar em nossa aplicação.

53
00:03:51,510 --> 00:03:53,400
Vamos colocá-lo no H-1.

54
00:03:53,400 --> 00:03:58,980
É uma marca de olho que representa ícone e nós lhe damos uma aula e não precisamos colocar nada aqui.

55
00:03:59,070 --> 00:04:02,560
Nós deixamos isso vazio e isso significa que Rifan é impressionante.

56
00:04:02,700 --> 00:04:10,890
ícone e economizará a atualização e agora temos esse ícone da bateria em vez do ícone da bateria de três quartos.

57
00:04:10,890 --> 00:04:13,500
E então este é o nome do

58
00:04:13,500 --> 00:04:20,700
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

59
00:04:21,480 --> 00:04:28,070
manteremos a classe F, mas queremos F. UMA. trace mais e sinta-se livre para usar seu próprio ícone.

60
00:04:28,110 --> 00:04:33,420
Se você continuar a encontrar incrível e encontrar outro que você gosta porque também poderíamos usar

61
00:04:33,420 --> 00:04:40,050
um tipo de lápis ou um lápis e papel e se eu estivesse fresco e agora tenha o sinal de

62
00:04:40,800 --> 00:04:48,330
mais que entrou em estilo e se movesse para a direita e tudo o que precisamos fazer para isso é selecioná-lo primeiro,

63
00:04:48,330 --> 00:04:49,990
então vamos selecionar o cão.

64
00:04:50,280 --> 00:05:00,000
F um dash plus e flutuará bem assim e atualizará e agora está no site certo.

65
00:05:00,960 --> 00:05:06,250
Agora vamos enfrentar as latas de lixo e ainda não vamos lidar com a animação.

66
00:05:06,300 --> 00:05:09,810
Nós apenas vamos pegar a lata de lixo para aparecer em vez de um X.

67
00:05:10,260 --> 00:05:17,640
Então, vamos voltar e em nossa espada, nós realmente vamos nos livrar dos X's e dentro do

68
00:05:17,640 --> 00:05:27,030
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

69
00:05:27,030 --> 00:05:38,430
da lata de lixo é FAA Dasch lixo vamos copiar isso para o outro span e isso é apenas para o existente para usar quando a

70
00:05:38,920 --> 00:05:44,520
página é carregada, mas nós temos três latas de lixo para as novas.

71
00:05:44,730 --> 00:05:46,280
Ainda estamos lidando com o ex.

72
00:05:46,530 --> 00:05:50,310
Então, queremos ir aqui para o nosso Javascript.

73
00:05:50,310 --> 00:05:54,990
E quando escrevemos um novo, não queremos acrescentar uma extensão com o X.

74
00:05:55,290 --> 00:06:00,930
Você deseja anexar um ícone e precisamos nos certificar de que nossas citações não interferem.

75
00:06:00,930 --> 00:06:08,290
Então, se usarmos citações simples lá e economizar, e agora devemos ter um ícone de lata de lixo dentro da extensão.

76
00:06:08,870 --> 00:06:10,830
Então vamos adicionar alguns novos.

77
00:06:10,830 --> 00:06:11,650
Aqui vamos nós.

78
00:06:12,030 --> 00:06:15,320
E eu ainda posso clicar porque eles ainda estão dentro de um intervalo.

79
00:06:15,450 --> 00:06:18,680
Portanto, é um elemento de ícone em vez de um período.

80
00:06:19,530 --> 00:06:22,440
Então, eu clique no evento ainda funcionando.

81
00:06:22,470 --> 00:06:28,380
Agora vamos trabalhar nesta animação simples e tudo isso é feito com C avaliar os intervalos aqui são realmente

82
00:06:28,380 --> 00:06:30,210
escondidos quando a página é carregada.

83
00:06:30,210 --> 00:06:31,630
Eles têm uma riqueza de zero.

84
00:06:31,860 --> 00:06:38,760
E então, quando eu desliso, estamos realmente aumentando a largura para 40 pixels e então estamos fazendo isso animado

85
00:06:39,030 --> 00:06:40,950
usando a propriedade de transição.

86
00:06:41,430 --> 00:06:44,070
Então vamos tentar um pouco disso.

87
00:06:44,400 --> 00:06:53,850
Abra nosso arquivo CSSA e a primeira coisa que faremos é que o estilo abrange tanto tempo

88
00:06:54,510 --> 00:07:06,270
e nós vamos dar-lhes uma cor de fundo que a cor vermelha que é e 4C 3 C e irá atualizar.

89
00:07:06,460 --> 00:07:10,820
E agora temos esse fundo vermelho em torno disso.

90
00:07:10,830 --> 00:07:19,470
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

91
00:07:19,470 --> 00:07:22,680
adicionamos algumas outras propriedades, você notará uma diferença.

92
00:07:23,250 --> 00:07:29,140
Vamos adicionar uma margem à direita de 20 pixels e voltar.

93
00:07:29,200 --> 00:07:34,420
Agora, isso nos dá o espaço que queríamos aqui.

94
00:07:35,550 --> 00:07:38,760
Em seguida, vamos dar-lhes texto alinhar o Centro,

95
00:07:41,970 --> 00:07:45,700
que é apenas uma diferença muito pequena nos intervalos aqui.

96
00:07:45,990 --> 00:07:55,110
Os ícones dentro de um importante são fazer o ícone muito branco, de modo que a cor branca.

97
00:07:55,110 --> 00:07:55,970
Tudo bem.

98
00:07:56,220 --> 00:08:01,730
Então, vou mostrar-lhe como fazer com que pareçam isso primeiro sem a animação para que eles

99
00:08:01,740 --> 00:08:02,640
estejam sempre lá.

100
00:08:02,930 --> 00:08:06,830
E então vamos buscá-los para animar para que eles estejam escondidos até que nós hover.

101
00:08:06,870 --> 00:08:12,190
Então, estamos chegando perto, mas precisamos deles para ocupar mais espaço verticalmente e horizontalmente.

102
00:08:12,390 --> 00:08:20,360
Então, vou adicionar um com uns 40 pixels que eventualmente vamos definir para zero e para configurar a exibição dois

103
00:08:20,510 --> 00:08:21,990
na linha de Bloco.

104
00:08:22,440 --> 00:08:23,950
E eu atualizo agora.

105
00:08:24,870 --> 00:08:26,790
E isso parece exatamente.

106
00:08:26,790 --> 00:08:29,460
Então, a próxima coisa é fazer a animação.

107
00:08:29,760 --> 00:08:33,630
E a maneira como isso funciona, nós realmente vamos definir a largura como zero.

108
00:08:33,780 --> 00:08:40,410
Então, todos esses intervalos têm com um zero até eu passar por cima de um aliado e então aumentamos

109
00:08:40,410 --> 00:08:42,420
isso com 40 para esse intervalo.

110
00:08:42,870 --> 00:08:44,580
Então vamos fazer isso agora.

111
00:08:45,020 --> 00:08:53,370
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

112
00:08:53,370 --> 00:08:54,810
aliado que está sendo suspenso.

113
00:08:57,930 --> 00:09:02,480
Eu vou definir com zero e, em seguida, quando passarmos o mouse sobre

114
00:09:02,790 --> 00:09:08,020
Então, vamos definir com 40 pixels assim.

115
00:09:08,070 --> 00:09:11,310
E vamos voltar para nossa própria versão e atualizar.

116
00:09:11,670 --> 00:09:13,920
Você pode ver que as extensões já se foram.

117
00:09:14,310 --> 00:09:19,330
E quando eu passar e voar, o intervalo aparece e o botão funciona.

118
00:09:19,800 --> 00:09:25,470
Então, o próximo recurso é conseguir que ele seja animado para que ele não apareça apenas instantaneamente e,

119
00:09:25,800 --> 00:09:27,860
para isso, usaremos a propriedade de transição.

120
00:09:28,170 --> 00:09:38,340
e nós o tornaremos linear, o que apenas se refere à flexibilização, o que significa que ele se moverá a uma velocidade constante.

121
00:09:38,340 --> 00:09:43,680
Então, no intervalo, vamos adicionar um ponto zero de transição dois segundos

122
00:09:43,680 --> 00:09:44,520
E nós vamos lá.

123
00:09:44,520 --> 00:09:46,680
Temos nossa animação agradável.

124
00:09:47,250 --> 00:09:54,420
Há um pequeno item que me incomoda aqui, que é que o ícone ainda mostra mesmo quando o intervalo é

125
00:09:54,420 --> 00:09:56,110
de zero pixels de largura.

126
00:09:56,340 --> 00:09:59,970
Portanto, é realmente difícil de ver, mas veja o ícone aqui.

127
00:09:59,970 --> 00:10:03,230
Ainda está lá, mesmo quando não estou pairando sobre isso.

128
00:10:03,240 --> 00:10:11,040
Então, o que faremos é simplesmente definir a opacidade no intervalo para ser zero e, em seguida, configurá-lo para ser um quando deslocamos.

129
00:10:11,370 --> 00:10:17,580
Portanto, opacidade zero e, em seguida, opacidade 1. 0 quando passamos o mouse.

130
00:10:18,420 --> 00:10:19,840
E isso deve cuidar disso.

131
00:10:19,860 --> 00:10:22,370
Então, agora não podemos ver os ícones.

132
00:10:22,500 --> 00:10:28,680
Lá está e então desaparece e também desaparece porque a propriedade de transição está

133
00:10:28,950 --> 00:10:29,790
afetando tudo.

134
00:10:30,120 --> 00:10:34,740
Então vamos fazer isso 2. 2 segundos e eu vou te mostrar.

135
00:10:35,640 --> 00:10:40,810
Observe como ele desaparece e depois desaparece.

136
00:10:40,890 --> 00:10:42,560
Então essa é uma versão muito lenta.

137
00:10:43,200 --> 00:10:46,830
E nós apenas faremos 0. 2.

138
00:10:47,070 --> 00:10:53,250
Há uma pequena coisa irritante que deixamos que é se você olha muito perto aqui ou

139
00:10:53,250 --> 00:10:59,530
aumenta o tamanho, há uma pequena lacuna entre a entrada e, em seguida, esta lista da UL.

140
00:11:00,060 --> 00:11:03,810
Mas a lacuna desaparece quando eu me concentro agora, esbarrando.

141
00:11:04,200 --> 00:11:07,220
E então, quando não estou concentrado, ele volta.

142
00:11:07,500 --> 00:11:13,450
Então, para corrigir que vamos adicionar uma pequena borda invisível, na verdade, ela terá

143
00:11:13,530 --> 00:11:23,340
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

144
00:11:23,340 --> 00:11:24,690
nossa fronteira faz quando estivermos focados.

145
00:11:25,080 --> 00:11:34,560
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.

146
00:11:35,150 --> 00:11:38,640
zero zero zero zero.

147
00:11:39,210 --> 00:11:41,770
Então, isso acabará por nos dar uma fronteira invisível.

148
00:11:41,880 --> 00:11:47,420
Mas observe aqui que vou atualizar agora que essa pequena lacuna vai embora.

149
00:11:47,850 --> 00:11:53,580
Então, agora, não só é o flush da borda quando a gente está focada, mas também há uma borda que

150
00:11:53,580 --> 00:11:56,000
nos ajuda a liberar que na verdade não vemos