1
00:00:00,390 --> 00:00:01,650
Va bene bentornato.

2
00:00:01,660 --> 00:00:05,770
In questo video lavoreremo sullo stile del nostro sito in questo momento.

3
00:00:05,850 --> 00:00:09,530
Non è affatto vicino a come dovrebbe apparire alla fine.

4
00:00:09,810 --> 00:00:12,960
Quindi confrontiamoli uno alla volta.

5
00:00:13,530 --> 00:00:14,840
Ecco il nostro qui.

6
00:00:15,030 --> 00:00:21,280
Quindi alcuni dei grandi cambiamenti che dobbiamo fare per arrotondare gli angoli aggiungendo qualche spaziatura qui sopra.

7
00:00:21,360 --> 00:00:23,260
Modifica lo stile dei pulsanti qui.

8
00:00:23,490 --> 00:00:27,750
otteniamo un effetto hover i nostri pulsanti sono decisamente orribili e non abbiamo alcun effetto di hover su di essi.

9
00:00:28,470 --> 00:00:32,370
Quindi questi pulsanti non assomigliano a dei pulsanti fino a quando non passano il mouse su di essi e

10
00:00:32,370 --> 00:00:35,200
Anche la posizione di loro è un po 'sbagliata.

11
00:00:35,550 --> 00:00:43,130
Come puoi vedere se indovino qui ricevo il testo, ma se fossi fresco lo spazio tecnologico è già occupato rispetto

12
00:00:43,200 --> 00:00:48,310
alla nostra versione se immagino che il testo spinga via tutto ai lati.

13
00:00:48,470 --> 00:00:51,480
Inoltre c'è un'animazione qui.

14
00:00:51,510 --> 00:01:00,360
Quindi, quando clicco su come si dissolvono lentamente sul nostro quando clicchiamo bene se clicco su uno

15
00:01:01,170 --> 00:01:02,990
errato viene rimosso immediatamente.

16
00:01:03,000 --> 00:01:05,790
Quindi vogliamo aggiungere una transizione a questo.

17
00:01:05,790 --> 00:01:09,200
Inoltre abbiamo qui l'H-1 che ha bisogno di un po 'di lavoro sul nostro.

18
00:01:09,390 --> 00:01:10,920
Ha bisogno di prendere più spazio.

19
00:01:11,130 --> 00:01:12,930
Abbiamo bisogno di cambiare il colore di sfondo.

20
00:01:12,930 --> 00:01:14,520
Vogliamo cambiare il carattere.

21
00:01:14,910 --> 00:01:21,240
Dobbiamo assicurarci che lo span del nostro colore sia formattato correttamente, quindi è sulla sua stessa riga ed è

22
00:01:21,240 --> 00:01:22,610
un font più grande.

23
00:01:22,710 --> 00:01:25,910
Inoltre abbiamo bisogno di cambiare il carattere per l'intero corpo.

24
00:01:25,950 --> 00:01:28,020
Quindi questi sono tutti lo stesso font.

25
00:01:28,080 --> 00:01:32,970
E infine noterai che abbiamo un po 'di spazio proprio qui tra la striscia

26
00:01:32,970 --> 00:01:37,470
e la fine del corpo e nella versione della soluzione non c'è spazio.

27
00:01:38,030 --> 00:01:38,490
OK.

28
00:01:38,550 --> 00:01:41,580
Iniziamo affrontando prima questo H-1.

29
00:01:41,990 --> 00:01:49,740
Quindi andremo al mio testo sublime e andremo all'H-1 e la prima cosa che faremo è allineare le cose

30
00:01:49,740 --> 00:01:52,700
nel mezzo come potete vedere nella soluzione.

31
00:01:52,890 --> 00:01:54,170
Le cose sono allineate al centro.

32
00:01:54,210 --> 00:02:03,070
Quindi tutto ciò che dobbiamo fare è aggiungere il centro di allineamento del testo e salvare e aggiornare.

33
00:02:03,360 --> 00:02:06,520
Ok leggero miglioramento.

34
00:02:06,540 --> 00:02:14,010
Avanti, cambiamo il colore di sfondo in modo che il colore sia ancora blu ma noterai che se

35
00:02:14,010 --> 00:02:17,280
aggiorno la pagina in questo momento funziona perfettamente.

