1
00:00:00,390 --> 00:00:01,650
Tudo bem, de volta.

2
00:00:01,660 --> 00:00:05,770
Neste vídeo, vamos trabalhar no estilo do nosso site agora.

3
00:00:05,850 --> 00:00:09,530
Definitivamente, não está perto do que deveria parecer no final.

4
00:00:09,810 --> 00:00:12,960
Então, vamos compará-los lado a lado.

5
00:00:13,530 --> 00:00:14,840
Aqui estamos aqui.

6
00:00:15,030 --> 00:00:21,280
Então, algumas das grandes mudanças que precisamos para fazer arredondar os cantos, adicionando alguns espaçamentos aqui em cima.

7
00:00:21,360 --> 00:00:23,260
Alterando o estilo dos botões aqui.

8
00:00:23,490 --> 00:00:27,750
conseguimos um efeito de deslocamento, nossos botões são definitivamente hediondos e nós não temos nenhum efeito sobre ele.

9
00:00:28,470 --> 00:00:32,370
Então, esses botões realmente não se parecem com botões até você passar por cima deles e nós

10
00:00:32,370 --> 00:00:35,200
Também a posição deles está um pouco errada.

11
00:00:35,550 --> 00:00:43,130
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

12
00:00:43,200 --> 00:00:48,310
em relação à nossa versão se eu acho que o texto empurra tudo para os lados.

13
00:00:48,470 --> 00:00:51,480
Também há uma animação aqui.

14
00:00:51,510 --> 00:01:00,360
Então, quando eu clico em notar como eles desaparecem devagar nos nossos quando clicamos bem se eu clicar em um erro que

15
00:01:01,170 --> 00:01:02,990
ele imediatamente foi removido.

16
00:01:03,000 --> 00:01:05,790
Então queremos adicionar uma transição para isso.

17
00:01:05,790 --> 00:01:09,200
Também temos o H-1 aqui que precisa de algum trabalho no nosso.

18
00:01:09,390 --> 00:01:10,920
Precisa ocupar mais espaço.

19
00:01:11,130 --> 00:01:12,930
Precisamos alterar a cor de fundo.

20
00:01:12,930 --> 00:01:14,520
Queremos mudar a fonte.

21
00:01:14,910 --> 00:01:21,240
Nós precisamos ter certeza de que o lapso de nossa cor está formatado corretamente, por isso está em sua própria linha

22
00:01:21,240 --> 00:01:22,610
e é uma fonte maior.

23
00:01:22,710 --> 00:01:25,910
Também precisamos alterar a fonte para todo o corpo.

24
00:01:25,950 --> 00:01:28,020
Então, essas são todas da mesma fonte.

25
00:01:28,080 --> 00:01:32,970
E, finalmente, você notará que temos um pouco de espaço aqui entre a faixa

26
00:01:32,970 --> 00:01:37,470
e o fim do corpo e, na versão da solução, não há espaço.

27
00:01:38,030 --> 00:01:38,490
ESTÁ BEM.

28
00:01:38,550 --> 00:01:41,580
Comecemos por abordar primeiro este H-1.

29
00:01:41,990 --> 00:01:49,740
Então, vamos para o meu texto sublinhado e vou para o H-1 e o primeiro a fazer é alinhar as coisas

30
00:01:49,740 --> 00:01:52,700
no meio, como você pode ver na solução.

31
00:01:52,890 --> 00:01:54,170
As coisas estão alinhadas ao centro.

32
00:01:54,210 --> 00:02:03,070
Então, tudo o que precisamos fazer é adicionar texto alinhado no centro e salvar e atualizar.

33
00:02:03,360 --> 00:02:06,520
Ok, leve melhoria.

34
00:02:06,540 --> 00:02:14,010
Em seguida, vamos mudar a cor do plano de fundo para que a cor ainda seja azul, mas você notará

35
00:02:14,010 --> 00:02:17,280
que, se eu atualizar a página agora, funciona perfeitamente.

