1
00:00:00,210 --> 00:00:03,460
Następną rzeczą, którą będziemy rozwiązania jest tło na ciele.

2
00:00:03,660 --> 00:00:09,270
I to naprawdę nie jest to obraz tła choć jeśli znaleźliśmy jeden, który wyglądał tak, że będzie działać dobrze.

3
00:00:09,420 --> 00:00:13,590
Ale ale to właściwie gradient że CSX jest dodanie dla mnie.

4
00:00:13,650 --> 00:00:27,470
Więc w zasadzie możemy napisać gradienty liniowe i zamiast zapisując je na własną rękę od podstaw mam zamiar pokazać wam wielki zasób, który posiada kilka pre-done gradientów kolorów, że możemy pracować z tym możemy aktualizować i edytować na naszej własny.

5
00:00:27,750 --> 00:00:29,850
Tak to się nazywa gradienty dot com.

6
00:00:30,030 --> 00:00:35,580
I to ma kilka różnych gradientów możemy użyć klawiszy strzałek, aby zobaczyć niektóre z nich.

7
00:00:36,180 --> 00:00:39,860
Więc po prostu przeszedł aż znalazłem jeden, który mi się podobało.

8
00:00:40,050 --> 00:00:52,120
Więc powiedzmy, że chciałem to wykorzystać wszystko, co musimy zrobić, to kliknąć na Pobierz kod CSSA lub naciśnij klawisz Enter, a następnie skopiować ten kod do schowka i wtedy będziemy wybierać ciało.

9
00:00:52,360 --> 00:00:56,960
Więc ciało i wklej że.

10
00:00:57,540 --> 00:01:02,610
Więc jest to naprawdę tylko jedna linia, ale są wszystkie różne przedrostki przeglądarki.

11
00:01:02,880 --> 00:01:09,130
Więc dla programu Internet Explorer dla Firefoksa do Chrome dla operowych wszystkich tych różnych prefiksów.

12
00:01:09,240 --> 00:01:09,990
Ale to, co robi.

13
00:01:10,020 --> 00:01:18,740
Jesteśmy ustawienie tła dla gradientu liniowego i jesteśmy zbierając dwa kolory i różne procenty tych kolorów, a także kąt.

14
00:01:18,750 --> 00:01:24,390
Więc pozwól mi pokazać, jak to wygląda teraz, jeśli mamy odświeżyć nasze.

15
00:01:24,390 --> 00:01:26,190
Mamy ten miły gradient.

16
00:01:26,580 --> 00:01:28,420
Tak więc możemy zachować zabawy tam.

17
00:01:28,620 --> 00:01:31,890
Możesz sprawdzić kilka więcej i czuć się swobodnie korzystać z własnych.

18
00:01:31,980 --> 00:01:35,860
Ten, który zdecydowałem się na nazywa się Bora-Bora tutaj.

19
00:01:36,210 --> 00:01:42,840
Więc po prostu skopiować tę kopię do schowka i zastąpić ten kod.

20
00:01:42,840 --> 00:01:52,870
Wszystko to tutaj z tego nowego gradientu, który ponownie jest tylko kolejnym gradient linearny, że ktoś inny napisał dwa kolory różne procenty każdego z nich.

21
00:01:53,150 --> 00:01:54,450
I będziemy oszczędzać.

22
00:01:54,780 --> 00:01:56,250
I to sprawdzić teraz.

23
00:01:56,520 --> 00:01:57,830
I tam idziemy.

24
00:01:57,840 --> 00:01:59,190
Więc jesteśmy coraz bliżej.

25
00:01:59,430 --> 00:02:02,860
Kolejna wielka rzecz, że musimy pracować nad znajdują się ikony.

26
00:02:03,060 --> 00:02:05,530
Mamy więc pojawić się ikona Plus.

27
00:02:05,640 --> 00:02:10,130
A co to robi to pokazuje i ukrywa formularz, a następnie mamy kosza.

28
00:02:10,130 --> 00:02:16,100
Widzę, że musimy również obejmować te ikony są częścią biblioteki o nazwie czcionki.

29
00:02:16,110 --> 00:02:16,780
Niesamowite.

30
00:02:17,050 --> 00:02:22,650
Więc idź do czcionki niesamowite i tylko google na stronie internetowej jest Fonte niesamowite.

31
00:02:22,660 --> 00:02:24,030
Ja się jej I.

