1
00:00:00,210 --> 00:00:03,460
La prossima cosa che affronteremo è lo sfondo del corpo.

2
00:00:03,660 --> 00:00:08,430
E questo in realtà non è un'immagine di sfondo, anche se ne abbiamo trovato uno che sembrava così che

3
00:00:08,430 --> 00:00:09,270
avrebbe funzionato bene.

4
00:00:09,420 --> 00:00:13,590
Ma in realtà è un gradiente che CSX sta aggiungendo per me.

5
00:00:13,650 --> 00:00:19,430
Quindi, in sostanza, possiamo scrivere gradienti lineari e invece di scriverli da soli, vi mostrerò una

6
00:00:19,470 --> 00:00:25,290
grande risorsa che ha delle sfumature di colore pre-fatte che possiamo lavorare con le quali possiamo

7
00:00:25,560 --> 00:00:27,470
aggiornare e modificare sul nostro proprio.

8
00:00:27,750 --> 00:00:29,850
Quindi si chiama gradienti dot com.

9
00:00:30,030 --> 00:00:35,580
E poi ha una serie di diversi gradienti che possiamo usare i tasti freccia per vederne alcuni.

10
00:00:36,180 --> 00:00:39,860
Così ho solo passato fino a quando ne ho trovato uno che mi piaceva.

11
00:00:40,050 --> 00:00:46,080
Quindi diciamo che volevo usare questo tutto quello che dobbiamo fare è cliccare su ottenere codice CSSA o

12
00:00:46,080 --> 00:00:52,120
premere il tasto invio e quindi copiare questo codice in un blocco appunti e quindi selezioneremo il corpo.

13
00:00:52,360 --> 00:00:56,960
Quindi, corpo e incolla.

14
00:00:57,540 --> 00:01:02,610
Quindi è solo una riga ma ci sono tutti i diversi prefissi del browser.

15
00:01:02,880 --> 00:01:09,130
Quindi, per Internet Explorer per Firefox per Chrome per Opera tutti questi diversi prefissi.

16
00:01:09,240 --> 00:01:09,990
Ma cosa fa

17
00:01:10,020 --> 00:01:16,170
Stiamo impostando lo sfondo sul gradiente lineare e stiamo selezionando due colori e diverse percentuali

18
00:01:16,170 --> 00:01:18,740
di quei colori e anche l'angolo.

19
00:01:18,750 --> 00:01:24,390
Quindi lascia che ti mostri come appare ora se aggiorniamo i nostri.

20
00:01:24,390 --> 00:01:26,190
Abbiamo questa bella sfumatura.

21
00:01:26,580 --> 00:01:28,420
Quindi possiamo continuare a giocare lì.

22
00:01:28,620 --> 00:01:31,890
Puoi dare un'occhiata a qualcun altro e sentiti libero di usare il tuo.

23
00:01:31,980 --> 00:01:35,860
Quello che ho deciso è chiamato Bora-Bora proprio qui.

24
00:01:36,210 --> 00:01:42,840
Quindi copieremo quella copia negli appunti e sostituiremo questo codice.

25
00:01:42,840 --> 00:01:49,410
Tutto questo qui con quel nuovo gradiente che ancora una volta è solo un altro gradiente lineare che qualcun

26
00:01:49,410 --> 00:01:52,870
altro ha scritto in due colori diverse percentuali di ciascuno.

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

28
00:01:54,780 --> 00:01:56,250
E vai a dare un'occhiata ora.

29
00:01:56,520 --> 00:01:57,830
E noi andiamo.

30
00:01:57,840 --> 00:01:59,190
Quindi ci stiamo avvicinando.

31
00:01:59,430 --> 00:02:02,860
La prossima grande cosa su cui dobbiamo lavorare sono le icone.

32
00:02:03,060 --> 00:02:05,530
Quindi abbiamo un'icona positiva.

33
00:02:05,640 --> 00:02:10,130
E ciò che fa è mostrare e nascondere il modulo e poi abbiamo il cestino.

34
00:02:10,130 --> 00:02:16,100
Vedo che abbiamo anche bisogno di includere quelle icone fanno parte di una libreria chiamata font.

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

36
00:02:17,050 --> 00:02:22,650
Quindi vai a font fantastico e solo google per il sito Web è Fonte impressionante.

37
00:02:22,660 --> 00:02:24,030
La capisco.

38
00:02:24,930 --> 00:02:29,660
E tutto ciò che è è una raccolta di un mucchio di icone.

39
00:02:29,970 --> 00:02:36,780
Quindi lascia che ti mostri se guardiamo sotto le icone c'è un enorme elenco di tutte le diverse icone che possiamo