36
00:02:17,400 --> 00:02:23,010
Mas se eu atualizar novamente e depois ganho o jogo ou clico em novas cores.

37
00:02:23,010 --> 00:02:28,230
Ele volta a preto e é porque o nosso código javascript está sobrescrevendo que estamos configurando-o

38
00:02:28,230 --> 00:02:31,970
de volta a essa cor cinzenta cinza escuro em nosso javascript.

39
00:02:32,010 --> 00:02:37,320
Precisamos encontrar os lugares onde estamos redefinindo a esta cor que é 2 3 2 3 2 3.

40
00:02:37,320 --> 00:02:38,040
Aqui vamos nós.

41
00:02:38,100 --> 00:02:40,820
Nós só queremos mudar isso para ser ainda azul.

42
00:02:41,340 --> 00:02:44,690
E isso também é quando eu atualizo, ele ainda é azul.

43
00:02:44,850 --> 00:02:45,970
Recebo novas cores.

44
00:02:45,990 --> 00:02:47,870
Permanece como ainda azul.

45
00:02:48,360 --> 00:02:48,810
ESTÁ BEM.

46
00:02:48,870 --> 00:02:49,830
Então é isso.

47
00:02:49,830 --> 00:02:54,430
Agora vamos nos livrar de todo o espaço preto de cada lado do nosso H-1.

48
00:02:54,870 --> 00:03:02,230
Então, no nosso H-1, vamos desembarcar de toda margem de margem zero no topo e na parte inferior esquerda e direita.

49
00:03:02,250 --> 00:03:04,820
Então observe o que acontece quando fazer isso.

50
00:03:04,820 --> 00:03:10,590
Esse espaço preto desaparece em todos os lados, exceto por esse pouco de espaçamento na parte superior esquerda e direita.

51
00:03:10,830 --> 00:03:14,870
E isso não está vindo ou H-1 que realmente está vindo do corpo.

52
00:03:14,940 --> 00:03:19,420
Então, para corrigir que podemos ir ao corpo e dar-lhe margem zero.

53
00:03:19,680 --> 00:03:24,230
E, agora, preste atenção a essa pequena lacuna que vou atualizar e isso vai embora.

54
00:03:24,390 --> 00:03:30,040
Então, nossa faixa branca vai todo o caminho até o lado exatamente como faz nesta versão aqui.

55
00:03:30,150 --> 00:03:30,970
ESTÁ BEM.

56
00:03:31,080 --> 00:03:33,080
Em seguida, vamos nos concentrar na diversão.

57
00:03:33,450 --> 00:03:36,180
Então, a diversão vai ser a mesma para todos os nossos elementos.

58
00:03:36,180 --> 00:03:41,690
Os botões e o H-1 e o span aqui são todos os tipos de letras de letra ligeiramente diferentes.

59
00:03:41,850 --> 00:03:46,660
E nós vamos usar apenas uma das fontes incorporadas, as covardes do sistema que se chama Avenir.

60
00:03:46,920 --> 00:03:52,730
Então, essa será a família de fontes Avenir.

61
00:03:53,430 --> 00:03:56,440
Essa é uma fonte que pode não funcionar em todos os sistemas lá fora.

62
00:03:56,580 --> 00:04:03,930
Então, vamos adicionar uma outra opção, que é Mont. Serat assim.

63
00:04:04,740 --> 00:04:10,050
Então, acabamos com essa diversão, o que, obviamente, não parece exatamente o mesmo.

64
00:04:10,170 --> 00:04:12,460
E isso se resume ao nosso peso de fonte.

65
00:04:12,540 --> 00:04:16,040
Então precisamos mudar o peso desta fonte porque é um H1.

66
00:04:16,050 --> 00:04:21,520
O padrão é torná-lo em negrito ou ter como 700 ou 800 ou mesmo peso de fonte 900.

67
00:04:21,600 --> 00:04:24,350
O que queremos fazer é dar-lhe o peso da fonte normal.

68
00:04:24,420 --> 00:04:32,230
Então, quando o nosso H-1 pode adicionar peso de fonte normal e salvar.

