1
00:00:00,390 --> 00:00:01,650
Dobrze welcome back.

2
00:00:01,660 --> 00:00:05,770
W tym filmie mamy zamiar pracować w stylizacji naszej stronie w tej chwili.

3
00:00:05,850 --> 00:00:09,530
To na pewno nigdzie w pobliżu, co to ma wyglądać na końcu.

4
00:00:09,810 --> 00:00:12,960
Więc właściwie porównać je obok siebie.

5
00:00:13,530 --> 00:00:14,840
Oto nasza tutaj.

6
00:00:15,030 --> 00:00:21,280
Tak więc niektóre z wielkich zmian musimy dokonać zaokrąglenia narożników dodając kilka odstępów tu się wierzchu.

7
00:00:21,360 --> 00:00:23,260
Zmiana stylizacji przycisków tutaj.

8
00:00:23,490 --> 00:00:32,370
Więc te przyciski nie naprawdę wyglądają jak przyciski, aż po najechaniu na nich i otrzymujemy efekt najechania nasze przyciski są zdecydowanie ohydne i nie mamy żadnego wpływu aktywowanych na nich.

9
00:00:32,370 --> 00:00:35,200
Również pozycja z nich jest trochę racji.

10
00:00:35,550 --> 00:00:48,310
Jak widać, jeśli myślę tu dostaję tekst, ale jeśli były świeże, że przestrzeń tech jest już uwzględniona w porównaniu z naszej wersji, jeśli myślę, że tekst pcha wszystko z dala na boki.

11
00:00:48,470 --> 00:00:51,480
Również tam animacja tutaj.

12
00:00:51,510 --> 00:01:02,990
Więc kiedy klikam zauważyć jak zanikają powoli nasz kiedy kliknij dobrze, jeśli kliknę niepoprawny jeden po prostu od razu jest usuwany.

13
00:01:03,000 --> 00:01:05,790
Dlatego chcemy, aby dodać przejście do tego.

14
00:01:05,790 --> 00:01:09,200
Również mamy H-1 tu, że wymaga jeszcze trochę pracy na nasze.

15
00:01:09,390 --> 00:01:10,920
Trzeba zajmują więcej miejsca.

16
00:01:11,130 --> 00:01:12,930
Musimy zmienić kolor tła.

17
00:01:12,930 --> 00:01:14,520
Chcemy zmienić czcionkę.

18
00:01:14,910 --> 00:01:22,610
Musimy upewnić się, że rozpiętość naszej koloru jest poprawnie sformatowany, więc jest to z własnej linii i jest to większa czcionka.

19
00:01:22,710 --> 00:01:25,910
Również musimy zmienić czcionkę dla całego ciała.

20
00:01:25,950 --> 00:01:28,020
To są wszystkie takie same czcionki.

21
00:01:28,080 --> 00:01:37,470
I wreszcie zauważysz mamy trochę miejsca w prawo tutaj pomiędzy paskiem i koniec korpusu oraz w wersji rozwiązania nie ma miejsca w ogóle.

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

23
00:01:38,550 --> 00:01:41,580
Zaczynajmy od pierwszego rozwiązania tego H-1.

24
00:01:41,990 --> 00:01:52,700
Więc mamy zamiar udać się do mojego tekstu sublinii i przejść do H-1, a pierwszą rzeczą, która zrobi to tylko wyrównać rzeczy w środku, jak widać w roztworze.

25
00:01:52,890 --> 00:01:54,170
Rzeczy są wyrównane do środka.

26
00:01:54,210 --> 00:02:03,070
Więc wszystko co musisz zrobić, to dodać tekst centrum wyrównać i zapisać i odświeżyć.

27
00:02:03,360 --> 00:02:06,520
Ok niewielka poprawa.

28
00:02:06,540 --> 00:02:17,280
Następna w kolejce zmieńmy kolor tła, więc kolor będzie nadal na niebiesko, ale można zauważyć, że jeśli I odświeżyć stronę teraz działa dobrze.

29
00:02:17,400 --> 00:02:23,010
Ale jeśli znów odświeżyć, a potem wygrać grę lub kliknięciu na nowych kolorach.