36
00:02:17,400 --> 00:02:23,010
Ma se aggiorno di nuovo e poi vinco il gioco o clicco su nuovi colori.

37
00:02:23,010 --> 00:02:28,230
Torna al nero e questo perché il nostro codice javascript sta sovrascrivendo il fatto che

38
00:02:28,230 --> 00:02:31,970
stiamo impostando questo colore nero grigio scuro nel nostro javascript.

39
00:02:32,010 --> 00:02:37,320
Abbiamo bisogno di trovare i luoghi in cui stiamo ripristinando questo colore che è 2 3 2 3 2 3.

40
00:02:37,320 --> 00:02:38,040
Eccoci qui.

41
00:02:38,100 --> 00:02:40,820
Vogliamo solo cambiare questo per essere ancora blu.

42
00:02:41,340 --> 00:02:44,690
E questo è anche il momento in cui lo aggiorno, è ancora blu.

43
00:02:44,850 --> 00:02:45,970
Ottengo nuovi colori.

44
00:02:45,990 --> 00:02:47,870
Rimane ancora blu.

45
00:02:48,360 --> 00:02:48,810
OK.

46
00:02:48,870 --> 00:02:49,830
Ecco.

47
00:02:49,830 --> 00:02:54,430
Ora liberiamoci di tutto lo spazio nero su entrambi i lati del nostro H-1.

48
00:02:54,870 --> 00:03:02,230
Quindi nel nostro H-1 elimineremo tutto il margine marginale zero in alto e in basso a sinistra ea destra.

49
00:03:02,250 --> 00:03:04,820
Quindi, nota cosa succede quando farlo.

50
00:03:04,820 --> 00:03:10,590
Quello spazio nero scompare da tutte le parti eccetto per questo piccolo angolo di spazio a sinistra in alto ea destra.

51
00:03:10,830 --> 00:03:14,870
E questo non viene da o H-1 che in realtà proviene dal corpo.

52
00:03:14,940 --> 00:03:19,420
Quindi, per risolvere il problema, possiamo andare al corpo e dargli un margine zero.

53
00:03:19,680 --> 00:03:24,230
E ora presta attenzione a questa piccola lacuna che aggiornerò e andrà via.

54
00:03:24,390 --> 00:03:30,040
Quindi la nostra striscia bianca va fino in fondo proprio come fa in questa versione qui.

55
00:03:30,150 --> 00:03:30,970
OK.

56
00:03:31,080 --> 00:03:33,080
Ora concentriamoci sul divertimento.

57
00:03:33,450 --> 00:03:36,180
Quindi il divertimento sarà lo stesso per tutti i nostri elementi.

58
00:03:36,180 --> 00:03:41,690
I pulsanti e l'H-1 e lo span qui sono tutti lo stesso font con caratteri leggermente diversi.

59
00:03:41,850 --> 00:03:46,660
E useremo solo uno dei font incorporati che i vaunt di sistema chiamano Avenir.

60
00:03:46,920 --> 00:03:52,730
Quindi questa sarà la famiglia di font Avenir.

61
00:03:53,430 --> 00:03:56,440
Questo è un font che potrebbe non funzionare su tutti i sistemi là fuori.

62
00:03:56,580 --> 00:04:03,930
Quindi aggiungeremo un'altra opzione che è Mont. Serat proprio così.

63
00:04:04,740 --> 00:04:10,050
Quindi finiamo con questo divertente qui che ovviamente non sembra esattamente lo stesso.

64
00:04:10,170 --> 00:04:12,460
E questo dipende dal nostro peso dei font.

65
00:04:12,540 --> 00:04:16,040
Quindi dobbiamo cambiare il peso di questo font perché è un H1.

66
00:04:16,050 --> 00:04:21,520
L'impostazione predefinita è renderla in grassetto o avere come 700 o 800 o anche 900 caratteri di peso.

67
00:04:21,600 --> 00:04:24,350
Quello che vogliamo fare è dargli peso del carattere normale.

68
00:04:24,420 --> 00:04:32,230
Quindi, quando il nostro H-1 può aggiungere peso del carattere normale e salvare.

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

70
00:04:33,710 --> 00:04:34,700
Sembra più vicino.