69
00:04:32,400 --> 00:04:33,400
Atualizar.

70
00:04:33,710 --> 00:04:34,700
Isso está se aproximando.

71
00:04:34,700 --> 00:04:37,550
Agora, há algumas outras coisas que precisamos mudar.

72
00:04:37,590 --> 00:04:44,030
garantir que nossa cor esteja em sua própria linha e que nós dominamos essa extensão ligeiramente diferente fazer isso.

73
00:04:45,330 --> 00:04:52,580
O primeiro deles é que isso é tudo em letras maiúsculas e podemos fazer isso com o RCSS usando o texto transformar

74
00:04:52,700 --> 00:04:56,510
maiúsculas e salvar Então, agora olhe mais de perto e também queremos

75
00:04:56,570 --> 00:05:00,950
Nós vamos passar aqui para a nossa equipe e, na verdade, vamos editar o idoso um pouco

76
00:05:00,950 --> 00:05:01,340
para ele.

77
00:05:01,700 --> 00:05:04,120
E esta é a primeira maneira que vamos fazer isso funcionar.

78
00:05:04,160 --> 00:05:09,350
Veremos outra maneira de fazê-lo com Pearcey SS Mas vamos começar por desenhar isso onde temos o

79
00:05:09,350 --> 00:05:12,590
ótimo em uma linha e depois para adicionar uma pausa.

80
00:05:12,590 --> 00:05:19,070
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.

81
00:05:19,070 --> 00:05:24,080
Nós podemos usar a etiqueta abr e, na verdade, essa não é uma ótima idéia, tanto quanto o estilo

82
00:05:24,080 --> 00:05:26,440
é um pouco franzido, mas é uma maneira rápida

83
00:05:26,620 --> 00:05:33,200
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

84
00:05:33,200 --> 00:05:37,970
jogo de cores na parte inferior e se atualizarmos Agora você pode ver que estamos nos aproximando.

85
00:05:38,060 --> 00:05:41,280
Agora precisamos nos concentrar em tornar o espaço muito maior.

86
00:05:41,660 --> 00:05:44,160
Então, essa banda tem uma idéia de exibição em cores.

87
00:05:44,300 --> 00:05:49,730
Então, iremos para R C S S e selecione a exibição colorida assim.

88
00:05:49,900 --> 00:05:58,200
Id color display e então vamos dizer que o tamanho da fonte é 200 por cento do tamanho da fonte H-1.

89
00:05:58,550 --> 00:06:01,860
E se atualizarmos, agora temos esse tamanho de fonte muito maior.

90
00:06:02,210 --> 00:06:03,630
E estamos nos aproximando.

91
00:06:03,680 --> 00:06:05,210
Nós temos nossos intervalos aqui.

92
00:06:05,330 --> 00:06:10,040
Você também percebe que temos muito mais espaço entre as linhas do que fazemos aqui.

93
00:06:10,280 --> 00:06:12,970
Então, há algumas coisas que podemos fazer para trabalhar nisso.

94
00:06:12,980 --> 00:06:15,780
O primeiro é alterar a altura da linha.

95
00:06:16,280 --> 00:06:21,580
Então, daremos uma linha de altura de 1. 1 e salve.

96
00:06:22,190 --> 00:06:27,040
E vamos ver nossa versão novamente e atualizar e você pode ver que diminui um pouco.

97
00:06:27,290 --> 00:06:30,440
Mas agora perdemos o espaço no topo e no fundo.

98
00:06:30,440 --> 00:06:32,190
Precisamos de um pouco de espaço lá.

99
00:06:32,210 --> 00:06:35,050
Então, o que faremos é entrar e adicionar algum preenchimento.

100
00:06:35,450 --> 00:06:40,610
Então, vamos adicionar o preenchimento para cima e para baixo, não apenas para a esquerda e para a

101
00:06:40,610 --> 00:06:47,050
direita, e queremos 20 pixels na parte superior e inferior para que possamos fazer isso exatamente como este preenchimento 20 pixels e zero.