30
00:02:23,010 --> 00:02:31,970
To wraca do czerni i to dlatego, że nasz kod javascript jest nadpisanie że jesteśmy ustawienie go z powrotem do tego ciemnoszarym czarniawy koloru w naszym javascript.

31
00:02:32,010 --> 00:02:37,320
Musimy znaleźć miejsca, gdzie jesteśmy zresetowanie do tego koloru, który jest 2 3 2 3 2 3.

32
00:02:37,320 --> 00:02:38,040
No to ruszamy.

33
00:02:38,100 --> 00:02:40,820
Chcemy tylko, aby to zmienić, aby być ciągle na niebiesko.

34
00:02:41,340 --> 00:02:44,690
I to także wtedy, gdy odświeżam zaczyna to wciąż niebiesko.

35
00:02:44,850 --> 00:02:45,970
Mam nowe kolory.

36
00:02:45,990 --> 00:02:47,870
To pozostaje w dalszym ciągu na niebiesko.

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

38
00:02:48,870 --> 00:02:49,830
Więc to jest to.

39
00:02:49,830 --> 00:02:54,430
Teraz pozbyć się wszystkich czarnej przestrzeni po obu stronach naszej H-1.

40
00:02:54,870 --> 00:03:02,230
Tak więc w naszym H-1 mamy zamiar pozbyć się wszystkich marginesu marży zerowej na górze i na dole po lewej i prawej.

41
00:03:02,250 --> 00:03:04,820
Więc zauważyć co się dzieje kiedy to zrobić.

42
00:03:04,820 --> 00:03:10,720
To czarna przestrzeń odchodzi ze wszystkich stron, z wyjątkiem tego trochę odstępu na lewej górnej i prawej.

43
00:03:10,830 --> 00:03:14,870
A to nie przychodzi z lub H-1, który jest w rzeczywistości pochodzące z organizmu.

44
00:03:14,940 --> 00:03:19,420
Więc to naprawić, że możemy udać się do ciała i nadać mu margines zerowy.

45
00:03:19,680 --> 00:03:24,230
I teraz zwrócić uwagę na ten mały luki będę odświeżyć i że odchodzi.

46
00:03:24,390 --> 00:03:30,040
Więc nasz biały pasek przechodzi przez całą drogę do boku, tak jak ma to miejsce w tej wersji tutaj.

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

48
00:03:31,080 --> 00:03:33,080
Następna w kolejce skupmy się na zabawie.

49
00:03:33,450 --> 00:03:36,180
Więc zabawa będzie taka sama dla wszystkich naszych elementów.

50
00:03:36,180 --> 00:03:41,690
Przyciski i H-1 i rozpiętość tutaj to wszystko jest tego samego kroju nieco różne grubości.

51
00:03:41,850 --> 00:03:46,660
I mamy zamiar używać tylko jednego z wbudowanych czcionek system vaunts które nazywa Avenir.

52
00:03:46,920 --> 00:03:52,730
Tak, że będzie czcionka rodziny Avenir.

53
00:03:53,430 --> 00:03:56,440
To jest czcionka, która może działać na każdym systemie tam.

54
00:03:56,580 --> 00:04:03,930
Więc mamy zamiar dodać w innej opcji, która jest Mont. Serat tak po prostu.

55
00:04:04,740 --> 00:04:10,050
Tak więc skończyć z tym zabawy tutaj co oczywiście nie wygląda dokładnie tak samo.

56
00:04:10,170 --> 00:04:12,460
I to sprowadza się do naszej wagi czcionek.

57
00:04:12,540 --> 00:04:16,040
Więc musimy zmienić wagę tej czcionki bo to H1.

58
00:04:16,050 --> 00:04:21,520
Domyślnie jest to, aby pogrubione lub mieć jak 700 lub 800 lub nawet 900 wagi czcionek.

59
00:04:21,600 --> 00:04:24,350
To, co chcemy zrobić, to dać mu wagę czcionki normalny.