32
00:02:24,930 --> 00:02:29,660
I wszystkim, że jest to zbiór pęczek ikony.

33
00:02:29,970 --> 00:02:39,720
Więc pozwól mi pokazać, jeśli spojrzymy pod ikonami istnieje ogromna lista wszystkich różnych ikon możemy wykorzystać, dzięki czemu można zobaczyć tam.

34
00:02:40,380 --> 00:02:52,740
Więc musimy włączyć tę bibliotekę wewnątrz naszej aplikacji, dzięki czemu możemy albo pójść ściągnąć go właśnie tam, a po kliknięciu na pobranie pliku, możemy również zrobić czcionkę.

35
00:02:52,740 --> 00:02:57,370
Niesamowite CDN i po prostu użyć jednej z tych sieci CDN, jak również.

36
00:02:57,450 --> 00:02:58,710
Albo jeden będzie działać.

37
00:02:59,100 --> 00:03:06,800
Więc dla dobra odmiana, ponieważ już pobrane Jay zapytanie użyję CD i tu skopiować ten link.

38
00:03:07,470 --> 00:03:30,940
Potem pójdę do mojej strony indeksu Timo i muszę dodać tag linku, ponieważ jest to plik CSSA więc nie jest to właściwie plik javascript lub czcionki, ale jest to plik C Ss i będę zapisać i co to robi to w rzeczywistości daje mi kilka klas, które są wstępnie zbudowane i gotowych że można następnie dodać do elementów, więc pokażę wam kilka przykładów.

39
00:03:31,230 --> 00:03:51,350
Jeśli chcesz użyć powiedzenia bateria pusta lub bateria threequarters wszystkim musimy wiedzieć, że klasa jest nazywany f bateria kreska courters kreska 3 kreska więc musimy dodać jeden wystarczy skopiować kod gdzieś w naszej aplikacji.

40
00:03:51,510 --> 00:03:53,400
Ujmę to w H-1.

41
00:03:53,400 --> 00:03:59,060
Jest to znacznik oko co oznacza ikonę i dajemy mu klasy i nie trzeba kłaść się tutaj.

42
00:03:59,070 --> 00:04:02,560
Wyjeżdżamy, że pusta, a to oznacza Rifan niesamowite.

43
00:04:02,700 --> 00:04:13,500
I to jest to nazwa ikonę i uratuje odświeżenia i mamy teraz, że ikona baterii zamiast ikony baterii trzy czwarte.

44
00:04:13,500 --> 00:04:28,070
Chcemy znak plus i śmieci, tak pójdziemy tutaj i wewnątrz H-1 będzie utrzymywać ikonę i zachować f klasę ale chcemy F.A. kreska plus i zachęcamy do korzystania z własną ikonę.

45
00:04:28,110 --> 00:04:49,990
Jeśli pójdziesz dalej, aby dowiedzieć niesamowite i znaleźć inny, który lubisz, bo mogliśmy również użyć jednego z jak ołówek patrząc ikony lub ołówka i papieru, a jeśli były świeże, a teraz mają znak plus, który udał się do stylu i przenieść na prawo i wszystko, co trzeba zrobić, bo to wybierz ją najpierw więc musimy wybrać psa.

46
00:04:50,280 --> 00:05:00,950
F plus myślnik i wola swobodny prawo tak po prostu i odświeżyć i jest obecnie ponad po prawej stronie.

47
00:05:00,960 --> 00:05:06,250
Teraz zająć się pojemniki na śmieci, a my nie zamierzamy zajmować się animacją jeszcze.

48
00:05:06,300 --> 00:05:09,810
Jesteśmy po prostu dostanie śmieci mogą pojawić się w ogóle zamiast X.

49
00:05:10,260 --> 00:05:44,520
Więc wróćmy oraz na naszej spand jesteśmy rzeczywiście zamierza pozbyć się X, a wewnątrz przęsła mamy zamiar dodać kolejne e-tag i e-TAG będzie miał klasę FAA oraz nazwę śmieci mogą ikona jest FAA Dasch śmieci niech skopiować, że na drugą rozpiętości i to tylko dla istniejących używać podczas wczytywania strony, ale mamy trzy pojemniki na śmieci na nowe.

50
00:05:44,730 --> 00:05:46,280
My wciąż do czynienia z ex.

51
00:05:46,530 --> 00:05:50,310
Tak więc chcemy iść tutaj do naszego JavaScript.

