1
00:00:00,390 --> 00:00:01,650
Oké welkom terug.

2
00:00:01,660 --> 00:00:05,770
In deze video gaan we werken aan de styling van onze site op dit moment.

3
00:00:05,850 --> 00:00:09,530
Het is zeker niet in de buurt wat het zou moeten uitzien als op het einde.

4
00:00:09,810 --> 00:00:12,960
Dus laten we hen daadwerkelijk naast elkaar vergelijken door.

5
00:00:13,530 --> 00:00:14,840
Hier is van ons hier.

6
00:00:15,030 --> 00:00:21,280
Dus sommige van de grote veranderingen moeten we ervoor het afronden van de hoeken het toevoegen van enkele regelafstand hier boven.

7
00:00:21,360 --> 00:00:23,260
Het veranderen van de styling van de knoppen hier.

8
00:00:23,490 --> 00:00:32,370
Dus deze knoppen niet echt uitzien als knoppen tot je de muisaanwijzer over hen en we krijgen een hover effect onze knoppen zijn absoluut afschuwelijk en we hebben geen hover effect op hen hebben.

9
00:00:32,370 --> 00:00:35,200
Ook de positie ervan is iets verkeerd.

10
00:00:35,550 --> 00:00:48,310
Zoals je kunt zien als ik hier denk tekst krijg ik maar als ik fris waren dat tech ruimte is al opgenomen versus op onze versie als ik denk dat de tekst duwt alles weg aan de zijkanten.

11
00:00:48,470 --> 00:00:51,480
Ook is er een animatie hier.

12
00:00:51,510 --> 00:01:02,990
Dus als ik klik op hoe ze vervagen langzaam op ons toen we op goed als ik klik op een fout antwoord het gewoon onmiddellijk wordt verwijderd.

13
00:01:03,000 --> 00:01:05,790
Dus willen we een overgang naar die toe te voegen.

14
00:01:05,790 --> 00:01:09,200
Ook hebben we de H-1 hier dat wat werk aan onze behoeften.

15
00:01:09,390 --> 00:01:10,920
Het moet nemen meer ruimte.

16
00:01:11,130 --> 00:01:12,930
We moeten om de achtergrondkleur te veranderen.

17
00:01:12,930 --> 00:01:14,520
We willen het lettertype te wijzigen.

18
00:01:14,910 --> 00:01:22,610
We moeten ervoor zorgen dat de spanwijdte van onze kleur correct is geformatteerd, dus het is op zijn eigen lijn en het is een groter lettertype.

19
00:01:22,710 --> 00:01:25,910
Ook moeten we het lettertype voor het hele lichaam te veranderen.

20
00:01:25,950 --> 00:01:28,020
Dus dit zijn allemaal hetzelfde lettertype.

21
00:01:28,080 --> 00:01:37,470
En tot slot je zult merken we hebben een beetje ruimte hier tussen de streep en het einde van het lichaam en in de oplossing versie is er geen ruimte.

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

23
00:01:38,550 --> 00:01:41,580
Laten we beginnen door eerst het aanpakken dit H-1.

24
00:01:41,990 --> 00:01:52,700
Dus we gaan naar mijn deelgebied tekst en ga naar de H-1 en het eerste ding dat zal doen is gewoon af te stemmen dingen in het midden, zoals je kunt zien in de oplossing.

25
00:01:52,890 --> 00:01:54,170
Wat zijn uitgelijnd naar het centrum.

26
00:01:54,210 --> 00:02:03,070
Dus alles wat we moeten doen is het toevoegen van tekst align centrum en op te slaan en te vernieuwen.

27
00:02:03,360 --> 00:02:06,520
Ok lichte verbetering.

28
00:02:06,540 --> 00:02:17,280
Next up Laten we veranderen de achtergrondkleur zodat de kleur gaat nog steeds blauw te zijn, maar je zult merken dat als ik de pagina nu vernieuwen werkt het prima.