40
00:02:38,260 --> 00:02:39,720
usare così puoi vederle.

41
00:02:40,380 --> 00:02:48,030
Quindi abbiamo bisogno di includere questa libreria all'interno della nostra applicazione in modo che possiamo andare a scaricarlo proprio

42
00:02:48,030 --> 00:02:52,740
lì e fare clic su Download o potremmo anche fare un font.

43
00:02:52,740 --> 00:02:57,370
Stupendo CDN e usa solo uno di questi CDN.

44
00:02:57,450 --> 00:02:58,710
O uno avrebbe funzionato.

45
00:02:59,100 --> 00:03:06,030
Quindi, per motivi di varietà, dato che hanno già scaricato la query di Jay, userò il CD e qui copierò il link.

46
00:03:07,470 --> 00:03:15,780
pagina indice Timo e ho bisogno di aggiungere un tag link perché è un file CSSA quindi non è in realtà un file javascript

47
00:03:15,780 --> 00:03:23,100
o un font ma è un file C Ss e io salverò e quello che fa è in realtà mi dà un

48
00:03:23,100 --> 00:03:29,540
sacco di classi che sono pre-costruite e pre-fatte che posso quindi aggiungere agli elementi quindi ti mostrerò alcuni esempi.

49
00:03:29,550 --> 00:03:30,940
Poi andrò alla mia

50
00:03:31,230 --> 00:03:40,740
Se si desidera utilizzare dire la batteria scarica o tre quarti della batteria tutto ciò che dobbiamo sapere è che la classe è chiamata f un

51
00:03:40,740 --> 00:03:47,760
trattino di batteria a cruscotto 3 dash courters Quindi abbiamo bisogno di aggiungere uno basta copiare il codice qui

52
00:03:49,140 --> 00:03:51,350
da qualche parte nella nostra applicazione.

53
00:03:51,510 --> 00:03:53,400
Mettiamolo nell'H-1.

54
00:03:53,400 --> 00:03:58,980
È un tag occhio che sta per icona e noi diamo una lezione e non dobbiamo mettere nulla qui.

55
00:03:59,070 --> 00:04:02,560
Lo lasciamo vuoto e questo rappresenta il fantastico Rifan.

56
00:04:02,700 --> 00:04:10,890
dell'icona e salverà l'aggiornamento e ora abbiamo quell'icona della batteria piuttosto che l'icona della batteria a tre quarti.

57
00:04:10,890 --> 00:04:13,500
E poi questo è il nome

58
00:04:13,500 --> 00:04:20,700
Vogliamo il segno più e il cestino della spazzatura, quindi andremo qui e all'interno della H-1 manterremo l'icona e

59
00:04:21,480 --> 00:04:28,070
manterremo la classe ma vogliamo F. UN. dash plus e sentiti libero di usare la tua icona.

60
00:04:28,110 --> 00:04:33,420
Se continui a trovarti fantastico e ne trovi un altro che ti piace perché potremmo usare

61
00:04:33,420 --> 00:04:40,050
anche una icona simile a una matita o una matita e un foglio e se fossi fresco e ora

62
00:04:40,800 --> 00:04:48,330
avessi il segno più che è andato in stile e in movimento a destra e tutto ciò che dobbiamo fare è selezionare

63
00:04:48,330 --> 00:04:49,990
prima, quindi selezioneremo il cane.

64
00:04:50,280 --> 00:05:00,000
F un pochino più e galleggerà proprio così e si aggiornerà e ora è finito nel sito giusto.

65
00:05:00,960 --> 00:05:06,250
Ora affrontiamo i bidoni della spazzatura e non abbiamo ancora intenzione di occuparci dell'animazione.

66
00:05:06,300 --> 00:05:09,810
Stiamo solo per far comparire il bidone della spazzatura invece di una X.

67
00:05:10,260 --> 00:05:17,640
Quindi torniamo indietro e sui nostri spand ci sbarazzeremo effettivamente delle X e all'interno dello

68
00:05:17,640 --> 00:05:27,030
span aggiungeremo un altro e-tag e l'e-TAG avrà una classe di FAA e il nome di l'icona del bidone

69
00:05:27,030 --> 00:05:38,430
della spazzatura è il cestino di FAA Dasch, copiamo quello sull'altro span e questo è solo per l'esistente da usare quando la pagina

70
00:05:38,920 --> 00:05:44,520
viene caricata ma otteniamo tre bidoni della spazzatura per i nuovi.

71
00:05:44,730 --> 00:05:46,280
Abbiamo ancora a che fare con l'ex.

72
00:05:46,530 --> 00:05:50,310
Allora, vogliamo andare qui al nostro Javascript.