52
00:05:50,310 --> 00:05:54,990
A kiedy pióro nowy nie chcemy dołączyć rozpiętość z X.

53
00:05:55,290 --> 00:06:00,930
Chcesz dołączyć ikonę i musimy upewnić się, że nasze notowania nie przeszkadzają.

54
00:06:00,930 --> 00:06:08,690
Więc jeśli używamy apostrofów tam i zapisać, a teraz powinniśmy mieć ikonę kosza w środku rozpiętości.

55
00:06:08,870 --> 00:06:10,830
Warto więc dodać kilka nowych.

56
00:06:10,830 --> 00:06:11,650
No to jedziemy.

57
00:06:12,030 --> 00:06:15,320
I nadal mogę kliknąć, ponieważ są one nadal w środku rozpiętości.

58
00:06:15,450 --> 00:06:18,680
Więc jest to element ikona zamiast rozpiętości.

59
00:06:19,530 --> 00:06:22,440
Więc kliknij zdarzenie nadal działać.

60
00:06:22,470 --> 00:06:30,210
Teraz działa na tej prostej animacji, a to wszystko jest zrobione z C ocenić tutaj rozpiętości są rzeczywiście ukryte podczas wczytywania strony.

61
00:06:30,210 --> 00:06:31,630
Mają mnóstwo zera.

62
00:06:31,860 --> 00:06:40,950
A potem, kiedy unoszą jesteśmy rzeczywiście zwiększenie szerokości 40 pikseli, a potem robimy to animowane za pomocą właściwości przejścia.

63
00:06:41,430 --> 00:06:44,070
Więc chodźmy próbować trochę tego.

64
00:06:44,400 --> 00:07:06,270
Otwórz nasz plik CSSA a pierwszą rzeczą, którą możemy zrobić, to styl rozpiętości więc rozciągać i zamierzamy dać im kolor tła, że ​​kolor czerwony, który jest E 7 4 C 3 C i odświeżyć.

65
00:07:06,460 --> 00:07:10,820
A teraz mamy, że czerwone tło wokół niego.

66
00:07:10,830 --> 00:07:22,680
Następną rzeczą, którą zrobimy, to dać im wysokość 40 pikseli, które nie wydają się jeszcze wiele do zrobienia, ale gdy dodamy jeszcze kilka właściwości zauważysz różnicę.

67
00:07:23,250 --> 00:07:29,140
Dodajmy margines z prawej strony 20 pikseli i wrócić.

68
00:07:29,200 --> 00:07:34,420
Teraz, gdy daje nam miejsca, które chcieliśmy tutaj.

69
00:07:35,550 --> 00:07:45,700
Następny dajmy im tekst Center align, która jest tylko bardzo niewielka różnica tutaj przęseł.

70
00:07:45,990 --> 00:07:55,110
Ikony wewnątrz ważny jest, aby ikonę zbyt białe, tak kolor biały.

71
00:07:55,110 --> 00:07:55,970
W porządku.

72
00:07:56,220 --> 00:08:02,640
Więc mam zamiar pokazać, jak je zdobyć wyglądać jak ten pierwszy bez animacji, dzięki czemu są one zawsze.

73
00:08:02,930 --> 00:08:06,830
A potem dostaniemy je animować tak, że są one ukryte dopóki nie unosić.

74
00:08:06,870 --> 00:08:12,190
Więc jesteśmy już blisko, ale musimy je wziąć więcej miejsca w pionie i poziomie.

75
00:08:12,390 --> 00:08:21,990
Więc mam zamiar dodać A o 40 pikseli, który ostatecznie mamy zamiar ustawić na zero i ustawić wyświetlanie dwóch linii w bloku.

76
00:08:22,440 --> 00:08:23,950
I teraz odświeżyć.

77
00:08:24,870 --> 00:08:26,790
A to wygląda tak dobrze.

78
00:08:26,790 --> 00:08:29,460
Więc następną rzeczą jest zrobić animację.

79
00:08:29,760 --> 00:08:33,630
I sposób, że działa właściwie mamy zamiar ustawić szerokość wynosi zero.

80
00:08:33,780 --> 00:08:42,420
Więc wszystkie te przęsła mają się od zera aż najechaniu na sojusznika, a potem zwiększamy że wraz być 40 na tej rozpiętości.

81
00:08:42,870 --> 00:08:44,580
Więc zróbmy to teraz.