60
00:04:24,420 --> 00:04:32,230
Więc kiedy nasz H-1 można dodać wagi czcionki normalne i oszczędzać.

61
00:04:32,400 --> 00:04:33,400
Odświeżać.

62
00:04:33,710 --> 00:04:34,700
To się im bliżej przyjrzeć.

63
00:04:34,700 --> 00:04:37,550
Teraz istnieje kilka innych rzeczy, które trzeba zmienić.

64
00:04:37,590 --> 00:04:56,510
Pierwszym z nich jest, że to wszystko jest wielkie i możemy zrobić z RCSS używając tekstu przekształcić wielkie i zapisać Więc teraz przyjrzeć się bliżej, a także chcą, aby upewnić się, że nasz kolor jest na osobnej linii i że styl, który rozciągać się nieco inaczej aby to zrobić.

65
00:04:56,570 --> 00:05:01,340
Mamy zamiar iść tutaj do naszego zespołu i rzeczywiście będziemy edytować w wieku go trochę.

66
00:05:01,700 --> 00:05:04,120
I to jest pierwszy sposób, że jedziemy do tej pracy.

67
00:05:04,160 --> 00:05:12,590
Zobaczymy inny sposób robi to z Pearcey SS Ale mamy zamiar zacząć od stylizacji to gdzie mamy wielki w jednej linii, a następnie dodać przerwę.

68
00:05:12,590 --> 00:05:26,440
Możemy użyć ABR tag i faktycznie nie jest to świetny pomysł, jeśli chodzi o styl to trochę mile widziana, ale jest to szybki i łatwy sposób, aby zacząć dodawanie pewnych zwrotów i pewne podziały wiersza i to wszystko, że ten tag robi to dodaje podział wiersza.

69
00:05:26,620 --> 00:05:37,970
Dlatego chcemy, jeden po Wielkiej chcemy sobie przerwę, a następnie nasz zakres, a następnie chcemy kolejną przerwę, a następnie gra kolorów na dole i jeśli odświeżyć Teraz widać, że jesteśmy coraz bliżej.

70
00:05:38,060 --> 00:05:41,280
Teraz musimy skupić się na tworzeniu rozpiętość dużo większe.

71
00:05:41,660 --> 00:05:44,160
Więc ten zespół ma pomysł na kolorowym wyświetlaczu.

72
00:05:44,300 --> 00:05:49,730
Więc mamy zamiar przejść do Rc S i wybierz kolorowy wyświetlacz podobnie jak ten.

73
00:05:49,900 --> 00:05:58,200
Id kolorowy wyświetlacz, a następnie jedziemy do powiedzenia rozmiar czcionki wynosi 200 procent rozmiaru czcionki H-1.

74
00:05:58,550 --> 00:06:01,860
A jeśli odświeżyć teraz uzyskać ten znacznie większy rozmiar czcionki.

75
00:06:02,210 --> 00:06:03,630
I jesteśmy coraz bliżej.

76
00:06:03,680 --> 00:06:05,210
Mamy przerwy tutaj.

77
00:06:05,330 --> 00:06:10,040
Można również zauważyć, że choć mamy dużo większą przestrzeń między liniami niż my tutaj.

78
00:06:10,280 --> 00:06:12,970
Więc jest kilka rzeczy, które możemy zrobić, aby pracować nad tym.

79
00:06:12,980 --> 00:06:15,780
Pierwszy z nich to zmienić wysokość wiersza.

80
00:06:16,280 --> 00:06:21,580
Więc dajemy mu wysokość linii 1,1 i oszczędzać.

81
00:06:22,190 --> 00:06:27,040
I spójrzmy na naszej wersji ponownie i odświeżyć i widać, że kurczy się nieco w dół.

82
00:06:27,290 --> 00:06:30,440
Ale teraz straciliśmy miejsca na górze i na dole.

83
00:06:30,440 --> 00:06:32,190
Musimy trochę miejsca tam.

84
00:06:32,210 --> 00:06:35,050
Więc co zrobimy, to udać się i dodaj jakieś dopełnienie.