73
00:05:50,310 --> 00:05:54,990
E quando ne diamo uno nuovo, non vogliamo aggiungere uno span con X.

74
00:05:55,290 --> 00:06:00,930
Vuoi aggiungere un'icona e dobbiamo assicurarci che le nostre citazioni non interferiscano.

75
00:06:00,930 --> 00:06:08,290
Quindi se usiamo le virgolette singole e salviamo e ora dovremmo avere un'icona del cestino all'interno dello span.

76
00:06:08,870 --> 00:06:10,830
Quindi aggiungiamone di nuovi.

77
00:06:10,830 --> 00:06:11,650
Eccoci.

78
00:06:12,030 --> 00:06:15,320
E posso ancora fare clic perché sono ancora all'interno di un intervallo.

79
00:06:15,450 --> 00:06:18,680
Quindi è un elemento icona invece di un intervallo.

80
00:06:19,530 --> 00:06:22,440
Quindi faccio clic su evento ancora funzionante.

81
00:06:22,470 --> 00:06:28,380
Ora lavoriamo su questa semplice animazione e questo è tutto fatto con C valuta che gli span qui sono effettivamente

82
00:06:28,380 --> 00:06:30,210
nascosti quando la pagina viene caricata.

83
00:06:30,210 --> 00:06:31,630
Hanno una ricchezza pari a zero.

84
00:06:31,860 --> 00:06:38,760
E quando passo il mouse, stiamo effettivamente aumentando la larghezza a 40 pixel e quindi la stiamo animando

85
00:06:39,030 --> 00:06:40,950
usando la proprietà di transizione.

86
00:06:41,430 --> 00:06:44,070
Quindi proviamo un po 'di quello.

87
00:06:44,400 --> 00:06:53,850
Apri il nostro file CSSA e la prima cosa che faremo è che lo stile si estende così a

88
00:06:54,510 --> 00:07:06,270
lungo e daremo loro un colore di sfondo di quel colore rosso che è e 7 4 C 3 C e si aggiornerà.

89
00:07:06,460 --> 00:07:10,820
E ora abbiamo lo sfondo rosso intorno ad esso.

90
00:07:10,830 --> 00:07:19,470
La prossima cosa che faremo è dare loro un'altezza di 40 pixel che non sembra fare ancora molto ma una

91
00:07:19,470 --> 00:07:22,680
volta aggiunte alcune altre proprietà noterai una differenza.

92
00:07:23,250 --> 00:07:29,140
Aggiungiamo un margine a destra di 20 pixel e torniamo indietro.

93
00:07:29,200 --> 00:07:34,420
Ora questo ci dà lo spazio che volevamo qui.

94
00:07:35,550 --> 00:07:38,760
Quindi diamo loro il centro di allineamento del

95
00:07:41,970 --> 00:07:45,700
testo che è solo una piccola differenza sugli span qui.

96
00:07:45,990 --> 00:07:55,110
Le icone all'interno di una cosa importante sono rendere l'icona troppo bianca in modo da renderla bianca.

97
00:07:55,110 --> 00:07:55,970
Tutto ok.

98
00:07:56,220 --> 00:08:01,730
Quindi ti mostrerò come farli apparire come i primi senza l'animazione, in modo che siano

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

100
00:08:02,930 --> 00:08:06,830
E poi li faremo animare in modo che siano nascosti finché non ci aggiriamo.

101
00:08:06,870 --> 00:08:12,190
Quindi ci stiamo avvicinando ma abbiamo bisogno di questi per occupare più spazio in verticale e in orizzontale.

102
00:08:12,390 --> 00:08:20,360
Quindi aggiungerò un 40 pixel che alla fine andremo a zero e imposteremo il display a due

103
00:08:20,510 --> 00:08:21,990
blocchi di linea.

104
00:08:22,440 --> 00:08:23,950
E aggiorno ora.

105
00:08:24,870 --> 00:08:26,790
E quello sembra giusto.

106
00:08:26,790 --> 00:08:29,460
Quindi la prossima cosa è fare l'animazione.

107
00:08:29,760 --> 00:08:33,630
E il modo in cui funziona ci permetterà di impostare la larghezza a zero.

108
00:08:33,780 --> 00:08:40,410
Quindi tutte queste campate hanno uno zero fino a che non aleggia su un alleato e poi lo

109
00:08:40,410 --> 00:08:42,420
aumentiamo con 40 in quell'arco.

110
00:08:42,870 --> 00:08:44,580
Quindi facciamolo ora.

111
00:08:45,020 --> 00:08:53,370
e non solo sull'ampiezza, ma quando passiamo al passaggio del mouse su un alleato, vogliamo selezionare l'intervallo che si trova all'interno di un alleato su