71
00:04:34,700 --> 00:04:37,550
Ora ci sono alcune altre cose che dobbiamo cambiare.

72
00:04:37,590 --> 00:04:44,030
che il nostro colore sia sulla sua stessa linea e che lo stile sia leggermente diverso fare quello.

73
00:04:45,330 --> 00:04:52,580
Il primo è che questo è tutto maiuscolo e lo possiamo fare con RCSS usando text transform in maiuscolo e

74
00:04:52,700 --> 00:04:56,510
salva Quindi ora guardiamo più da vicino e vogliamo anche assicurarci

75
00:04:56,570 --> 00:05:00,950
Andremo qui nel nostro team e in realtà modificheremo un po 'il

76
00:05:00,950 --> 00:05:01,340
vecchio.

77
00:05:01,700 --> 00:05:04,120
E questo è il primo modo in cui faremo questo lavoro.

78
00:05:04,160 --> 00:05:09,350
Vedremo un altro modo di farlo con Pearcey SS. Ma inizieremo disegnando questo in cui abbiamo

79
00:05:09,350 --> 00:05:12,590
il grande su una riga e poi aggiungere una pausa.

80
00:05:12,590 --> 00:05:19,070
per iniziare ad aggiungere alcuni ritorni e alcune interruzioni di riga e questo è tutto ciò che questo tag fa è aggiunge un'interruzione di riga.

81
00:05:19,070 --> 00:05:24,080
Possiamo usare abr tag e in realtà questa non è una grande idea per quanto riguarda lo stile è un

82
00:05:24,080 --> 00:05:26,440
po 'disapprovato, ma è un modo semplice e veloce

83
00:05:26,620 --> 00:05:33,200
Quindi vogliamo uno dopo il Grande, vogliamo una pausa e poi la nostra durata e poi vogliamo un'altra interruzione e

84
00:05:33,200 --> 00:05:37,970
quindi color game in basso e se aggiorniamo ora puoi vedere che ci stiamo avvicinando.

85
00:05:38,060 --> 00:05:41,280
Ora dobbiamo concentrarci sul rendere la portata molto più grande.

86
00:05:41,660 --> 00:05:44,160
Quindi questa band ha un'idea del display a colori.

87
00:05:44,300 --> 00:05:49,730
Quindi andremo su R C S S e selezioneremo il display a colori proprio come questo.

88
00:05:49,900 --> 00:05:58,200
Visualizzazione del colore dell'ID e quindi stiamo per dire che la dimensione del carattere è pari al 200 percento della dimensione del carattere H-1.

89
00:05:58,550 --> 00:06:01,860
E se aggiorniamo, ora otteniamo dimensioni del carattere molto più grandi.

90
00:06:02,210 --> 00:06:03,630
E ci stiamo avvicinando.

91
00:06:03,680 --> 00:06:05,210
Abbiamo le nostre pause qui.

92
00:06:05,330 --> 00:06:10,040
Noterai anche che abbiamo molto più spazio tra le righe rispetto a quello che facciamo qui.

93
00:06:10,280 --> 00:06:12,970
Quindi ci sono alcune cose che possiamo fare per lavorare su questo.

94
00:06:12,980 --> 00:06:15,780
Il primo è modificare l'altezza della linea.

95
00:06:16,280 --> 00:06:21,580
Quindi gli daremo un'altezza di riga di 1. 1 e salvare.

96
00:06:22,190 --> 00:06:27,040
E guardiamo di nuovo la nostra versione e aggiorniamo e puoi vedere che si riduce un po '.

97
00:06:27,290 --> 00:06:30,440
Ma ora abbiamo perso lo spazio in alto e in basso.

98
00:06:30,440 --> 00:06:32,190
Abbiamo bisogno di un po 'di spazio lì.

99
00:06:32,210 --> 00:06:35,050
Quindi quello che faremo è entrare e aggiungere un po 'di padding.

100
00:06:35,450 --> 00:06:40,610
Quindi aggiungeremo padding in alto e in basso solo non a sinistra ea destra e vogliamo

101
00:06:40,610 --> 00:06:47,050
20 pixel in alto e in basso in modo che possiamo farlo esattamente come questo padding di 20 pixel e zero.