85
00:06:35,450 --> 00:06:47,050
Więc mamy zamiar dodać dopełnienie do góry i na dole nie tylko w lewo i prawo i chcemy 20 pikseli na górze i na dole, dzięki czemu możemy zrobić, tak jak to wyściółką 20 pikseli i zera.

86
00:06:47,300 --> 00:06:58,590
Możemy również zrobić dopełnienie top 20 pikseli i dopełnienie dno, ale to jest ładniejszy krótka droga robi to odświeżyć i można zobaczyć, że jesteśmy prawie tam teraz.

87
00:06:58,880 --> 00:07:00,670
Więc nasz nagłówek wygląda dobrze.

88
00:07:00,880 --> 00:07:05,830
Mamy prawidłowa czcionka poprawny sposób czcionek to wszystko w wielkiej odpowiednim kolorem tła.

89
00:07:05,870 --> 00:07:11,240
Upewnijmy się, jak gram pozostaje poprawna wygląda wszystko dobrze.

90
00:07:11,300 --> 00:07:14,800
Następną rzeczą, którą powinniśmy zająć się przyciski na tym pasku nawigacyjnym.

91
00:07:15,130 --> 00:07:18,080
Więc na pewno ma długą drogę do przebycia, aby poprawić te.

92
00:07:18,080 --> 00:07:23,840
Pierwszą rzeczą, którą chcesz zrobić, to pozbyć się granic więc nie mamy tej oczywistej obramowanie wokół przycisku.

93
00:07:23,870 --> 00:07:27,230
Chcemy także, aby pozbyć się koloru tła.

94
00:07:27,320 --> 00:07:29,290
Więc nie powinno być żadnego tła, jak można zobaczyć tutaj.

95
00:07:29,330 --> 00:07:33,210
To jest po prostu poczekać, aż unoszą lub dopóki nie wybrać.

96
00:07:33,250 --> 00:07:37,790
Ponadto chcemy, aby upewnić się, że rodzina czcionek jest taka sama jak tej czcionki tutaj.

97
00:07:37,790 --> 00:07:39,230
Więc zacznijmy.

98
00:07:39,230 --> 00:07:48,620
I mam zamiar wybrać wszystkie przyciski przycisk SO i jesteśmy po prostu powie granicznego żaden i oszczędzać.

99
00:07:48,800 --> 00:07:50,850
Zwróć uwagę na przyciski kiedy odświeżenia.

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

101
00:07:51,980 --> 00:07:53,520
Więc teraz mamy żadnej granicy.

102
00:07:53,720 --> 00:07:55,600
Ale wciąż mamy ten kolor tła.

103
00:07:55,850 --> 00:08:02,760
Więc teraz, że sam brak tła i zapisać i odświeżyć i jesteśmy coraz bliżej.

104
00:08:02,950 --> 00:08:04,800
Więc teraz mamy tylko zwykły tekst.

105
00:08:05,120 --> 00:08:09,520
I zaczniemy poprzez te wszystkie wielkie litery tekstu jak mamy tutaj.

106
00:08:09,740 --> 00:08:16,330
Więc używamy tekst przekształcić ponownie po prostu skopiować tę linię na pastę, że tam i odświeżyć.

107
00:08:16,400 --> 00:08:18,840
Teraz nasze przyciski są wielkimi literami.

108
00:08:18,920 --> 00:08:25,370
Następną rzeczą, którą chcemy zrobić, to upewnić się, że przycisk przechodzi przez całą drogę od góry do dołu pojemnika div paskiem.

109
00:08:25,400 --> 00:08:31,580
Teraz trzeba tylko część przestrzeni, więc możemy to zrobić poprzez ustawienie wysokości do 100 proc.

110
00:08:31,750 --> 00:08:38,900
A to oznacza, że ​​będzie trwać 100 procent elementu zawierającego jak widać, że robi się nam o wiele bliżej.

111
00:08:38,930 --> 00:08:47,540
Właśnie teraz trzeba zmienić niektóre kolory zmienić rozmiar czcionki grubość czcionki, a następnie zmienić efekt najechania które nie zostały jeszcze skonfigurowane.