82
00:08:45,020 --> 00:09:02,480
Idę do ustawiania zera, a następnie, gdy unoszą się nad sojusznika, a nie tylko rozpiętość ale kiedy najedź sojusznika chcemy, aby wybrać zakres, który jest wewnątrz sojusznika, który jest jest unosił się nad.

83
00:09:02,790 --> 00:09:08,020
Następnie jedziemy do ustaw z 40 pikseli być tak po prostu.

84
00:09:08,070 --> 00:09:11,310
I wróćmy do naszej wersji i odświeżyć.

85
00:09:11,670 --> 00:09:13,920
Widać, że rozpiętości teraz zniknął.

86
00:09:14,310 --> 00:09:19,330
I kiedy najedź i latać pojawia rozpiętość a prace przycisk.

87
00:09:19,800 --> 00:09:27,860
Więc następnym elementem jest coraz to animować tak, że nie pojawia się natychmiast i aby to zrobić musimy po prostu skorzystać z właściwości przejścia.

88
00:09:28,170 --> 00:09:43,680
Więc na rozpiętości mamy zamiar dodać Transition punkt zerowy dwie sekundy, a zrobimy to liniowy, który po prostu odnosi się do łagodzenia, co oznacza, że ​​będzie poruszać się ze stałą prędkością.

89
00:09:43,680 --> 00:09:44,520
I tam idziemy.

90
00:09:44,520 --> 00:09:46,680
Mamy miłą animacji.

91
00:09:47,250 --> 00:09:56,110
Jest jeden mały element, który nie przeszkadza mi tutaj, które jest, że ikona nadal pokazuje nawet gdy rozpiętość wynosi zero pikseli szerokości.

92
00:09:56,340 --> 00:09:59,970
Więc jest to naprawdę trudne do zobaczenia, ale oglądać ikonę tutaj.

93
00:09:59,970 --> 00:10:03,230
To wciąż istnieje nawet wtedy, gdy nie jestem unoszące się nad nim.

94
00:10:03,240 --> 00:10:11,210
Więc co zrobimy jest po prostu ustawić krycie na rozpiętość wynosi zero, a następnie ustawić go za jednego gdy unoszą.

95
00:10:11,370 --> 00:10:17,580
Więc krycie zera a następnie krycie 1,0, gdy unoszą.

96
00:10:18,420 --> 00:10:19,840
I że należy dbać o niego.

97
00:10:19,860 --> 00:10:22,370
Więc teraz nie widzimy ikony.

98
00:10:22,500 --> 00:10:29,790
Nie jest to, a potem znika i znika, a także dlatego, że nieruchomość Przejście dotyka wszystkiego.

99
00:10:30,120 --> 00:10:34,740
Więc zróbmy to 2,2 sekundy, a pokażę ci.

100
00:10:35,640 --> 00:10:40,810
Zauważ, jak wyłania się, a następnie znika.

101
00:10:40,890 --> 00:10:42,560
Więc to jest bardzo powolny wersji.

102
00:10:43,200 --> 00:10:46,830
A my po prostu zrobić 0.2.

103
00:10:47,070 --> 00:10:59,530
Jest jeden mały irytujące, że mamy w lewo, który jest, jeśli wyglądają naprawdę ściśle tutaj lub zwiększyć rozmiar znajduje się mała szczelina pomiędzy wejściem a następnie na tej liście ul.

104
00:11:00,060 --> 00:11:03,810
Ale różnica znika gdy skupię tam teraz równo.

105
00:11:04,200 --> 00:11:07,220
A potem, kiedy ja nie koncentruje się wraca.

106
00:11:07,500 --> 00:11:24,690
Więc to naprawić mamy zamiar dodać niewielką ramkę, która jest niewidoczna faktycznie będzie mieć kolor tylko mały pograniczu R. G. wynosić 0 0 0 0 0 0 której po prostu zajmują tę samą przestrzeń, jak nasza granica robi, gdy jesteśmy skupieni.

107
00:11:25,080 --> 00:11:34,560
Więc wracamy i jak wejście, które mamy tutaj i dać go do granicy trzech pikseli stałej R-Ga.

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

109
00:11:39,210 --> 00:11:41,770
Tak, że skończy się dając nam niewidzialną granicę.

110
00:11:41,880 --> 00:11:47,420
Ale Wskazówki Tutaj będę odświeżyć teraz ta mała szczelina odchodzi.