102
00:06:47,300 --> 00:06:54,980
Avremmo anche potuto riempire i primi 20 pixel e riempire il fondo, ma questo è un modo più carino di

103
00:06:54,980 --> 00:06:58,590
farlo aggiornare e puoi vedere che siamo quasi arrivati ​​ora.

104
00:06:58,880 --> 00:07:00,670
Quindi la nostra intestazione sembra a posto.

105
00:07:00,880 --> 00:07:05,830
Abbiamo il carattere corretto il carattere corretto in cui è tutto in maiuscolo il colore di sfondo corretto.

106
00:07:05,870 --> 00:07:11,240
Assicuriamoci che, mentre gioco, il corretto aspetto sia tutto a posto.

107
00:07:11,300 --> 00:07:14,800
La prossima cosa che dovremmo affrontare sono i pulsanti su questa barra di navigazione.

108
00:07:15,130 --> 00:07:18,080
Quindi abbiamo sicuramente una lunga strada da percorrere per migliorarli.

109
00:07:18,080 --> 00:07:23,000
La prima cosa che vogliamo fare è sbarazzarci dei confini in modo da non avere questo evidente confine

110
00:07:23,000 --> 00:07:23,840
attorno al pulsante.

111
00:07:23,870 --> 00:07:27,230
Vogliamo anche sbarazzarci del colore di sfondo.

112
00:07:27,320 --> 00:07:29,290
Quindi non dovrebbe esserci uno sfondo come puoi vedere qui.

113
00:07:29,330 --> 00:07:33,210
È solo aspettare fino al nostro passaggio o fino a quando ne selezioniamo uno.

114
00:07:33,250 --> 00:07:37,790
Inoltre, vogliamo assicurarci che la famiglia di font sia la stessa di questo font qui sopra.

115
00:07:37,790 --> 00:07:39,230
Quindi iniziamo.

116
00:07:39,230 --> 00:07:48,620
E ho intenzione di selezionare tutti i pulsanti, quindi il pulsante e stiamo andando a dire nessun confine e salvare.

117
00:07:48,800 --> 00:07:50,850
Prestare attenzione ai pulsanti quando si aggiorna.

118
00:07:51,170 --> 00:07:51,790
OK.

119
00:07:51,980 --> 00:07:53,520
Quindi ora non abbiamo confini.

120
00:07:53,720 --> 00:07:55,600
Ma abbiamo ancora quel colore di sfondo.

121
00:07:55,850 --> 00:08:02,760
Quindi ora lo stesso sfondo nessuno e salvare e aggiornare e ci stiamo avvicinando.

122
00:08:02,950 --> 00:08:04,800
Quindi ora abbiamo solo testo.

123
00:08:05,120 --> 00:08:09,520
E inizieremo rendendo tutto quel testo in maiuscolo come quello che abbiamo qui.

124
00:08:09,740 --> 00:08:16,330
Quindi usiamo di nuovo la trasformazione del testo, basta copiare quella riga sopra l'incolla che c'è e aggiornare.

125
00:08:16,400 --> 00:08:18,840
Ora i nostri pulsanti sono tutti in maiuscolo.

126
00:08:18,920 --> 00:08:23,240
La prossima cosa che vogliamo fare è assicurarsi che il pulsante vada dall'inizio

127
00:08:23,260 --> 00:08:25,370
alla fine del contenitore a banda div.

128
00:08:25,400 --> 00:08:31,580
In questo momento occupa solo una parte dello spazio, quindi possiamo farlo impostando l'altezza al 100 percento.

129
00:08:31,750 --> 00:08:37,490
Ciò significa che occuperà il 100 percento dell'elemento contenitore, come puoi vedere, che

130
00:08:37,490 --> 00:08:38,900
ci avvicina molto.

131
00:08:38,930 --> 00:08:44,870
Ora abbiamo bisogno di cambiare alcuni colori per cambiare la dimensione del font del peso del font e quindi

132
00:08:44,870 --> 00:08:47,540
modificare l'effetto hover che non abbiamo ancora impostato.

133
00:08:48,010 --> 00:08:54,050
La prossima cosa che farò sarà rendere il font un po 'più pesante e cambiare il colore per

134
00:08:54,050 --> 00:08:54,980
essere ancora blu.