102
00:06:47,300 --> 00:06:54,980
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

103
00:06:54,980 --> 00:06:58,590
fazê-lo atualizar e você pode ver que estamos quase lá agora.

104
00:06:58,880 --> 00:07:00,670
Então nosso cabeçalho parece bem.

105
00:07:00,880 --> 00:07:05,830
Nós temos a fonte correta da fonte correta, é tudo em letras maiúsculas a cor de fundo correta.

106
00:07:05,870 --> 00:07:11,240
Certifique-se de que, à medida que eu jogo, fica correto parece tudo bem.

107
00:07:11,300 --> 00:07:14,800
A próxima coisa que devemos abordar são os botões desta barra de navegação.

108
00:07:15,130 --> 00:07:18,080
Portanto, definitivamente temos um longo caminho a percorrer para melhorar.

109
00:07:18,080 --> 00:07:23,000
A primeira coisa que queremos fazer é livrar-se das fronteiras, então não temos essa fronteira óbvia em

110
00:07:23,000 --> 00:07:23,840
torno do botão.

111
00:07:23,870 --> 00:07:27,230
Nós também queremos livrar-nos da cor de fundo.

112
00:07:27,320 --> 00:07:29,290
Portanto, não deve haver antecedentes, como você pode ver aqui.

113
00:07:29,330 --> 00:07:33,210
É apenas esperar até que nós hover ou até que nós selecionamos um.

114
00:07:33,250 --> 00:07:37,790
Também queremos garantir que a família de fontes seja a mesma fonte desta fonte aqui.

115
00:07:37,790 --> 00:07:39,230
Então vamos começar.

116
00:07:39,230 --> 00:07:48,620
E vou selecionar todos os botões, então botão, e vamos apenas dizer nada e salvar.

117
00:07:48,800 --> 00:07:50,850
Preste atenção nos botões quando eu atualizar.

118
00:07:51,170 --> 00:07:51,790
ESTÁ BEM.

119
00:07:51,980 --> 00:07:53,520
Então, agora não temos fronteira.

120
00:07:53,720 --> 00:07:55,600
Mas ainda temos essa cor de fundo.

121
00:07:55,850 --> 00:08:02,760
Então, agora, esse mesmo fundo, nenhum e salve e atualize e estamos nos aproximando.

122
00:08:02,950 --> 00:08:04,800
Então, agora temos apenas texto simples.

123
00:08:05,120 --> 00:08:09,520
E nós começaremos fazendo com que todo esse texto seja maiúsculo como nós temos aqui.

124
00:08:09,740 --> 00:08:16,330
Então, usamos a transformação de texto novamente, basta copiar essa linha sobre colar que lá e atualizar.

125
00:08:16,400 --> 00:08:18,840
Agora, nossos botões estão em maiúscula.

126
00:08:18,920 --> 00:08:23,240
A próxima coisa que queremos fazer é certificar-se de que o botão vai todo o caminho

127
00:08:23,260 --> 00:08:25,370
de cima para baixo do contêiner div stripe.

128
00:08:25,400 --> 00:08:31,580
Agora, apenas ocupa parte do espaço para que possamos fazer isso, estabelecendo altura para 100%.

129
00:08:31,750 --> 00:08:37,490
E isso significa que vai demorar até 100 por cento do elemento contendo, como você pode ver,

130
00:08:37,490 --> 00:08:38,900
que nos aproxima muito.

131
00:08:38,930 --> 00:08:44,870
Agora precisamos mudar algumas cores, altere o tamanho da fonte do peso da fonte e, em seguida,

132
00:08:44,870 --> 00:08:47,540
altere o efeito hover que ainda não configuramos.

133
00:08:48,010 --> 00:08:54,050
A próxima coisa que fará é fazer com que a fonte aguarde um pouco mais e mudar a cor para

134
00:08:54,050 --> 00:08:54,980
ficar ainda azul.

135
00:08:55,040 --> 00:09:02,350
Então, o peso da fonte fará setecentos e depois a cor também será azul.