112
00:08:48,010 --> 00:08:54,980
Następną rzeczą, która będzie zrobić to czcionka trochę poczekać nieco cięższe i zmienić kolor będzie nadal niebieskie, jak również.

113
00:08:55,040 --> 00:09:02,350
Więc waga czcionki zrobi siedemset wtedy kolor będzie również nadal na niebiesko.

114
00:09:02,650 --> 00:09:05,370
I niech to sprawdzić odświeżania.

115
00:09:06,020 --> 00:09:14,750
Tak robi się trochę starszy i można również zobaczyć, że kolor zmienił się na tym jeszcze tego samego koloru niebieskiego mamy tutaj.

116
00:09:14,760 --> 00:09:21,810
Jest to naprawdę niewielka zmiana, że ​​możemy sprawić, która ma zmienić literę rozstaw być jeden piksel.

117
00:09:21,830 --> 00:09:28,390
A jeśli zwrócić uwagę, gdy odświeżam można zobaczyć rzeczy rozłożonych tylko trochę między każdą literę.

118
00:09:29,090 --> 00:09:31,690
Leslie skupmy się na wielkości czcionki.

119
00:09:31,700 --> 00:09:33,690
Wydają się trochę za mały.

120
00:09:33,980 --> 00:09:39,340
Więc będziemy po prostu użyć rozmiar czcionki i ustawić go do dziedziczenia.

121
00:09:39,500 --> 00:09:45,600
A gdybym odświeżyć widać, że dziedziczą one rozmiaru czcionki, a my nie musimy wyraźnie powiedział.

122
00:09:45,620 --> 00:09:47,120
Warto więc przyjrzeć się teraz.

123
00:09:47,620 --> 00:09:51,380
Jedną z największych różnic jest to, że one są obecnie rozmieszczone inaczej.

124
00:09:51,670 --> 00:09:55,490
Jak tylko załadowaniu strony mamy tu miejsca na naszej wersji.

125
00:09:55,490 --> 00:09:59,460
Jednak nie ma tego miejsca, dopóki nie klikniesz na przycisku.

126
00:09:59,480 --> 00:10:17,220
Więc co trzeba zrobić, to faktycznie styl przedział, który jest tutaj, a rozpiętość nazywa komunikat i będziemy chcieli pójść i podać, że niektóre właściwości, aby podjąć tę przestrzeń i wszystko, co musisz zrobić, to zmienić jeden Obiekt rzeczywistości.

127
00:10:17,360 --> 00:10:28,830
Więc mamy zamiar wybrać wyświetlanie nasze przesłanie, które jest tego wentylatora i mamy zamiar zmienić właściwości wyświetlania się w kolejce.

128
00:10:28,830 --> 00:10:41,790
BLOK Więc co to będzie zrobić, gdy odświeżam nie zauważy dużą różnicę od razu, ale to dlatego, że musimy również je przypisać z was wie, nadać mu o 20 procent, a zapisać i odświeżyć.

129
00:10:42,230 --> 00:10:48,790
Mamy teraz ten przedział, mimo że nie ma nic w tym, że zaczyna się 20 procent tego ekranu.

130
00:10:49,000 --> 00:10:52,920
Tak, że popycha tych elementów na stronie, która jest dokładnie to, co chcemy.

131
00:10:53,500 --> 00:10:55,690
Rzućmy okiem i porównać je.

132
00:10:55,700 --> 00:10:56,960
Dobrze więc, że wygląda całkiem blisko.

133
00:10:56,960 --> 00:11:05,450
Co teraz będziemy pracować nad następnym jest coraz wybraną klasę, aby dopasować odpowiedni kolor i mający nasz efekt najechania również.

134
00:11:05,450 --> 00:11:10,460
Tak, że będzie to w naszej przycisku i mamy zamiar dodać efekt najechania pierwszy.

135
00:11:10,460 --> 00:11:27,140
Więc wszystko co musisz zrobić, to dodać przycisk Colan Huffer i mamy zamiar zmienić kolor czcionki być biały i kolor tła będzie niebieski stalowy.