135
00:08:55,040 --> 00:09:02,350
Quindi il peso del font farà 700 e poi il colore sarà ancora blu.

136
00:09:02,650 --> 00:09:05,370
E controlliamo l'aggiornamento.

137
00:09:06,020 --> 00:09:11,180
Quindi diventa un po 'più vecchio e puoi anche vedere che il colore ora è

138
00:09:11,240 --> 00:09:14,750
cambiato in quello blu, lo stesso colore che abbiamo qui.

139
00:09:14,760 --> 00:09:21,740
C'è un piccolo cambiamento che possiamo fare, che è quello di cambiare la spaziatura delle lettere in un pixel.

140
00:09:21,830 --> 00:09:27,260
E se presti attenzione quando aggiorno, puoi vedere le cose distanziate solo un po 'tra una

141
00:09:27,260 --> 00:09:28,390
lettera e l'altra.

142
00:09:29,090 --> 00:09:31,690
Leslie concentriamoci sulla dimensione del carattere.

143
00:09:31,700 --> 00:09:33,690
Sembrano un po 'troppo piccoli.

144
00:09:33,980 --> 00:09:39,340
Quindi useremo semplicemente la dimensione del carattere e lo imposteremo per essere ereditato.

145
00:09:39,500 --> 00:09:44,750
E se aggiorno, puoi vedere che ereditano la dimensione del carattere e non è necessario specificarlo esplicitamente.

146
00:09:45,620 --> 00:09:47,120
Quindi diamo un'occhiata ora.

147
00:09:47,620 --> 00:09:51,380
Una delle grandi differenze è che sono attualmente distribuiti in modo diverso.

148
00:09:51,670 --> 00:09:55,490
Appena caricata la pagina abbiamo lo spazio qui sulla nostra versione.

149
00:09:55,490 --> 00:09:59,460
Tuttavia non abbiamo questo spazio finché non clicchiamo su un pulsante.

150
00:09:59,480 --> 00:10:08,860
Quindi quello che dobbiamo fare è in realtà stile lo span che è proprio qui e quella estensione è chiamata messaggio e vorremmo andare

151
00:10:08,870 --> 00:10:14,480
a dare alcune proprietà per farlo occupare quello spazio e tutto ciò che dobbiamo

152
00:10:14,480 --> 00:10:17,220
fare è cambiarne uno proprietà in realtà.

153
00:10:17,360 --> 00:10:24,980
Quindi andremo a selezionare il nostro messaggio che è questo fan e cambieremo

154
00:10:24,980 --> 00:10:28,830
la proprietà display per essere in linea.

155
00:10:28,830 --> 00:10:34,880
BLOCCO Quindi, cosa succederà se aggiorno non noterai subito una grande differenza, ma è

156
00:10:34,880 --> 00:10:41,790
anche perché dovremmo assegnarlo a te con un dato del 20% e salvare e aggiornare.

157
00:10:42,230 --> 00:10:48,530
Ora abbiamo questa span anche se non contiene nulla che occupa il 20 percento di questo schermo.

158
00:10:49,000 --> 00:10:52,920
In modo che spinga questi elementi al lato che è esattamente ciò che vogliamo.

159
00:10:53,500 --> 00:10:55,690
Diamo un'occhiata e confrontiamoli.

160
00:10:55,700 --> 00:10:56,960
Va bene così sembra abbastanza vicino.

161
00:10:56,960 --> 00:11:03,340
Ora ciò su cui lavoreremo successivamente è far sì che la classe selezionata si abbini al colore giusto e

162
00:11:03,350 --> 00:11:05,450
abbia anche il nostro effetto hover.

163
00:11:05,450 --> 00:11:10,460
Quindi questo sarà nel nostro pulsante e aggiungeremo prima l'effetto hover.

164
00:11:10,460 --> 00:11:15,970
Quindi tutto ciò che dobbiamo fare è aggiungere il pulsante Colan

165
00:11:18,920 --> 00:11:27,140
Huffer e cambieremo il colore del carattere in bianco e il colore dello sfondo in blu acciaio.

166
00:11:27,130 --> 00:11:31,370
Quindi in pratica stiamo invertendo i colori e salveremo e aggiorneremo.