136
00:09:02,650 --> 00:09:05,370
E vamos verificar isso atualizar.

137
00:09:06,020 --> 00:09:11,180
Então, fica um pouco mais velho e você também pode ver que a cor agora

138
00:09:11,240 --> 00:09:14,750
mudou para o mesmo azul da mesma cor que temos aqui.

139
00:09:14,760 --> 00:09:21,740
Há uma mudança muito pequena que podemos fazer, que é mudar o espaçamento das letras para ser um pixel.

140
00:09:21,830 --> 00:09:27,260
E se você prestar atenção quando eu atualizar, você pode ver coisas separadas um pouco

141
00:09:27,260 --> 00:09:28,390
entre cada letra.

142
00:09:29,090 --> 00:09:31,690
Leslie vamos nos concentrar no tamanho da fonte.

143
00:09:31,700 --> 00:09:33,690
Eles parecem um pouco pequenos demais.

144
00:09:33,980 --> 00:09:39,340
Então, vamos apenas usar o tamanho da fonte e configurá-lo para ser herdado.

145
00:09:39,500 --> 00:09:44,750
E se eu atualizar, você pode ver que eles herdam o tamanho da fonte e não precisamos dizer explicitamente isso.

146
00:09:45,620 --> 00:09:47,120
Então vamos dar uma olhada agora.

147
00:09:47,620 --> 00:09:51,380
Uma das grandes diferenças é que eles estão atualmente espaçados de maneira diferente.

148
00:09:51,670 --> 00:09:55,490
Assim que a página estiver carregada, temos o espaço aqui na nossa versão.

149
00:09:55,490 --> 00:09:59,460
No entanto, não temos esse espaço até clicarmos em um botão.

150
00:09:59,480 --> 00:10:08,860
Então, o que precisamos fazer é realmente definir o intervalo que está aqui e esse espaço é chamado de mensagem e vamos querer ir

151
00:10:08,870 --> 00:10:14,480
e dar-lhe algumas propriedades para que ele ocupe esse espaço e tudo o que precisamos

152
00:10:14,480 --> 00:10:17,220
fazer é mudar um propriedade na verdade.

153
00:10:17,360 --> 00:10:24,980
Então, vamos selecionar exibir nossa mensagem, que é essa fã e vamos mudar a

154
00:10:24,980 --> 00:10:28,830
propriedade de exibição para estar na linha.

155
00:10:28,830 --> 00:10:34,880
BLOCK Então, o que isso fará se eu atualizar você não notará uma grande diferença imediatamente,

156
00:10:34,880 --> 00:10:41,790
mas isso é porque também precisamos atribuí-lo com você, conheça dar com 20 por cento e salvar e atualizar.

157
00:10:42,230 --> 00:10:48,530
Agora temos esse intervalo, mesmo que não tenha nada nele que absorva 20% dessa tela.

158
00:10:49,000 --> 00:10:52,920
Então, isso empurra esses elementos para o lado que é exatamente o que queremos.

159
00:10:53,500 --> 00:10:55,690
Vamos dar uma olhada e compará-los.

160
00:10:55,700 --> 00:10:56,960
Tudo bem, então parece muito próximo.

161
00:10:56,960 --> 00:11:03,340
Agora, o que vamos trabalhar no próximo é conseguir que a classe selecionada corresponda à cor certa

162
00:11:03,350 --> 00:11:05,450
e ter nosso efeito hover também.

163
00:11:05,450 --> 00:11:10,460
Então, isso vai cair no nosso botão e nós vamos adicionar o efeito hover primeiro.

164
00:11:10,460 --> 00:11:15,970
Então, tudo o que precisamos fazer é adicionar no botão Colan Huffer e

165
00:11:18,920 --> 00:11:27,140
nós vamos mudar a cor da fonte para ser branco e a cor de fundo para ser azul de aço.

166
00:11:27,130 --> 00:11:31,370
Então, basicamente, invertem as cores e nós vamos economizar e atualizar.