112
00:08:53,370 --> 00:08:54,810
cui si sta librando.

113
00:08:57,930 --> 00:09:02,480
Ho intenzione di impostare con lo zero e poi quando passiamo sopra un alleato

114
00:09:02,790 --> 00:09:08,020
Quindi imposteremo con 40 pixel proprio così.

115
00:09:08,070 --> 00:09:11,310
E torniamo alla nostra versione e aggiorniamo.

116
00:09:11,670 --> 00:09:13,920
Puoi vedere che gli span ora non ci sono più.

117
00:09:14,310 --> 00:09:19,330
E quando alzo il mouse e sparo appare la span e il pulsante funziona.

118
00:09:19,800 --> 00:09:25,470
Quindi la prossima funzione è animarla in modo che non appaia immediatamente e per farlo

119
00:09:25,800 --> 00:09:27,860
useremo solo la proprietà di transizione.

120
00:09:28,170 --> 00:09:38,340
secondi e lo renderemo lineare, che si riferisce solo all'andamento, il che significa che si muoverà a una velocità costante.

121
00:09:38,340 --> 00:09:43,680
Quindi nello span aggiungeremo il punto zero di transizione due

122
00:09:43,680 --> 00:09:44,520
E noi andiamo.

123
00:09:44,520 --> 00:09:46,680
Abbiamo la nostra bella animazione.

124
00:09:47,250 --> 00:09:54,420
C'è un piccolo elemento che mi infastidisce qui, che è quello che l'icona mostra anche quando lo span

125
00:09:54,420 --> 00:09:56,110
è largo zero pixel.

126
00:09:56,340 --> 00:09:59,970
Quindi è davvero difficile da vedere, ma guarda l'icona qui.

127
00:09:59,970 --> 00:10:03,230
È ancora lì, anche quando non ci sto passando sopra.

128
00:10:03,240 --> 00:10:11,040
Quindi, quello che faremo è impostare l'opacità dello span su zero e poi impostarlo su uno quando ci si passa sopra.

129
00:10:11,370 --> 00:10:17,580
Quindi opacità zero e poi opacità 1. 0 quando ci fermiamo.

130
00:10:18,420 --> 00:10:19,840
E questo dovrebbe prendersene cura.

131
00:10:19,860 --> 00:10:22,370
Quindi ora non possiamo vedere le icone.

132
00:10:22,500 --> 00:10:28,680
Eccolo e poi scompare e svanisce anche perché la proprietà di transizione sta

133
00:10:28,950 --> 00:10:29,790
influenzando tutto.

134
00:10:30,120 --> 00:10:34,740
Quindi facciamolo 2. 2 secondi e ti mostrerò.

135
00:10:35,640 --> 00:10:40,810
Notate come si attenua e poi si attenua.

136
00:10:40,890 --> 00:10:42,560
Quindi questa è una versione molto lenta.

137
00:10:43,200 --> 00:10:46,830
E faremo solo 0. 2.

138
00:10:47,070 --> 00:10:53,250
C'è una piccola cosa fastidiosa che ci è rimasta, ovvero se si guarda da vicino

139
00:10:53,250 --> 00:10:59,530
o si aumenta la dimensione c'è un piccolo spazio tra l'input e quindi questo elenco l'UL.

140
00:11:00,060 --> 00:11:03,810
Ma il divario scompare quando mi concentro lì ora a filo.

141
00:11:04,200 --> 00:11:07,220
E poi quando non sono concentrato torna indietro.

142
00:11:07,500 --> 00:11:13,450
Quindi, per risolvere il problema, aggiungeremo un piccolo bordo invisibile che in realtà avrà

143
00:11:13,530 --> 00:11:23,340
un colore solo un piccolo bordo di R. G. be 0 0 0 0 0 0 che prendiamo semplicemente lo stesso spazio

144
00:11:23,340 --> 00:11:24,690
del nostro confine quando siamo concentrati.

145
00:11:25,080 --> 00:11:34,560
Quindi torneremo indietro e apprezzeremo l'input che abbiamo qui e gli diamo un bordo di R-Ga solido a tre pixel.

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

147
00:11:39,210 --> 00:11:41,770
Così finirà per darci un confine invisibile.

148
00:11:41,880 --> 00:11:47,420
Ma notate che mi aggiornerò proprio ora che poco spazio va via.

149
00:11:47,850 --> 00:11:53,580
Quindi ora non è solo il bordo a filo quando lo abbiamo messo a fuoco, ma c'è anche un confine che ci

150
00:11:53,580 --> 00:11:56,000
aiuta a farla risuonare che in realtà non vediamo