167
00:11:31,630 --> 00:11:34,090
Ora mentre mi muovo, puoi vedere che ottengo quell'effetto.

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

169
00:11:35,600 --> 00:11:39,920
E la nostra classe selezionata che avremo avrà lo stesso aspetto.

170
00:11:39,950 --> 00:11:42,360
Sto solo andando a copiare gli stili.

171
00:11:42,530 --> 00:11:45,980
Non vi è alcuna differenza quando ci si posiziona sopra qualcosa quando è selezionato.

172
00:11:45,980 --> 00:11:47,260
Dovrebbero sembrare uguali.

173
00:11:47,420 --> 00:11:52,790
Quindi puoi vedere che sembra giusto e io aleggia e solo mentre sono al passaggio del mouse.

174
00:11:52,850 --> 00:11:55,270
Ottiene lo sfondo blu e il colore del testo bianco.

175
00:11:55,340 --> 00:11:57,410
E quando mi muovo va via.

176
00:11:57,680 --> 00:11:59,010
C'è una leggera differenza.

177
00:11:59,300 --> 00:12:04,470
Se passa il mouse sui pulsanti della soluzione, noti che sfuma in quel colore.

178
00:12:04,550 --> 00:12:08,390
Non è solo un passaggio istantaneo alla mia versione.

179
00:12:08,650 --> 00:12:10,550
Si attiva immediatamente.

180
00:12:10,820 --> 00:12:16,440
Possiamo aggiustarlo usando una proprietà di transizione C Ss all'interno del selettore di pulsanti.

181
00:12:16,670 --> 00:12:19,720
Stiamo per scrivere la transizione e passarla.

182
00:12:19,720 --> 00:12:26,150
Due argomenti sono due valori e il primo è quello che vogliamo passare e nel nostro caso lo aggiungeremo

183
00:12:26,140 --> 00:12:30,610
ad ogni proprietà e poi il prossimo è quanto tempo vogliamo che prenda.

184
00:12:30,710 --> 00:12:34,390
Quindi ho intenzione di esagerare in un primo momento con due secondi.

185
00:12:34,390 --> 00:12:41,210
Quindi, ancora una volta la proprietà di transizione è come possiamo dire a CSX come animare le transizioni tra cambiamenti di colore

186
00:12:41,210 --> 00:12:43,790
o modifiche e proprietà delle dimensioni del carattere.

187
00:12:43,790 --> 00:12:49,730
Quindi quello che ho detto qui è che ogni volta che la proprietà cambia su qualsiasi pulsante che nel nostro

188
00:12:49,730 --> 00:12:51,900
caso sarà davvero solo colore e sfondo.

189
00:12:52,070 --> 00:12:57,680
Quindi, ogni volta che il colore cambia e il colore dello sfondo cambia, dovrebbero passare due secondi

190
00:12:57,680 --> 00:12:59,190
e vedrai quando aggiorno.

191
00:12:59,420 --> 00:13:00,410
E io aleggia.

192
00:13:00,560 --> 00:13:01,880
Oh, non funziona ancora.

193
00:13:01,900 --> 00:13:04,750
Mi mancano i miei qui 2. 00 s.

194
00:13:04,850 --> 00:13:12,140
E ora se aggiorno e al passaggio del mouse ci vogliono due secondi per dissolvenza in apertura e quando clicco per aggiungere

195
00:13:12,130 --> 00:13:17,520
la classe selezionata ci vogliono anche due secondi e ci vogliono due secondi per scomparire quando parto.

196
00:13:17,750 --> 00:13:20,140
Quindi due secondi sono decisamente troppo lunghi.

197
00:13:20,560 --> 00:13:23,580
Penso di mirare per circa tre secondi.

198
00:13:23,750 --> 00:13:25,950
Proviamo questo.

199
00:13:25,970 --> 00:13:26,630
Eccoci.

200
00:13:26,650 --> 00:13:28,990
Mi sembra abbastanza buono.

201
00:13:29,060 --> 00:13:35,570
L'ultima cosa importante è ottenere gli angoli arrotondati su questi quadrati nel modo in cui otteniamo quegli angoli

202
00:13:35,570 --> 00:13:38,550
arrotondati utilizzando una proprietà chiamata Raggio di confine.