29
00:02:17,400 --> 00:02:23,010
Maar als ik weer opfrissen en dan heb ik het spel te winnen of ik klik op de nieuwe kleuren.

30
00:02:23,010 --> 00:02:31,970
Het gaat terug naar zwart en dat is omdat onze javascript code is te overschrijven dat wij het instelt terug naar deze donkergrijze zwartachtig kleur in onze javascript.

31
00:02:32,010 --> 00:02:37,320
We moeten naar de plaatsen waar we zijn het resetten van deze kleur, die is 2 3 2 3 2 3 te vinden.

32
00:02:37,320 --> 00:02:38,040
Daar gaan we.

33
00:02:38,100 --> 00:02:40,820
We willen alleen maar om dit te veranderen nog steeds blauw te zijn.

34
00:02:41,340 --> 00:02:44,690
En dat is ook wanneer ik vernieuwen begint het is nog steeds blauw.

35
00:02:44,850 --> 00:02:45,970
Ik krijg nieuwe kleuren.

36
00:02:45,990 --> 00:02:47,870
Het blijft zo nog blauw.

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

38
00:02:48,870 --> 00:02:49,830
Dus dat is dat.

39
00:02:49,830 --> 00:02:54,430
Laten we nu te ontdoen van alle de zwarte ruimte aan weerszijden van onze H-1.

40
00:02:54,870 --> 00:03:02,230
Dus in onze H-1 gaan we om zich te ontdoen van al marge marge nul boven en onder links en rechts.

41
00:03:02,250 --> 00:03:04,820
Dus let op wat er gebeurt als om dat te doen.

42
00:03:04,820 --> 00:03:10,720
Dat zwarte ruimte weg gaat aan alle kanten, behalve voor dit beetje van afstand aan de linker bovenkant en rechts.

43
00:03:10,830 --> 00:03:14,870
En dat komt niet uit of H-1, dat is eigenlijk afkomstig uit het lichaam.

44
00:03:14,940 --> 00:03:19,420
Dus om te bevestigen dat we kunnen gaan om het lichaam en geef het de marge nul.

45
00:03:19,680 --> 00:03:24,230
En om nu aandacht te besteden aan deze kleine kloof zal ik vernieuwen en dat gaat weg.

46
00:03:24,390 --> 00:03:30,040
Dus onze witte streep gaat helemaal naar de zijkant net zoals zij doet in deze versie hier.

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

48
00:03:31,080 --> 00:03:33,080
Next up Laten we focussen op het plezier.

49
00:03:33,450 --> 00:03:36,180
Zodat het plezier zal hetzelfde voor al onze elementen.

50
00:03:36,180 --> 00:03:41,690
De knoppen en de H-1 en de overspanning hier is het allemaal hetzelfde lettertype iets ander lettertype gewichten.

51
00:03:41,850 --> 00:03:46,660
En we gaan gewoon een van de ingebouwde te gebruiken in fonts het systeem vaunts die Avenir wordt genoemd.

52
00:03:46,920 --> 00:03:52,730
Dus dat gaat lettertype Avenir zijn.

53
00:03:53,430 --> 00:03:56,440
Dat is een lettertype dat niet kan werken op elk systeem die er zijn.

54
00:03:56,580 --> 00:04:03,930
Dus we gaan om toe te voegen in een andere optie die Mont. Serat net als dat.

55
00:04:04,740 --> 00:04:10,050
Dus eindigen we met deze leuke hier wat natuurlijk niet precies hetzelfde uitziet.

56
00:04:10,170 --> 00:04:12,460
En dat komt neer op onze tekengewicht.

57
00:04:12,540 --> 00:04:16,040
Dus moeten we het gewicht te veranderen van dit lettertype, want het is een H1.

58
00:04:16,050 --> 00:04:21,520
De standaard is om het vet of te hebben, zoals 700 of 800 of zelfs 900 tekengewicht.

59
00:04:21,600 --> 00:04:24,350
Wat wij willen doen is geef het lettertype gewicht normaal.