136
00:11:27,130 --> 00:11:31,370
Więc jesteśmy w zasadzie odwracania kolorów i będziemy zapisywać i odświeżać.

137
00:11:31,630 --> 00:11:34,090
Teraz, kiedy unoszą widać uzyskać taki efekt.

138
00:11:34,670 --> 00:11:35,550
Idealny.

139
00:11:35,600 --> 00:11:39,920
A nasz Wybrana klasa, że ​​mamy będzie wyglądać tak samo.

140
00:11:39,950 --> 00:11:42,360
Podobnie dzieje skopiować style.

141
00:11:42,530 --> 00:11:45,980
Nie ma żadnej różnicy, gdy jesteśmy unoszące się nad czymś kontra gdy jest zaznaczona.

142
00:11:45,980 --> 00:11:47,260
Powinny one wyglądać tak samo.

143
00:11:47,420 --> 00:11:52,790
Więc widać, że patrzy w prawo i unoszą i tylko wtedy, gdy I wskaźnik.

144
00:11:52,850 --> 00:11:55,270
Czy to aby ta niebieskim tle i biały kolor tekstu.

145
00:11:55,340 --> 00:11:57,410
A kiedy przenieść odchodzi.

146
00:11:57,680 --> 00:11:59,010
Istnieje niewielka różnica.

147
00:11:59,300 --> 00:12:04,470
Gdybym najedź roztworze przyciski zauważyć, że zanika w tym kolorze.

148
00:12:04,550 --> 00:12:08,390
To nie tylko natychmiastowe przełączenie na mojej wersji.

149
00:12:08,650 --> 00:12:10,550
To po prostu przełącza natychmiast.

150
00:12:10,820 --> 00:12:16,440
Możemy naprawić przy użyciu właściwości przejścia Css wewnątrz selektora przycisku.

151
00:12:16,670 --> 00:12:19,720
Mamy zamiar napisać przejścia i przekazać je.

152
00:12:19,720 --> 00:12:30,610
Dwa argumenty są dwie wartości, a pierwszy z nich jest to, co chcemy, aby przejść w naszym przypadku mamy tylko zamiar dodać do każdej nieruchomości, a potem następny, jak długo chcemy podjąć.

153
00:12:30,710 --> 00:12:34,390
Więc zamierzam przesadzać go w pierwszym z dwóch sekund.

154
00:12:34,390 --> 00:12:43,790
Więc znowu własnością przejście jest jak możemy powiedzieć CSX jak animowanie przejścia pomiędzy zmianami barwy lub zmiany wielkości czcionki i właściwości.

155
00:12:43,790 --> 00:12:51,900
Więc to, co powiedziałem o to że za każdym razem zmiany własności na dowolny przycisk, który w naszym przypadku będzie tak naprawdę być koloru i tła.

156
00:12:52,070 --> 00:12:59,190
Tak więc, gdy kolor zmienia i zmienia kolor tła powinien trwać dwie sekundy, a zobaczysz, kiedy odświeżenia.

157
00:12:59,420 --> 00:13:00,410
I unosić.

158
00:13:00,560 --> 00:13:01,880
Och, to nadal nie działa.

159
00:13:01,900 --> 00:13:04,750
Brakuje mi tu moje s 2,00 s.

160
00:13:04,850 --> 00:13:17,520
A teraz, gdybym odświeżyć i unoszą trwa dwie sekundy zanikać i gdy klikam aby dodać wybraną klasę również zajmuje dwie sekundy, a to trwa dwie sekundy zanikać, kiedy odejdę.

161
00:13:17,750 --> 00:13:20,140
Więc dwie sekundy jest zdecydowanie zbyt długi.

162
00:13:20,560 --> 00:13:23,580
Myślę, że dążenie do punktu około trzy sekundy.

163
00:13:23,750 --> 00:13:25,950
Sprawdźmy to.

164
00:13:25,970 --> 00:13:26,630
No to jedziemy.

165
00:13:26,650 --> 00:13:28,990
To wygląda całkiem nieźle.