167
00:11:31,630 --> 00:11:34,090
Agora que eu passo, você pode ver que eu entendo esse efeito.

168
00:11:34,670 --> 00:11:35,550
Perfeito.

169
00:11:35,600 --> 00:11:39,920
E a nossa classe selecionada que temos vai parecer exatamente a mesma coisa.

170
00:11:39,950 --> 00:11:42,360
Apenas vou copiar os estilos.

171
00:11:42,530 --> 00:11:45,980
Não há diferença quando estamos passando sobre algo versus quando é selecionado.

172
00:11:45,980 --> 00:11:47,260
Eles devem parecer os mesmos.

173
00:11:47,420 --> 00:11:52,790
Então você pode ver que parece certo e eu passo e só enquanto eu passo.

174
00:11:52,850 --> 00:11:55,270
Obtém esse fundo azul e cor de texto em branco.

175
00:11:55,340 --> 00:11:57,410
E quando eu mudo, ele vai embora.

176
00:11:57,680 --> 00:11:59,010
Há uma pequena diferença.

177
00:11:59,300 --> 00:12:04,470
Se eu passar o mouse sobre os botões da solução, fale com essa cor.

178
00:12:04,550 --> 00:12:08,390
Não é apenas uma mudança instantânea na minha versão.

179
00:12:08,650 --> 00:12:10,550
Ele simplesmente alterna instantaneamente.

180
00:12:10,820 --> 00:12:16,440
Podemos consertar isso usando uma propriedade de transição C Ss dentro do seletor do botão.

181
00:12:16,670 --> 00:12:19,720
Vamos escrever a transição e passá-la.

182
00:12:19,720 --> 00:12:26,150
Dois argumentos são dois valores e o primeiro é o que queremos fazer de transição e, no nosso caso, vamos apenas

183
00:12:26,140 --> 00:12:30,610
adicioná-lo a cada propriedade e, em seguida, o próximo é o tempo que queremos.

184
00:12:30,710 --> 00:12:34,390
Então eu vou exagerar a princípio com dois segundos.

185
00:12:34,390 --> 00:12:41,210
Então, novamente, a propriedade de transição é como podemos informar ao CSX como animar transições entre mudanças de cores ou

186
00:12:41,210 --> 00:12:43,790
alterações de tamanho de fonte e propriedades.

187
00:12:43,790 --> 00:12:49,730
Então, o que eu disse aqui é que, em qualquer momento, a propriedade muda em qualquer botão que, em nosso

188
00:12:49,730 --> 00:12:51,900
caso, realmente seja apenas cor e fundo.

189
00:12:52,070 --> 00:12:57,680
Portanto, sempre que a cor muda e a cor de fundo muda, deve demorar dois segundos e

190
00:12:57,680 --> 00:12:59,190
você verá quando eu atualizar.

191
00:12:59,420 --> 00:13:00,410
E eu passo.

192
00:13:00,560 --> 00:13:01,880
Ah, isso ainda não está funcionando.

193
00:13:01,900 --> 00:13:04,750
Estou perdendo meu s aqui 2. 00 s.

194
00:13:04,850 --> 00:13:12,140
E agora, se eu atualizar e passar o mouse, demora dois segundos para desaparecer e quando eu clicar para adicionar a

195
00:13:12,130 --> 00:13:17,520
classe selecionada também demora dois segundos e demora dois segundos para desaparecer quando eu sair.

196
00:13:17,750 --> 00:13:20,140
Então dois segundos são definitivamente muito longos.

197
00:13:20,560 --> 00:13:23,580
Eu acho que estou apontando para cerca de três segundos.

198
00:13:23,750 --> 00:13:25,950
Vamos testar isso.

199
00:13:25,970 --> 00:13:26,630
Aqui vamos nós.

200
00:13:26,650 --> 00:13:28,990
Parece muito bom para mim.

201
00:13:29,060 --> 00:13:35,570
A última grande coisa é obter os cantos arredondados nesses quadrados da maneira que conseguimos esses cantos arredondados