60
00:04:24,420 --> 00:04:32,230
Dus wanneer onze H-1 tekengewicht normaal kan toevoegen en op te slaan.

61
00:04:32,400 --> 00:04:33,400
Vernieuwen.

62
00:04:33,710 --> 00:04:34,700
Dat is op zoek dichterbij.

63
00:04:34,700 --> 00:04:37,550
Nu is er een paar andere dingen die we moeten veranderen.

64
00:04:37,590 --> 00:04:56,510
De eerste daarvan is dat dit alles hoofdletters en we kunnen dat doen met RCSS middel van tekst te transformeren hoofdletters en bespaar Dus nu kijken dichter en zal ook willen ervoor zorgen dat onze kleur is op zijn eigen lijn en dat we stijl die iets anders overspannen om dat te doen.

65
00:04:56,570 --> 00:05:01,340
We gaan hier in de loop gaan in ons team en eigenlijk gaan we uit te bewerken de leeftijd van hem een ​​beetje.

66
00:05:01,700 --> 00:05:04,120
En dit is de eerste manier waarop we gaan om dit werk te maken.

67
00:05:04,160 --> 00:05:12,590
We zullen een andere manier om het te doen met Pearcey SS te zien, maar we gaan beginnen met het stylen van deze waar we de grote op een lijn en vervolgens naar een pauze toe te voegen.

68
00:05:12,590 --> 00:05:26,440
We kunnen ABR tag gebruiken en eigenlijk is dit niet een geweldig idee voor zover stijl het is een beetje afgekeurd, maar het is een snelle en eenvoudige manier om te beginnen het toevoegen van enkele aangiften en sommige regeleinden en dat is alles wat deze tag doet is het voegt een regeleinde.

69
00:05:26,620 --> 00:05:37,970
Daarom willen we de ene na de Grote we willen een pauze en dan is onze overspanning en dan willen we nog een pauze en daarna de kleur spel aan de onderkant en als we Ververs nu kun je zien dat we steeds dichterbij.

70
00:05:38,060 --> 00:05:41,280
Nu moeten we ons richten op het maken van de spanwijdte van een stuk groter.

71
00:05:41,660 --> 00:05:44,160
Dus deze band heeft een idee van het kleurenscherm.

72
00:05:44,300 --> 00:05:49,730
Dus we gaan om over te gaan naar R C S S en selecteer kleurenscherm net als dit.

73
00:05:49,900 --> 00:05:58,200
Id kleurenscherm en dan gaan we zeggen lettergrootte is 200 procent van de H-1 lettergrootte.

74
00:05:58,550 --> 00:06:01,860
En als we frissen we nu krijgen dit veel groter lettertype.

75
00:06:02,210 --> 00:06:03,630
En we steeds dichterbij.

76
00:06:03,680 --> 00:06:05,210
We hebben onze breaks hier.

77
00:06:05,330 --> 00:06:10,040
Je merkt ook wel dat we veel meer ruimte tussen de regels dan wij hier.

78
00:06:10,280 --> 00:06:12,970
Dus er zijn een paar dingen die we kunnen doen om te werken aan dat.

79
00:06:12,980 --> 00:06:15,780
De eerste is verander de regel hoogte.

80
00:06:16,280 --> 00:06:21,580
Dus we geven het een lijn hoogte van 1,1 en op te slaan.

81
00:06:22,190 --> 00:06:27,040
En laten we eens kijken naar onze versie opnieuw en verfrissen en je kunt zien dat krimpt een beetje.

82
00:06:27,290 --> 00:06:30,440
Maar nu verloren ruimte aan de bovenkant en de onderkant.

83
00:06:30,440 --> 00:06:32,190
We hebben een beetje ruimte is er.

84
00:06:32,210 --> 00:06:35,050
Dus wat we zullen doen is in en voeg wat opvulling.