166
00:13:29,060 --> 00:13:38,550
Ostatnią wielką rzeczą jest coraz zaokrąglone narożniki na tych kwadratów tak, że mamy te zaokrąglone narożniki wykorzystuje właściwość o nazwie Promień Granicznej.

167
00:13:38,690 --> 00:13:41,990
Więc mam mediana docs otwarte, jeśli chcesz spojrzeć.

168
00:13:42,130 --> 00:13:42,970
To dobra lektura.

169
00:13:43,100 --> 00:13:46,760
Ale oni pokazać kilka przykładów dotyczących różnych rzeczy można zrobić z płyty promień.

170
00:13:46,900 --> 00:13:52,000
Więc co mamy zamiar zrobić, to dać mu niewielki promień graniczny i są kwadraty tutaj.

171
00:13:52,150 --> 00:13:54,340
I rzućmy okiem na to, co chcemy osiągnąć.

172
00:13:54,350 --> 00:13:56,140
Więc to są, co chcemy uzyskać.

173
00:13:56,180 --> 00:13:58,810
Tak było nieznaczne nieznaczne krzywej.

174
00:13:59,500 --> 00:14:10,130
Chodźmy do naszego placu i przypisać klasie promień graniczny i zróbmy coś naprawdę przesadzone zacząć pokażę ci, co się stanie, jeśli zrobimy 50 procent.

175
00:14:10,490 --> 00:14:13,850
Dostajemy kręgi i może rzeczywiście wolą używać koła.

176
00:14:13,850 --> 00:14:22,780
Zastanawiałem się korzystania z nich, ale w końcu wolałem te zaokrąglone narożniki kwadraty i numer, który użyłem jest 15 proc.

177
00:14:23,510 --> 00:14:25,590
A my po prostu dokładnie sprawdzić i porównać je.

178
00:14:25,850 --> 00:14:27,060
OK, tak, że wygląda dobrze.

179
00:14:27,080 --> 00:14:33,770
Piętnaście procent, ale jeśli chcesz, pokażę ci, co się dzieje, jeśli zrobiliśmy coś podobnego 5 procent i odświeżyć.

180
00:14:34,010 --> 00:14:36,160
Otrzymujemy bardzo nieznacznie zaokrąglone narożniki.

181
00:14:36,290 --> 00:14:47,810
Więc wracam do mojego 15 odświeżyć i teraz mamy nasze ładne zaokrąglone narożniki, ale musimy również działać na uzyskanie efektu animacji, ponieważ po kliknięciu na jedną z nich.

182
00:14:47,810 --> 00:14:54,740
Zauważ, jak zmienia kolor, kiedy to zanika, podobnie jak efekt aktywowania wyblakłe i obecnie.

183
00:14:54,740 --> 00:14:59,920
Aby to osiągnąć, musimy także użyć właściwości przejścia, ale w nieco inny sposób.

184
00:14:59,990 --> 00:15:07,170
Więc mam zamiar iść do kwadratu, a jedyną rzeczą, którą chcemy przejścia jest kolor tła lub po prostu tła.

185
00:15:07,220 --> 00:15:12,470
I znowu zróbmy długo jak 2,0 sekundy i zobaczyć, jak to wygląda.

186
00:15:12,500 --> 00:15:16,160
Więc będę odświeżyć i będę kliknąć na jeden z nich.

187
00:15:16,250 --> 00:15:19,710
Widać to trwa całe dwa sekundy fade out.

188
00:15:19,940 --> 00:15:21,940
Więc nie chcemy coś trwać tak długo.

189
00:15:22,120 --> 00:15:26,290
Prawdopodobnie przejść do punktu zerowego sześciu może.

190
00:15:26,750 --> 00:15:27,970
Spróbujmy tego.

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

192
00:15:28,850 --> 00:15:31,610
To wydaje się rozsądne.

193
00:15:32,500 --> 00:15:36,680
Więc widać, że gdy tło zmienia to trwa 0,6 sekundy.

194
00:15:36,670 --> 00:15:46,710
Czym różni się jednak, że gdy inne właściwości zmieniają nie animować je jak nasze guziki, gdzie powiedział, kiedy każda nieruchomość zmienia powinno zająć punkt trzy sekundy.