202
00:13:35,570 --> 00:13:38,550
é usar uma propriedade chamada Rádion de fronteira.

203
00:13:38,690 --> 00:13:41,990
Então eu tenho a mediana dos documentos abertos se quiser dar uma olhada.

204
00:13:42,130 --> 00:13:42,970
É uma boa leitura.

205
00:13:43,100 --> 00:13:46,760
Mas eles mostram alguns exemplos sobre as diferentes coisas que você pode fazer com um raio.

206
00:13:46,900 --> 00:13:52,000
Então, o que vamos fazer é dar-lhe um pequeno raio de fronteira e estes são quadrados aqui.

207
00:13:52,150 --> 00:13:54,340
E vamos dar uma olhada no que estamos buscando.

208
00:13:54,350 --> 00:13:56,140
Então, esses são o que queremos receber.

209
00:13:56,180 --> 00:13:58,810
Por isso, foi uma ligeira curva leve.

210
00:13:59,500 --> 00:14:06,740
Vamos para a nossa classe quadrada e atribuir um raio de fronteira e vamos fazer algo realmente exagerado para começar.

211
00:14:06,740 --> 00:14:10,130
Vou mostrar-lhe o que acontece se fizermos 50 por cento.

212
00:14:10,490 --> 00:14:13,850
Nós conseguimos círculos e você pode realmente preferir usar círculos.

213
00:14:13,850 --> 00:14:20,230
Eu estava pensando em usá-los, mas no final eu preferia esses quadrados de canto arredondados e

214
00:14:20,240 --> 00:14:22,780
o número que usei é de 15%.

215
00:14:23,510 --> 00:14:25,590
E apenas verificamos e comparamos essas.

216
00:14:25,850 --> 00:14:27,060
OK, então isso parece ser bom.

217
00:14:27,080 --> 00:14:32,900
Quinze por cento, mas se você quisesse, eu vou mostrar o que acontece se fizéssemos algo como 5 por

218
00:14:32,890 --> 00:14:33,770
cento e atualizarmos.

219
00:14:34,010 --> 00:14:36,160
Temos cantos levemente arredondados.

220
00:14:36,290 --> 00:14:43,430
Então vou voltar para a minha atualização 15 e agora temos nossos bons cantos arredondados, mas também precisamos trabalhar para

221
00:14:43,420 --> 00:14:47,810
obter o efeito da animação, porque quando eu clicar em um desses.

222
00:14:47,810 --> 00:14:54,740
Observe como, quando a cor muda, desaparece, assim como o efeito flutuante desapareceu dentro e fora.

223
00:14:54,740 --> 00:14:59,920
Para conseguir isso, também precisamos usar a propriedade de transição, mas de uma maneira ligeiramente diferente.

224
00:14:59,990 --> 00:15:06,170
para o quadrado e a única coisa que queremos fazer é a cor de fundo ou apenas o plano de fundo.

225
00:15:06,160 --> 00:15:07,170
Então eu vou

226
00:15:07,220 --> 00:15:12,470
E novamente vamos fazer um longo tempo como 2. 0 segundos e veja como isso parece.

227
00:15:12,500 --> 00:15:16,160
Então vou atualizar e vou clicar em um desses.

228
00:15:16,250 --> 00:15:19,710
Você pode ver que demora dois segundos para desaparecer.

229
00:15:19,940 --> 00:15:21,940
Então, não queremos que dure algo por muito tempo.

230
00:15:22,120 --> 00:15:26,290
Provavelmente, vá para zero ponto seis talvez.

231
00:15:26,750 --> 00:15:27,970
Vamos tentar isso.

232
00:15:28,420 --> 00:15:28,850
ESTÁ BEM.

233
00:15:28,850 --> 00:15:31,610
Isso parece razoável.

234
00:15:32,500 --> 00:15:36,680
Então você pode ver sempre que esse fundo muda, é preciso 0. 6 segundos.

235
00:15:36,670 --> 00:15:42,460
O que é diferente, porém, é que, quando outras propriedades mudam, não os anima como os