85
00:06:35,450 --> 00:06:47,050
Dus we gaan padding toe te voegen aan de boven- en onderkant niet alleen links en rechts en we willen 20 pixels aan de boven- en onderkant, zodat we kunnen doen dat net als dit opvulling 20 pixels en nul.

86
00:06:47,300 --> 00:06:58,590
We zouden ook hebben gedaan padding top 20 pixels en opvulling bodem, maar dit is een mooiere korte manier van doen te frissen en je kunt zien we zijn er bijna nu.

87
00:06:58,880 --> 00:07:00,670
Dus onze header ziet er prima uit.

88
00:07:00,880 --> 00:07:05,830
We hebben het juiste lettertype het juiste lettertype manier waarop het is allemaal in hoofdletters de juiste achtergrond kleur.

89
00:07:05,870 --> 00:07:11,240
Laten we ervoor zorgen als ik speel blijft er goed uitziet allemaal goed.

90
00:07:11,300 --> 00:07:14,800
Het volgende wat we moeten aanpakken zijn de knoppen op de navigatiebalk.

91
00:07:15,130 --> 00:07:18,080
Dus we hebben zeker een lange weg te gaan om die te verbeteren.

92
00:07:18,080 --> 00:07:23,840
Het eerste wat we willen doen is zich te ontdoen van de grenzen, zodat we dit niet voor de hand liggende rand om de knop te hebben.

93
00:07:23,870 --> 00:07:27,230
We willen ook om zich te ontdoen van de achtergrondkleur.

94
00:07:27,320 --> 00:07:29,290
Dus er geen achtergrond zou moeten zijn zoals je hier kunt zien.

95
00:07:29,330 --> 00:07:33,210
Het is gewoon wachten tot we zweven of totdat we een te selecteren.

96
00:07:33,250 --> 00:07:37,790
Ook willen we ervoor zorgen dat het lettertype familie is hetzelfde als dit lettertype hier.

97
00:07:37,790 --> 00:07:39,230
Dus laten we beginnen.

98
00:07:39,230 --> 00:07:48,620
En ik ga tot alle knoppen, zodat de knop te selecteren en we gaan gewoon grens niets te zeggen en op te slaan.

99
00:07:48,800 --> 00:07:50,850
Besteed aandacht aan de knoppen, toen ik te vernieuwen.

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

101
00:07:51,980 --> 00:07:53,520
Dus hebben we nu geen grens.

102
00:07:53,720 --> 00:07:55,600
Maar we hebben nog steeds dat achtergrondkleur.

103
00:07:55,850 --> 00:08:02,760
Dus nu dat dezelfde achtergrond niemand en op te slaan en te vernieuwen en we steeds dichterbij.

104
00:08:02,950 --> 00:08:04,800
Dus nu hebben we alleen maar platte tekst.

105
00:08:05,120 --> 00:08:09,520
En we zullen beginnen met het maken van al die tekst in hoofdletters, zoals we hebben meer dan hier.

106
00:08:09,740 --> 00:08:16,330
Dus maken we gebruik van tekst omzetten weer net die lijn kopiëren over pasta die in daar en te vernieuwen.

107
00:08:16,400 --> 00:08:18,840
Nu zijn onze knoppen zijn allemaal in hoofdletters.

108
00:08:18,920 --> 00:08:25,370
Het volgende wat we willen doen is ervoor zorgen dat de knop gaat de hele weg van de top naar de bodem van de div streep container.

109
00:08:25,400 --> 00:08:31,580
Nu duurt het slechts een deel van de ruimte zodat we kunnen doen door hoogte 100 procent.

110
00:08:31,750 --> 00:08:38,900
En dat betekent dat het zal duren tot 100 procent van het omvattende element zoals je kunt zien dat ons komt een stuk dichterbij.

111
00:08:38,930 --> 00:08:47,540
We nu net nodig hebt om sommige kleuren veranderen veranderen de lettergrootte van het lettertype gewicht en verander dan de hover effect dat we niet hebben ingesteld nog omhoog.