195
00:15:46,900 --> 00:15:49,790
Jesteśmy tylko kierowanie tło i który zmienia.

196
00:15:49,810 --> 00:15:52,450
Powinno ono 0,6 sekundy.

197
00:15:52,490 --> 00:16:02,140
Jedna drobna rzecz, że chcemy, aby mieć świadomość, że nieruchomość przejście nie będzie działać we wszystkich przeglądarkach tak, że mamy napisane teraz być jak najbardziej przyjazne przeglądarce.

198
00:16:02,140 --> 00:16:10,650
Tak naprawdę trzeba dodać dwa więcej właściwości, które nie zauważą żadnej różnicy w funkcjonalności, ale istnieją tylko dla wsparcia przeglądarki.

199
00:16:10,660 --> 00:16:20,250
Tak więc pierwszy z nich jest zestaw Web Dasch przejścia, a my po prostu dodać ten sam dokładną wartość tutaj tak po prostu.

200
00:16:20,360 --> 00:16:26,550
A potem musimy jeszcze jeden który to powinien być jeden myślnik Moz M. Ozy.

201
00:16:26,600 --> 00:16:30,070
To są rzeczywiście prefiksy przeglądarki.

202
00:16:30,230 --> 00:16:36,020
Więc Web Kit jest zestawem internetowej, która jest motorem, który jak używać przeglądarek Safari.

203
00:16:36,200 --> 00:16:41,700
A potem mamy Moz i Mozy, która jest krótka forma jest Zilah czyli co Firefox jest zbudowany na.

204
00:16:42,050 --> 00:16:48,650
To są po prostu dodać trochę więcej wsparcia, ponieważ nieruchomość przejście nie jest wbudowana w każdej przeglądarce jeszcze.

205
00:16:48,640 --> 00:16:49,790
Więc odświeżyć.

206
00:16:50,060 --> 00:16:51,850
Nic nie powinno wydawać się inaczej.

207
00:16:51,860 --> 00:17:08,660
Nasza gra nadal działa w ten sam sposób, a my wciąż tę samą animację i powinniśmy zrobić to samo tutaj, kiedy my wszyscy przesiedli się powielić i zmienić to, że aby być przejściowe i przejścia wszystkich 0,3 sekundy do przejścia Mooc.

208
00:17:08,650 --> 00:17:15,630
Ostatnią rzeczą, którą możemy naprawić tutaj jest trochę odstępy pomiędzy paskiem a początkiem naszej sieci.

209
00:17:15,800 --> 00:17:18,950
Więc widać, mamy tu trochę więcej odstępów, że nie mamy tutaj.

210
00:17:19,150 --> 00:17:25,740
A teraz, jeśli mamy wglądu mamy element, który jest wokół naszej sieci.

211
00:17:26,140 --> 00:17:34,320
Mamy kwadraty i mamy kontener div id i że kontener div okrąża wszystkie 6 kwadratów.

212
00:17:34,390 --> 00:17:41,950
Tak więc możemy użyć tego i po prostu dodać trochę odstępu do tego kontenera div musimy po prostu dodać margines na górze i na dole.

213
00:17:42,110 --> 00:17:44,540
Więc myślę, że mamy go już stylizowany trochę.

214
00:17:44,540 --> 00:17:45,550
No to ruszamy.

215
00:17:45,590 --> 00:17:47,510
Więc powiedzieliśmy marża wynosi zero.

216
00:17:47,650 --> 00:17:57,020
I auto, co zrobimy, a nie jest powiedzieć, marża wynosi 20 pikseli na górze i na dole i auto po lewej i prawej stronie, która jest, jak to jest wyśrodkowany.

217
00:17:57,050 --> 00:18:01,820
Dlatego chcemy, że jest to auto z lewej i prawej, ale 20 pikseli na górze odświeżaniu.

218
00:18:02,330 --> 00:18:03,590
Mamy odstępy.

219
00:18:04,120 --> 00:18:05,940
OK, więc mamy zrobić z stylizacji do teraz.