203
00:13:38,690 --> 00:13:41,990
Quindi ho i documenti mediani aperti se vuoi dare un'occhiata.

204
00:13:42,130 --> 00:13:42,970
È una buona lettura

205
00:13:43,100 --> 00:13:46,760
Ma ti mostrano alcuni esempi sulle diverse cose che puoi fare con board-radius.

206
00:13:46,900 --> 00:13:52,000
Quindi quello che faremo è dargli un leggero raggio di confine e questi sono quadrati qui.

207
00:13:52,150 --> 00:13:54,340
E diamo un'occhiata a ciò che stiamo mirando.

208
00:13:54,350 --> 00:13:56,140
Quindi quelli sono ciò che vogliamo ottenere.

209
00:13:56,180 --> 00:13:58,810
Quindi era una leggera leggera curva.

210
00:13:59,500 --> 00:14:06,740
Andiamo alla nostra classe quadrata e assegniamo un raggio di confine e facciamo qualcosa di veramente esagerato per iniziare.

211
00:14:06,740 --> 00:14:10,130
Ti mostrerò cosa succede se facciamo il 50 percento.

212
00:14:10,490 --> 00:14:13,850
Abbiamo delle cerchie e potresti effettivamente preferire l'uso delle cerchie.

213
00:14:13,850 --> 00:14:20,230
Stavo pensando di usarli, ma alla fine ho preferito questi quadrati arrotondati e il numero

214
00:14:20,240 --> 00:14:22,780
che ho usato è il 15%.

215
00:14:23,510 --> 00:14:25,590
E controlleremo e confronteremo semplicemente quelli.

216
00:14:25,850 --> 00:14:27,060
OK, così va bene.

217
00:14:27,080 --> 00:14:32,900
Quindici percento, ma se volessi ti mostrerò cosa succede se facciamo qualcosa come il 5 percento e

218
00:14:32,890 --> 00:14:33,770
lo aggiorni.

219
00:14:34,010 --> 00:14:36,160
Otteniamo angoli leggermente arrotondati.

220
00:14:36,290 --> 00:14:43,430
Quindi tornerò al mio 15 refresh e ora abbiamo le nostre belle curve arrotondate, ma dobbiamo anche lavorare

221
00:14:43,420 --> 00:14:47,810
per ottenere l'effetto animazione perché quando clicco su uno di questi.

222
00:14:47,810 --> 00:14:54,740
Notate come quando il colore cambia si attenua, proprio come l'effetto di passaggio del mouse si dissolve in avanti e indietro.

223
00:14:54,740 --> 00:14:59,920
Per riuscirci dobbiamo anche usare la proprietà di transizione ma in un modo leggermente diverso.

224
00:14:59,990 --> 00:15:06,170
quadrato e l'unica cosa che vogliamo passare è il colore di sfondo o solo lo sfondo.

225
00:15:06,160 --> 00:15:07,170
Quindi andrò al

226
00:15:07,220 --> 00:15:12,470
E ancora facciamo un lungo periodo come 2. 0 secondi e guarda come sembra.

227
00:15:12,500 --> 00:15:16,160
Quindi aggiornerò e farò clic su uno di questi.

228
00:15:16,250 --> 00:15:19,710
Puoi vedere che occorrono due secondi interi per dissolversi.

229
00:15:19,940 --> 00:15:21,940
Quindi non vogliamo che qualcosa duri così a lungo.

230
00:15:22,120 --> 00:15:26,290
Probabilmente andrà per zero punto sei forse.

231
00:15:26,750 --> 00:15:27,970
Proviamoci.

232
00:15:28,420 --> 00:15:28,850
OK.

233
00:15:28,850 --> 00:15:31,610
Sembra ragionevole.

234
00:15:32,500 --> 00:15:36,680
Quindi puoi vedere ogni volta che lo sfondo cambia richiede 0. 6 secondi.

235
00:15:36,670 --> 00:15:42,460
Ciò che è diverso però è che quando cambiano le altre proprietà non le anima come i nostri pulsanti,

236
00:15:42,560 --> 00:15:46,710
dove abbiamo detto che quando una proprietà cambia, dovrebbe prendere il punto tre secondi.

237
00:15:46,900 --> 00:15:49,790
Stiamo prendendo di mira solo lo sfondo e questo cambia.