112
00:08:48,010 --> 00:08:54,980
Het volgende ding dat zal doen is het lettertype wacht een beetje zwaarder en verander de kleur nog steeds blauw te zijn ook.

113
00:08:55,040 --> 00:09:02,350
Dus lettertype gewicht zal doen zevenhonderd en dan kleur zal ook nog steeds blauw zijn.

114
00:09:02,650 --> 00:09:05,370
En laten we controleren of je refresh.

115
00:09:06,020 --> 00:09:14,750
Dus het wordt een beetje ouder en je kunt ook zien dat de kleur nu is veranderd in die nog steeds blauw dezelfde kleur hebben we hier terug.

116
00:09:14,760 --> 00:09:21,810
Er is een heel kleine verandering die we kunnen maken dat de brief spatiëring om één pixel te veranderen.

117
00:09:21,830 --> 00:09:28,390
En als je goed oplet, toen ik te vernieuwen kun je dingen gespreid maar een klein beetje tussen elke letter te zien.

118
00:09:29,090 --> 00:09:31,690
Leslie laten we focussen op de lettergrootte.

119
00:09:31,700 --> 00:09:33,690
Ze lijken een beetje te klein.

120
00:09:33,980 --> 00:09:39,340
Dus gaan we gewoon gebruik maken van de lettergrootte en zet deze op te erven.

121
00:09:39,500 --> 00:09:45,600
En als ik refresh je kunt zien dat ze de lettergrootte erven en we hoeven niet te expliciet gezegd.

122
00:09:45,620 --> 00:09:47,120
Dus laten we nu eens een kijkje nemen.

123
00:09:47,620 --> 00:09:51,380
Een van de grote verschillen is dat ze op dit moment anders zijn verdeeld.

124
00:09:51,670 --> 00:09:55,490
Zodra de pagina wordt geladen hebben we hier de ruimte op onze versie.

125
00:09:55,490 --> 00:09:59,460
Maar we hebben niet dat de ruimte totdat we op een knop klikken.

126
00:09:59,480 --> 00:10:17,220
Dus wat we moeten doen is eigenlijk te stylen de overspanning die hier en die spanwijdte heet boodschap en we gaan te willen gaan en geef dat sommige eigenschappen om het te laten nemen dat ruimte en alles wat we moeten doen is een eigenschap eigenlijk.

127
00:10:17,360 --> 00:10:28,830
Dus gaan we onze boodschap die deze ventilator weer te geven te selecteren en we gaan om het pand display te veranderen in overeenstemming te zijn.

128
00:10:28,830 --> 00:10:41,790
BLOCK Dus wat dat zal doen als ik refresh zul je niet merken een groot verschil meteen, maar dat is omdat we moeten ook toewijzen een met je weet geef het een met 20 procent en op te slaan en te vernieuwen.

129
00:10:42,230 --> 00:10:48,790
We hebben nu deze overspanning, hoewel het niets in dat in beslag neemt 20 procent van dit scherm hebben.

130
00:10:49,000 --> 00:10:52,920
Zodat deze elementen aan de kant en dat is precies wat we willen duwt.

131
00:10:53,500 --> 00:10:55,690
Laten we eens een kijkje nemen en te vergelijken.

132
00:10:55,700 --> 00:10:56,960
Oké dus dat lijkt aardig in de buurt.

133
00:10:56,960 --> 00:11:05,450
Nu, wat zullen we werken aan de volgende keer wordt het verkrijgen van de geselecteerde klasse om de juiste kleur te passen en het hebben van onze hover effect ook.

134
00:11:05,450 --> 00:11:10,460
Dus dat gaat in onze knop en we gaan naar de hover effect eerst toevoegen.

135
00:11:10,460 --> 00:11:27,140
Dus alles wat we moeten doen is het toevoegen in de knop Colan Huffer en we gaan naar de doopvontkleur te veranderen wit zijn en de achtergrondkleur te staalblauw zijn.