236
00:15:42,560 --> 00:15:46,710
nossos botões, quando dizemos quando qualquer propriedade muda, deve demorar três segundos.

237
00:15:46,900 --> 00:15:49,790
Estamos apenas visando o plano de fundo e isso muda.

238
00:15:49,810 --> 00:15:52,450
Deve levar 0. 6 segundos.

239
00:15:52,490 --> 00:15:58,010
Uma coisa menor que queremos estar ciente é que a propriedade de transição não funcionará em todos os navegadores da

240
00:15:58,040 --> 00:16:02,140
maneira que o escrevemos agora para ser tão amigável quanto possível para o navegador.

241
00:16:02,140 --> 00:16:07,770
Na verdade, precisamos adicionar mais duas propriedades que não notaremos nenhuma diferença na funcionalidade, mas

242
00:16:08,600 --> 00:16:10,650
apenas para o suporte do navegador.

243
00:16:10,660 --> 00:16:19,460
Então, a primeira é a transição do Web Kit Dasch e vamos adicionar o mesmo valor exato

244
00:16:19,460 --> 00:16:20,250
aqui exatamente.

245
00:16:20,360 --> 00:16:26,550
E então precisamos de outro que é este deve ser um dash Moz M. Ozy.

246
00:16:26,600 --> 00:16:30,070
Portanto, estes são realmente prefixos do navegador.

247
00:16:30,230 --> 00:16:36,020
Então o Web Kit é para o Web Kit, que é um mecanismo que os navegadores usam como o Safari.

248
00:16:36,200 --> 00:16:41,700
E então temos Moz e Mozy, que é uma forma curta, é Zilah, sobre o qual o Firefox está construído.

249
00:16:42,050 --> 00:16:47,300
Então, estes são apenas para adicionar mais suporte porque a propriedade de transição não está integrada

250
00:16:47,300 --> 00:16:48,650
em todos os navegadores.

251
00:16:48,640 --> 00:16:49,790
Então, atualizamos.

252
00:16:50,060 --> 00:16:51,850
Nada deve parecer diferente.

253
00:16:51,860 --> 00:16:56,660
Nosso jogo ainda funciona do mesmo jeito e ainda recebemos a mesma animação e

254
00:16:56,870 --> 00:17:05,210
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

255
00:17:05,200 --> 00:17:08,660
para todos os 0. 3 segundos para a transição MOOC.

256
00:17:08,650 --> 00:17:15,040
coisa que podemos consertar aqui é o pouco de espaçamento entre a faixa e o início da nossa grade.

257
00:17:15,050 --> 00:17:15,630
Uma última

258
00:17:15,800 --> 00:17:18,950
Então, você pode ver que temos mais espaçamentos aqui que não temos aqui.

259
00:17:19,150 --> 00:17:25,740
E agora, se inspecionarmos, temos um elemento que está em torno da nossa grade.

260
00:17:26,140 --> 00:17:34,210
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.

261
00:17:34,390 --> 00:17:40,400
Então, podemos usar isso e apenas adicionar algum espaçamento a esse div de contêiner, vamos adicionar uma margem

262
00:17:40,390 --> 00:17:41,950
para cima e para baixo.

263
00:17:42,110 --> 00:17:44,540
Então eu acho que já o denominamos um pouco.

264
00:17:44,540 --> 00:17:45,550
Aqui vamos nós.

265
00:17:45,590 --> 00:17:47,510
Então dissemos que a margem é zero.

266
00:17:47,650 --> 00:17:54,770
E, automaticamente, o que faremos é dizer que a margem é de 20 pixels na parte superior e inferior e auto na esquerda e

267
00:17:54,770 --> 00:17:57,020
na direita, que é como se centra.

268
00:17:57,050 --> 00:18:01,820
Então queremos que seja auto na esquerda e direita, mas 20 pixels na atualização superior.

269
00:18:02,330 --> 00:18:03,590
Temos o nosso espaçamento.

270
00:18:04,120 --> 00:18:05,940
OK, então acabamos com o estilo por enquanto.