238
00:15:49,810 --> 00:15:52,450
Dovrebbe prendere 0. 6 secondi.

239
00:15:52,490 --> 00:15:58,010
Una cosa minore di cui vogliamo essere consapevoli è che la proprietà di transizione non funzionerà in tutti i browser, così

240
00:15:58,040 --> 00:16:02,140
come è stata scritta in questo momento per essere il più amichevole possibile al browser.

241
00:16:02,140 --> 00:16:07,770
In realtà abbiamo bisogno di aggiungere altre due proprietà che non noteremo alcuna differenza di funzionalità, ma

242
00:16:08,600 --> 00:16:10,650
solo per il supporto del browser.

243
00:16:10,660 --> 00:16:19,460
Quindi la prima è la transizione di Web Kit Dasch e aggiungeremo lo stesso valore esatto qui

244
00:16:19,460 --> 00:16:20,250
proprio così.

245
00:16:20,360 --> 00:16:26,550
E poi abbiamo bisogno di un altro che è questo dovrebbe essere un trattino Moz M. Ozy.

246
00:16:26,600 --> 00:16:30,070
Quindi questi sono in realtà prefissi del browser.

247
00:16:30,230 --> 00:16:36,020
Quindi Web Kit è per Web Kit che è un motore che i browser usano come Safari.

248
00:16:36,200 --> 00:16:41,700
E poi Moz e Mozy, che è una forma breve, è Zilah, su cui è basato Firefox.

249
00:16:42,050 --> 00:16:47,300
Quindi questi sono solo per aggiungere un po 'più di supporto perché la proprietà di transizione non è ancora

250
00:16:47,300 --> 00:16:48,650
incorporata in ogni singolo browser.

251
00:16:48,640 --> 00:16:49,790
Quindi ci aggiorniamo.

252
00:16:50,060 --> 00:16:51,850
Niente dovrebbe sembrare diverso.

253
00:16:51,860 --> 00:16:56,660
Il nostro gioco funziona ancora allo stesso modo e otteniamo sempre la stessa

254
00:16:56,870 --> 00:17:05,210
animazione e dovremmo fare la stessa cosa qui quando abbiamo completato la transizione, basta duplicare questo e cambiarlo per essere di transizione

255
00:17:05,200 --> 00:17:08,660
e passare tutto a 0. 3 secondi per la transizione MOOC.

256
00:17:08,650 --> 00:17:15,040
cosa che possiamo risolvere qui è il poco spazio tra la striscia e l'inizio della nostra griglia.

257
00:17:15,050 --> 00:17:15,630
Un'ultima

258
00:17:15,800 --> 00:17:18,950
Quindi puoi vedere che abbiamo un po 'più di spazio qui che non abbiamo qui.

259
00:17:19,150 --> 00:17:25,740
E ora se ispezioniamo abbiamo un elemento che circonda la nostra griglia.

260
00:17:26,140 --> 00:17:34,210
Abbiamo i nostri quadrati e abbiamo un contenitore ID div e quel contenitore div va intorno a tutti e 6 i quadrati.

261
00:17:34,390 --> 00:17:40,400
Quindi possiamo usarlo e aggiungere solo una spaziatura a quel contenitore div aggiungeremo solo un margine in

262
00:17:40,390 --> 00:17:41,950
alto e in basso.

263
00:17:42,110 --> 00:17:44,540
Quindi penso che lo abbiamo già disegnato un po '.

264
00:17:44,540 --> 00:17:45,550
Eccoci qui.

265
00:17:45,590 --> 00:17:47,510
Quindi abbiamo detto che il margine è zero.

266
00:17:47,650 --> 00:17:54,770
E auto quello che faremo invece è dire che il margine è 20 pixel in alto e in basso e auto a sinistra

267
00:17:54,770 --> 00:17:57,020
ea destra che è come è centrato.

268
00:17:57,050 --> 00:18:01,820
Quindi vogliamo che sia auto a sinistra e a destra, ma 20 pixel al massimo.

269
00:18:02,330 --> 00:18:03,590
Abbiamo la nostra spaziatura.

270
00:18:04,120 --> 00:18:05,940
OK, quindi abbiamo finito con lo styling per ora.