136
00:11:27,130 --> 00:11:31,370
Dus we eigenlijk het omkeren van de kleuren en we zullen slaan en te vernieuwen.

137
00:11:31,630 --> 00:11:34,090
Nu zoals ik hang je kunt zien krijg ik dat effect.

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

139
00:11:35,600 --> 00:11:39,920
En onze geselecteerde klasse die we hebben, is van plan om precies hetzelfde uitzien.

140
00:11:39,950 --> 00:11:42,360
Gewoon naar de stijlen te kopiëren.

141
00:11:42,530 --> 00:11:45,980
Er is geen verschil wanneer we zweven over iets versus wanneer het is geselecteerd.

142
00:11:45,980 --> 00:11:47,260
Ze moeten er hetzelfde uitzien.

143
00:11:47,420 --> 00:11:52,790
Dus je kunt zien dat er goed uitziet en ik zweven en slechts terwijl ik zweven.

144
00:11:52,850 --> 00:11:55,270
Heeft het te krijgen dat blauwe achtergrond en witte tekst kleur.

145
00:11:55,340 --> 00:11:57,410
En als ik verhuis het gaat weg.

146
00:11:57,680 --> 00:11:59,010
Er is een klein verschil.

147
00:11:59,300 --> 00:12:04,470
Als ik de muisaanwijzer op de oplossing knoppen merken dat het verdwijnt in die kleur.

148
00:12:04,550 --> 00:12:08,390
Het is niet alleen een instant-schakelaar op mijn versie.

149
00:12:08,650 --> 00:12:10,550
Het schakelt gewoon meteen.

150
00:12:10,820 --> 00:12:16,440
We kunnen dat oplossen met behulp van een C Ss overgang woning in de knop selector.

151
00:12:16,670 --> 00:12:19,720
We gaan om de overgang te schrijven en doorgeven.

152
00:12:19,720 --> 00:12:30,610
Twee argumenten zijn twee waarden en de eerste is wat we willen de overgang en in ons geval zijn we gewoon gaan om het toe te voegen aan elke eigenschap en dan is de volgende hoe lang we willen dat het over te nemen.

153
00:12:30,710 --> 00:12:34,390
Dus ik ga het overdrijven in eerste instantie met twee seconden.

154
00:12:34,390 --> 00:12:43,790
Dus nogmaals de woning overgang is hoe we CSX kunnen vertellen hoe je overgangen tussen kleurveranderingen of lettergrootte veranderingen en eigenschappen animeren.

155
00:12:43,790 --> 00:12:51,900
Dus wat ik heb gezegd is dat te allen tijde eigendom veranderingen op een knop die in ons geval zal echt alleen maar kleur en achtergrond zijn.

156
00:12:52,070 --> 00:12:59,190
Dus wanneer de kleur verandert en de achtergrond kleur verandert moet twee seconden te nemen en je zult zien wanneer ik te vernieuwen.

157
00:12:59,420 --> 00:13:00,410
En ik zweven.

158
00:13:00,560 --> 00:13:01,880
O, dat is nog steeds niet werkt.

159
00:13:01,900 --> 00:13:04,750
Ik mis mijn s hier 2,00 s.

160
00:13:04,850 --> 00:13:17,520
En nu als ik verfrissen en zweven duurt twee seconden om in te vervagen en als ik klik op de geselecteerde klasse duurt eveneens twee seconden toe te voegen en het duurt twee seconden te vervagen wanneer ik vertrek.

161
00:13:17,750 --> 00:13:20,140
Dus twee seconden is zeker te lang.

162
00:13:20,560 --> 00:13:23,580
Ik denk dat ik het streven naar ongeveer punt drie seconden.

163
00:13:23,750 --> 00:13:25,950
Laten we eens testen die uit.

164
00:13:25,970 --> 00:13:26,630
Daar gaan we.

165
00:13:26,650 --> 00:13:28,990
Het ziet er goed uit voor mij.

166
00:13:29,060 --> 00:13:38,550
Het laatste grote ding is het verkrijgen van de afgeronde hoeken op deze pleinen van de manier waarop we de afgeronde hoeken wordt met behulp van een eigenschap met de naam Border radius.

167
00:13:38,690 --> 00:13:41,990
Dus ik heb de mediaan docs geopend als je wilt om een ​​kijkje te nemen.

168
00:13:42,130 --> 00:13:42,970
Het is een goed te lezen.

169
00:13:43,100 --> 00:13:46,760
Maar ze tonen u een aantal voorbeelden over de verschillende dingen die je kunt doen met raad een straal.

170
00:13:46,900 --> 00:13:52,000
Dus wat we gaan doen is het een lichte grens radius en deze zijn pleinen hier.

171
00:13:52,150 --> 00:13:54,340
En laten we eens kijken naar wat we streven.

172
00:13:54,350 --> 00:13:56,140
Dus dat zijn wat we willen krijgen.

173
00:13:56,180 --> 00:13:58,810
Dus het was een lichte lichte curve.

174
00:13:59,500 --> 00:14:10,130
Laten we naar onze vierkant klasse en wijs een straal grens en laten we iets heel overdreven om te beginnen Ik zal je laten zien wat er gebeurt als we 50 procent doen.

175
00:14:10,490 --> 00:14:13,850
We krijgen cirkels en je zou eigenlijk de voorkeur aan kringen gebruiken.

176
00:14:13,850 --> 00:14:22,780
Ik was gezien het gebruik ervan, maar uiteindelijk heb ik de voorkeur deze afgeronde hoek pleinen en het nummer dat ik heb gebruikt is 15 procent.

177
00:14:23,510 --> 00:14:25,590
En we zullen gewoon dubbel te controleren en te vergelijken die.

178
00:14:25,850 --> 00:14:27,060
OK dus dat ziet er goed uit.

179
00:14:27,080 --> 00:14:33,770
Vijftien procent, maar als je wilde ik zal je laten zien wat er gebeurt als we iets als 5 procent en refresh deed.

180
00:14:34,010 --> 00:14:36,160
We krijgen zeer licht afgeronde hoeken.

181
00:14:36,290 --> 00:14:47,810
Dus ga ik terug naar mijn 15 vernieuwen en nu hebben we onze mooie afgeronde hoeken, maar we moeten ook werken aan het verkrijgen van de animatie-effect, want toen ik op een van deze klikken.

182
00:14:47,810 --> 00:14:54,740
Merk op hoe wanneer de kleur verandert verdwijnt net als de hover effect verdween in en uit.

183
00:14:54,740 --> 00:14:59,920
Om dat te bereiken moeten we ook de eigenschap overgang te gebruiken, maar in een iets andere manier.

184
00:14:59,990 --> 00:15:07,170
Dus ik ga naar plein en het enige dat we willen de overgang is de achtergrondkleur of gewoon achtergrond.

185
00:15:07,220 --> 00:15:12,470
En weer laten we een lange tijd als 2,0 seconden en zien hoe dat eruit ziet.

186
00:15:12,500 --> 00:15:16,160
Dus ik verfrissen en ik op één van deze zal klikken.

187
00:15:16,250 --> 00:15:19,710
U kunt zien dat het duurt twee hele seconden te vervagen.

188
00:15:19,940 --> 00:15:21,940
Dus we willen niet iets dat lang duren.

189
00:15:22,120 --> 00:15:26,290
Waarschijnlijk gaan voor nulpunt zes misschien.

190
00:15:26,750 --> 00:15:27,970
Laten we het proberen.

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

192
00:15:28,850 --> 00:15:31,610
Dat lijkt me redelijk.

193
00:15:32,500 --> 00:15:36,680
Zodat u kunt zien wanneer deze achtergrond verandert het duurt 0,6 seconden.

194
00:15:36,670 --> 00:15:46,710
Wat is het verschil is echter dat wanneer andere eigenschappen veranderen zij daardoor niet animeren als onze knoppen waar we zeiden toen een eigenschap verandert moet punt nemen drie seconden.

195
00:15:46,900 --> 00:15:49,790
We zijn alleen gericht op de achtergrond en dat verandert.

196
00:15:49,810 --> 00:15:52,450
Het moet 0,6 seconden.

197
00:15:52,490 --> 00:16:02,140
Een klein ding dat we willen wel bewust zijn van is dat het pand overgang niet in alle browsers zal werken op de manier waarop we hebben het nu geschreven als browser vriendelijk mogelijk.

198
00:16:02,140 --> 00:16:10,650
We moeten eigenlijk toe te voegen in twee woningen die wij geen verschil in functionaliteit niet zullen merken, maar er zijn gewoon voor de browser ondersteuning.

199
00:16:10,660 --> 00:16:20,250
Dus de eerste is Web Kit Dasch overgang en we zullen gewoon hier toevoegen exact dezelfde waarde, net als dat.

200
00:16:20,360 --> 00:16:26,550
En dan moeten we nog een die dit moet één streepje Moz M. Ozy.

201
00:16:26,600 --> 00:16:30,070
Dit zijn dus eigenlijk browser voorvoegsels.

202
00:16:30,230 --> 00:16:36,020
Dus Web Kit is voor Web Kit die een een motor die browsers zoals Safari.

203
00:16:36,200 --> 00:16:41,700
En dan hebben we Moz en Mozy, die korte vorm is Zilah dat is wat Firefox is gebouwd op.

204
00:16:42,050 --> 00:16:48,650
Dus dit zijn slechts om wat meer ondersteuning toe te voegen, omdat de woning overgang nog niet in elke browser is ingebouwd.

205
00:16:48,640 --> 00:16:49,790
Dus we vernieuwen.

206
00:16:50,060 --> 00:16:51,850
Niets moet anders lijken.

207
00:16:51,860 --> 00:17:08,660
Ons spel werkt nog steeds op dezelfde manier en we krijgen nog steeds dezelfde animatie en we moeten hetzelfde doen hier beneden toen we allemaal hebben overgestapt alleen deze dupliceren en veranderen overgangsmaatregelen en de overgang al 0,3 seconden voor de MOOC overgang.

208
00:17:08,650 --> 00:17:15,630
Een laatste ding dat we hier kunnen oplossen is het stukje tussenruimte tussen de streep en het begin van ons netwerk.

209
00:17:15,800 --> 00:17:18,950
Zodat u kunt zien hebben we wat meer afstand hier dat we hier niet hebben.

210
00:17:19,150 --> 00:17:25,740
En op dit moment als we inspecteren hebben we een element dat is rond onze net.

211
00:17:26,140 --> 00:17:34,320
We hebben onze pleinen en we hebben een div id container en dat container div gaat rond alle 6 pleinen.

212
00:17:34,390 --> 00:17:41,950
Dus we kunnen gebruiken en gewoon voeg wat afstand aan die container div we gewoon een marge zal toevoegen aan de boven- en onderkant.

213
00:17:42,110 --> 00:17:44,540
Dus ik denk dat we het al gestyled een beetje.

214
00:17:44,540 --> 00:17:45,550
Daar gaan we.

215
00:17:45,590 --> 00:17:47,510
Dus zeiden we marge is nul.

216
00:17:47,650 --> 00:17:57,020
En auto wat wij zullen doen plaats vinden marge 20 pixels aan de boven- en onderkant en auto links en recht dat is hoe het is gecentreerd.

217
00:17:57,050 --> 00:18:01,820
Daarom willen we dat zijn auto links en rechts, maar 20 pixels op de top refresh.

218
00:18:02,330 --> 00:18:03,590
We hebben onze afstand.

219
00:18:04,120 --> 00:18:05,940
OK dus we klaar zijn met de styling voor nu.