1
00:00:00,390 --> 00:00:01,650
Bon retour.

2
00:00:01,660 --> 00:00:05,770
Dans cette vidéo, nous allons travailler sur le style de notre site dès maintenant.

3
00:00:05,850 --> 00:00:09,530
Il est certainement nulle part près de ce que c'est censé ressembler à la fin.

4
00:00:09,810 --> 00:00:12,960
Alors, nous allons les comparer côte à côte.

5
00:00:13,530 --> 00:00:14,840
Voici la nôtre ici.

6
00:00:15,030 --> 00:00:21,280
Donc, certains des grands changements dont nous avons besoin pour faire arrondir les coins en ajoutant un certain espacement ici en haut.

7
00:00:21,360 --> 00:00:23,260
Changer le style des boutons ici.

8
00:00:23,490 --> 00:00:32,370
Donc, ces boutons ne ressemblent pas vraiment à des boutons jusqu'à ce que vous planer sur eux et nous obtenons un effet hover nos boutons sont vraiment hideux et nous n'avons pas d'effet hover sur eux.

9
00:00:32,370 --> 00:00:35,200
Aussi la position d'entre eux est un peu mal.

10
00:00:35,550 --> 00:00:48,310
Comme vous pouvez le voir si je devine ici je reçois le texte mais si j'étais frais que l'espace de technologie est déjà pris contre versus sur notre version si je devine que le texte pousse tout loin aux côtés.

11
00:00:48,470 --> 00:00:51,480
Il ya aussi une animation ici.

12
00:00:51,510 --> 00:01:02,990
Donc, quand je clique sur l'avis comment ils évanouissent lentement sur la nôtre lorsque nous cliquons bien si je clique sur un incorrect il juste immédiatement est supprimé.

13
00:01:03,000 --> 00:01:05,790
Nous voulons donc ajouter une transition à cela.

14
00:01:05,790 --> 00:01:09,200
Aussi nous avons le H-1 ici qui a besoin de certains travaux sur le nôtre.

15
00:01:09,390 --> 00:01:10,920
Il doit prendre plus de place.

16
00:01:11,130 --> 00:01:12,930
Nous devons changer la couleur d'arrière-plan.

17
00:01:12,930 --> 00:01:14,520
Nous voulons changer la police.

18
00:01:14,910 --> 00:01:22,610
Nous devons nous assurer que la portée de notre couleur est formatée correctement, donc c'est sur sa propre ligne et c'est une police plus grande.

19
00:01:22,710 --> 00:01:25,910
Aussi nous devons changer la police pour le corps entier.

20
00:01:25,950 --> 00:01:28,020
Donc, ce sont tous la même police.

21
00:01:28,080 --> 00:01:37,470
Et enfin vous remarquerez que nous avons un peu d'espace ici entre la bande et la fin du corps et dans la version de la solution il n'y a pas d'espace du tout.

22
00:01:38,030 --> 00:01:38,490
D'ACCORD.

23
00:01:38,550 --> 00:01:41,580
Commençons par abord aborder cette H-1.

24
00:01:41,990 --> 00:01:52,700
Donc, nous allons passer au texte de la subline et aller à la H-1 et la première chose qui va faire est d'aligner les choses au milieu comme vous pouvez le voir dans la solution.

25
00:01:52,890 --> 00:01:54,170
Les choses sont alignées au centre.

26
00:01:54,210 --> 00:02:03,070
Donc, tout ce que nous devons faire est d'ajouter du texte aligner centre et enregistrer et actualiser.

27
00:02:03,360 --> 00:02:06,520
Ok légère amélioration.

28
00:02:06,540 --> 00:02:17,280
Ensuite, nous allons changer la couleur d'arrière-plan de sorte que la couleur va être encore bleu, mais vous remarquerez que si je rafraîchir la page en ce moment, il fonctionne très bien.

29
00:02:17,400 --> 00:02:23,010
Mais si je rafraîchis encore et puis je gagne le jeu ou je clique sur de nouvelles couleurs.

30
00:02:23,010 --> 00:02:31,970
Il remonte à noir et c'est parce que notre code javascript est écrasant que nous sommes le remettre à cette couleur noirâtre gris foncé dans notre javascript.

31
00:02:32,010 --> 00:02:37,320
Nous devons trouver les endroits où nous le réinitialisons à cette couleur qui est 2 3 2 3 2 3.

32
00:02:37,320 --> 00:02:38,040
Et c'est parti.

33
00:02:38,100 --> 00:02:40,820
Nous voulons simplement que ce soit encore bleu.

34
00:02:41,340 --> 00:02:44,690
Et c'est aussi quand je rafraîchir il commence, il est encore bleu.

35
00:02:44,850 --> 00:02:45,970
J'ai de nouvelles couleurs.

36
00:02:45,990 --> 00:02:47,870
Il reste aussi bleu.

37
00:02:48,360 --> 00:02:48,810
D'ACCORD.

38
00:02:48,870 --> 00:02:49,830
Voilà.

39
00:02:49,830 --> 00:02:54,430
Maintenant, nous allons nous débarrasser de tout l'espace noir de chaque côté de notre H-1.

40
00:02:54,870 --> 00:03:02,230
Donc, dans notre H-1, nous allons nous débarrasser de toute marge marginale zéro en haut et en bas à gauche et à droite.

41
00:03:02,250 --> 00:03:04,820
Alors remarquez ce qui se passe quand faire cela.

42
00:03:04,820 --> 00:03:10,720
Cet espace noir disparaît de tous les côtés sauf pour ce petit espace d'espacement sur le haut et le bas de gauche.

43
00:03:10,830 --> 00:03:14,870
Et ce n'est pas en provenance de H-1 ou qui vient en fait du corps.

44
00:03:14,940 --> 00:03:19,420
Donc, pour fixer que nous pouvons aller au corps et lui donner marge zéro.

45
00:03:19,680 --> 00:03:24,230
Et maintenant, prêter attention à ce petit trou que je vais rafraîchir et qui disparaît.

46
00:03:24,390 --> 00:03:30,040
Donc, notre bande blanche va tout le chemin vers le côté comme il le fait dans cette version ici.

47
00:03:30,150 --> 00:03:30,970
D'ACCORD.

48
00:03:31,080 --> 00:03:33,080
Ensuite nous allons nous concentrer sur le plaisir.

49
00:03:33,450 --> 00:03:36,180
Donc, le plaisir va être le même pour tous nos éléments.

50
00:03:36,180 --> 00:03:41,690
Les boutons et le H-1 et la portée ici, il est tout de même police poids de police légèrement différente.

51
00:03:41,850 --> 00:03:46,660
Et nous allons utiliser une seule des polices construites dans le système de vantards qui s'appelle Avenir.

52
00:03:46,920 --> 00:03:52,730
Donc ça va être la famille de polices Avenir.

53
00:03:53,430 --> 00:03:56,440
C'est une police qui peut ne pas fonctionner sur tous les systèmes là-bas.

54
00:03:56,580 --> 00:04:03,930
Donc, nous allons ajouter dans une autre option qui est Mont. Serat juste comme ça.

55
00:04:04,740 --> 00:04:10,050
Donc nous nous retrouvons avec ce plaisir ici qui évidemment ne semble pas exactement la même chose.

56
00:04:10,170 --> 00:04:12,460
Et cela se résume à notre poids de police.

57
00:04:12,540 --> 00:04:16,040
Donc nous devons changer le poids de cette police, car c'est un H1.

58
00:04:16,050 --> 00:04:21,520
La valeur par défaut est de la rendre en gras ou d'avoir comme 700 ou 800 ou même 900 poids de la police.

59
00:04:21,600 --> 00:04:24,350
Ce que nous voulons faire, c'est lui donner du poids normal.

60
00:04:24,420 --> 00:04:32,230
Donc, lorsque notre H-1 peut ajouter normal poids normale et enregistrer.

61
00:04:32,400 --> 00:04:33,400
Rafraîchir.

62
00:04:33,710 --> 00:04:34,700
C'est plus proche.

63
00:04:34,700 --> 00:04:37,550
Maintenant il ya quelques autres choses que nous devons changer.

64
00:04:37,590 --> 00:04:56,510
La première est que tout cela est en majuscules et nous pouvons le faire avec RCSS en utilisant le texte transformer en majuscules et sauver Donc, maintenant regardez de plus près et voudront également s'assurer que notre couleur est sur sa propre ligne et que nous le style de cette portée légèrement différemment pour faire ça.

65
00:04:56,570 --> 00:05:01,340
Nous allons passer dans notre équipe et nous allons rééditer un peu le vieux.

66
00:05:01,700 --> 00:05:04,120
Et c'est la première façon que nous allons faire ce travail.

67
00:05:04,160 --> 00:05:12,590
Nous allons voir une autre façon de le faire avec Pearcey SS Mais nous allons commencer par le style de cette où nous avons le grand sur une ligne, puis d'ajouter une pause.

68
00:05:12,590 --> 00:05:26,440
Nous pouvons utiliser abr tag et en fait ce n'est pas une excellente idée en ce qui concerne le style, il est un peu froncée les sourcils, mais c'est un moyen rapide et facile pour commencer à ajouter quelques retours et quelques sauts de ligne et c'est tout ce que fait ce tag est il ajoute Une coupure de ligne.

69
00:05:26,620 --> 00:05:37,970
Donc, nous voulons un après le Grand nous voulons une pause et puis notre span et puis nous voulons une autre pause et puis jeu de couleur au fond et si nous rafraîchissons Maintenant, vous pouvez voir que nous nous rapprochons.

70
00:05:38,060 --> 00:05:41,280
Maintenant, nous devons nous concentrer sur la réalisation de la portée beaucoup plus grande.

71
00:05:41,660 --> 00:05:44,160
Donc, cette bande a une idée de l'affichage couleur.

72
00:05:44,300 --> 00:05:49,730
Donc nous allons passer à R C S S et sélectionnez l'affichage couleur comme ça.

73
00:05:49,900 --> 00:05:58,200
Id affichage couleur et puis nous allons dire taille de la police est de 200 pour cent de la taille de la police H-1.

74
00:05:58,550 --> 00:06:01,860
Et si nous rafraîchissons nous obtenons maintenant cette taille de police beaucoup plus grande.

75
00:06:02,210 --> 00:06:03,630
Et nous nous rapprochons.

76
00:06:03,680 --> 00:06:05,210
Nous avons nos pauses ici.

77
00:06:05,330 --> 00:06:10,040
Vous remarquez cependant que nous avons beaucoup plus d'espace entre les lignes que nous faisons ici.

78
00:06:10,280 --> 00:06:12,970
Il y a donc quelques choses que nous pouvons faire pour y remédier.

79
00:06:12,980 --> 00:06:15,780
Le premier est de changer la hauteur de la ligne.

80
00:06:16,280 --> 00:06:21,580
Donc, nous allons lui donner une hauteur de ligne de 1,1 et enregistrer.

81
00:06:22,190 --> 00:06:27,040
Et nous allons regarder notre version à nouveau et rafraîchir et vous pouvez voir que se rétrécit un peu.

82
00:06:27,290 --> 00:06:30,440
Mais maintenant nous avons perdu l'espace sur le haut et le bas.

83
00:06:30,440 --> 00:06:32,190
Il nous faut un peu d'espace.

84
00:06:32,210 --> 00:06:35,050
Donc, ce que nous allons faire est d'aller dans et ajouter un peu de rembourrage.

85
00:06:35,450 --> 00:06:47,050
Donc, nous allons ajouter le rembourrage vers le haut et le bas, pas seulement la gauche et la droite et nous voulons 20 pixels en haut et en bas, donc nous pouvons le faire comme ce rembourrage de 20 pixels et zéro.

86
00:06:47,300 --> 00:06:58,590
Nous aurions aussi pu faire padding top 20 pixels et rembourrage fond mais c'est une façon plus agréable court de le faire rafraîchir et vous pouvez voir que nous sommes presque là maintenant.

87
00:06:58,880 --> 00:07:00,670
Donc, notre en-tête semble bien.

88
00:07:00,880 --> 00:07:05,830
Nous avons la bonne police la bonne façon de la police c'est tout en majuscules la couleur d'arrière-plan correcte.

89
00:07:05,870 --> 00:07:11,240
Faisons en sorte que je joue reste correcte semble tout bon.

90
00:07:11,300 --> 00:07:14,800
La prochaine chose que nous devrions aborder sont les boutons sur cette barre de navigation.

91
00:07:15,130 --> 00:07:18,080
Nous avons donc certainement beaucoup de chemin à parcourir pour les améliorer.

92
00:07:18,080 --> 00:07:23,840
La première chose que nous voulons faire est de se débarrasser des frontières de sorte que nous n'avons pas cette bordure évidente autour du bouton.

93
00:07:23,870 --> 00:07:27,230
Nous voulons aussi nous débarrasser de la couleur de fond.

94
00:07:27,320 --> 00:07:29,290
Il ne devrait donc pas y avoir d'arrière-plan comme vous pouvez le voir ici.

95
00:07:29,330 --> 00:07:33,210
C'est juste attendre jusqu'à ce que nous planifions ou jusqu'à ce que nous en choisissions un.

96
00:07:33,250 --> 00:07:37,790
Aussi, nous voulons nous assurer que la famille de polices est la même que cette police ici.

97
00:07:37,790 --> 00:07:39,230
Alors, commençons.

98
00:07:39,230 --> 00:07:48,620
Et je vais sélectionner tous les boutons de sorte que le bouton et nous allons simplement dire frontière aucune et sauver.

99
00:07:48,800 --> 00:07:50,850
Faites attention aux boutons quand je rafraîchis.

100
00:07:51,170 --> 00:07:51,790
D'ACCORD.

101
00:07:51,980 --> 00:07:53,520
Nous n'avons donc pas de frontière.

102
00:07:53,720 --> 00:07:55,600
Mais nous avons toujours cette couleur de fond.

103
00:07:55,850 --> 00:08:02,760
Donc, maintenant que le même fond aucun et sauver et rafraîchir et nous nous rapprochons.

104
00:08:02,950 --> 00:08:04,800
Donc, maintenant, nous avons tout simplement du texte.

105
00:08:05,120 --> 00:08:09,520
Et nous allons commencer par faire tout ce texte en majuscules comme nous avons ici.

106
00:08:09,740 --> 00:08:16,330
Donc, nous utilisons la transformation du texte, il suffit de copier cette ligne sur le pâte qui s'y trouve et de rafraîchir.

107
00:08:16,400 --> 00:08:18,840
Maintenant, nos boutons sont tous en majuscules.

108
00:08:18,920 --> 00:08:25,370
La prochaine chose que nous voulons faire est de s'assurer que le bouton va tout le chemin du haut vers le bas du conteneur div stripe.

109
00:08:25,400 --> 00:08:31,580
À l'heure actuelle, il ne prend qu'une partie de l'espace, donc nous pouvons le faire en fixant la hauteur à 100 pour cent.

110
00:08:31,750 --> 00:08:38,900
Et cela signifie qu'il prendra jusqu'à 100 pour cent de l'élément contenant comme vous pouvez le voir qui nous rapproche beaucoup plus.

111
00:08:38,930 --> 00:08:47,540
Nous avons juste besoin de changer quelques couleurs changer la taille de la police le poids de la police et ensuite changer l'effet hover que nous n'avons pas encore mis en place.

112
00:08:48,010 --> 00:08:54,980
La prochaine chose qui va faire est de faire la police d'attendre un peu plus lourd et de changer la couleur pour être toujours bleu ainsi.

113
00:08:55,040 --> 00:09:02,350
Donc poids de la police fera sept cents et puis la couleur sera également encore bleu.

114
00:09:02,650 --> 00:09:05,370
Et nous allons vérifier que rafraîchir.

115
00:09:06,020 --> 00:09:14,750
Donc, il devient un peu plus vieux et vous pouvez également voir que la couleur a maintenant changé à celui encore bleu de la même couleur, nous avons ici.

116
00:09:14,760 --> 00:09:21,810
Il ya un changement vraiment mineur que nous pouvons faire qui est de changer l'espacement des lettres pour être un pixel.

117
00:09:21,830 --> 00:09:28,390
Et si vous faites attention lorsque je rafraîchir vous pouvez voir les choses espacées juste un peu entre chaque lettre.

118
00:09:29,090 --> 00:09:31,690
Leslie nous concentrons sur la taille de la police.

119
00:09:31,700 --> 00:09:33,690
Ils semblent un peu trop petits.

120
00:09:33,980 --> 00:09:39,340
Donc, nous allons simplement utiliser la taille de la police et le définir pour être hérité.

121
00:09:39,500 --> 00:09:45,600
Et si je rafraîchir vous pouvez voir qu'ils héritent de la taille de la police et nous n'avons pas à le dire explicitement.

122
00:09:45,620 --> 00:09:47,120
Alors jetez un oeil maintenant.

123
00:09:47,620 --> 00:09:51,380
Une des grandes différences est qu'ils sont actuellement espacés différemment.

124
00:09:51,670 --> 00:09:55,490
Dès que la page est chargée, nous avons l'espace ici sur notre version.

125
00:09:55,490 --> 00:09:59,460
Cependant, nous n'avons pas cet espace avant de cliquer sur un bouton.

126
00:09:59,480 --> 00:10:17,220
Donc, ce que nous devons faire est de style réellement la portée qui est ici et que span est appelé message et nous allons vouloir aller et donner que certaines propriétés pour le faire prendre cet espace et tout ce que nous devons faire est de changer un Propriété réellement.

127
00:10:17,360 --> 00:10:28,830
Nous allons donc sélectionner afficher notre message qui est ce fan et nous allons changer la propriété d'affichage pour être en ligne.

128
00:10:28,830 --> 00:10:41,790
BLOCK Donc ce qui va faire si je rafraîchir vous ne remarquerez pas une grande différence tout de suite, mais c'est parce que nous avons aussi besoin de lui assigner un avec vous savez lui donner un avec de 20 pour cent et enregistrer et rafraîchir.

129
00:10:42,230 --> 00:10:48,790
Nous avons maintenant cette portée même si elle n'a rien en elle qui occupe 20 pour cent de cet écran.

130
00:10:49,000 --> 00:10:52,920
Donc, cela pousse ces éléments vers le côté qui est exactement ce que nous voulons.

131
00:10:53,500 --> 00:10:55,690
Jetons un coup d'oeil et les comparer.

132
00:10:55,700 --> 00:10:56,960
D'accord, ça semble assez proche.

133
00:10:56,960 --> 00:11:05,450
Maintenant, ce que nous allons travailler sur la prochaine est d'obtenir la classe sélectionnée pour correspondre à la bonne couleur et ayant notre effet hover ainsi.

134
00:11:05,450 --> 00:11:10,460
Donc, cela va être en baisse dans notre bouton et nous allons ajouter l'effet hover d'abord.

135
00:11:10,460 --> 00:11:27,140
Donc, tout ce que nous devons faire est d'ajouter dans le bouton Colan Huffer et nous allons changer la couleur de la police pour être blanc et la couleur d'arrière-plan pour être bleu acier.

136
00:11:27,130 --> 00:11:31,370
Nous inversons donc les couleurs et nous allons économiser et actualiser.

137
00:11:31,630 --> 00:11:34,090
Maintenant que je flotte, vous pouvez voir que j'obtiens cet effet.

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

139
00:11:35,600 --> 00:11:39,920
Et notre classe choisie que nous avons va regarder exactement la même chose.

140
00:11:39,950 --> 00:11:42,360
Juste aller à copier les styles.

141
00:11:42,530 --> 00:11:45,980
Il n'y a pas de différence lorsque nous sommes survoler quelque chose ou quand il est sélectionné.

142
00:11:45,980 --> 00:11:47,260
Ils devraient avoir la même apparence.

143
00:11:47,420 --> 00:11:52,790
Donc, vous pouvez voir que cela semble correct et je planer et seulement pendant que je flotte.

144
00:11:52,850 --> 00:11:55,270
Fait-il obtenir ce fond bleu et la couleur de texte blanche.

145
00:11:55,340 --> 00:11:57,410
Et quand je bouge, il s'en va.

146
00:11:57,680 --> 00:11:59,010
Il y a une légère différence.

147
00:11:59,300 --> 00:12:04,470
Si je flotte au-dessus des boutons de solution remarquez qu'il se fanent dans cette couleur.

148
00:12:04,550 --> 00:12:08,390
Ce n'est pas seulement un instant d'activation de ma version.

149
00:12:08,650 --> 00:12:10,550
Il bascule juste instantanément.

150
00:12:10,820 --> 00:12:16,440
Nous pouvons corriger cela à l'aide d'une propriété de transition C Ss à l'intérieur du sélecteur de bouton.

151
00:12:16,670 --> 00:12:19,720
Nous allons écrire la transition et la transmettre.

152
00:12:19,720 --> 00:12:30,610
Deux arguments sont deux valeurs et le premier est ce que nous voulons transition et dans notre cas, nous allons simplement l'ajouter à chaque propriété et ensuite la prochaine est combien de temps nous voulons qu'il prenne.

153
00:12:30,710 --> 00:12:34,390
Je vais donc l'exagérer d'abord avec deux secondes.

154
00:12:34,390 --> 00:12:43,790
Donc, encore une fois la propriété de transition est de savoir comment nous pouvons dire à CSX comment animer les transitions entre les changements de couleur ou les changements de taille de la police et les propriétés.

155
00:12:43,790 --> 00:12:51,900
Donc, ce que j'ai dit ici, c'est que tout changement de propriété de temps sur n'importe quel bouton qui dans notre cas sera vraiment juste de couleur et d'arrière-plan.

156
00:12:52,070 --> 00:12:59,190
Donc chaque fois que la couleur change et la couleur de fond change, cela devrait prendre deux secondes et vous verrez quand je rafraîchis.

157
00:12:59,420 --> 00:13:00,410
Et je flotte.

158
00:13:00,560 --> 00:13:01,880
Oh, ça ne fonctionne toujours pas.

159
00:13:01,900 --> 00:13:04,750
Je manque mon s ici 2.00 s.

160
00:13:04,850 --> 00:13:17,520
Et maintenant, si je rafraîchir et hover, il faut deux secondes pour fondu et quand je clique pour ajouter la classe sélectionnée, il faut aussi deux secondes et il faut deux secondes pour fondu quand je pars.

161
00:13:17,750 --> 00:13:20,140
Donc, deux secondes est certainement trop long.

162
00:13:20,560 --> 00:13:23,580
Je pense que je vise pour le point trois secondes.

163
00:13:23,750 --> 00:13:25,950
Examinons cela.

164
00:13:25,970 --> 00:13:26,630
Voilà.

165
00:13:26,650 --> 00:13:28,990
Ça me semble plutôt bien.

166
00:13:29,060 --> 00:13:38,550
La dernière grande chose est d'obtenir les coins arrondis sur ces carrés de la façon dont nous obtenons ces coins arrondis est en utilisant une propriété appelée Rayon frontière.

167
00:13:38,690 --> 00:13:41,990
Donc, j'ai les documents médians ouverts si vous voulez jeter un oeil.

168
00:13:42,130 --> 00:13:42,970
C'est une bonne lecture.

169
00:13:43,100 --> 00:13:46,760
Mais ils vous montrent quelques exemples sur les différentes choses que vous pouvez faire à bord d'un rayon.

170
00:13:46,900 --> 00:13:52,000
Donc, ce que nous allons faire est de lui donner un rayon frontière légère et ce sont des carrés ici.

171
00:13:52,150 --> 00:13:54,340
Et jetons un coup d'oeil à ce que nous visons.

172
00:13:54,350 --> 00:13:56,140
Ce sont donc ce que nous voulons obtenir.

173
00:13:56,180 --> 00:13:58,810
C'était donc une légère courbe légère.

174
00:13:59,500 --> 00:14:10,130
Allons jusqu'à notre classe carrée et assigner un rayon de frontière et faisons quelque chose de vraiment exagéré pour commencer, je vais vous montrer ce qui se passe si nous faisons 50 pour cent.

175
00:14:10,490 --> 00:14:13,850
Nous obtenons des cercles et vous pourriez préférer utiliser des cercles.

176
00:14:13,850 --> 00:14:22,780
J'avais envisagé de les utiliser, mais à la fin, j'ai préféré ces coins arrondis et le nombre que j'ai utilisé est de 15 pour cent.

177
00:14:23,510 --> 00:14:25,590
Et nous allons simplement vérifier et comparer ceux.

178
00:14:25,850 --> 00:14:27,060
OK pour que l'air bien.

179
00:14:27,080 --> 00:14:33,770
Quinze pour cent, mais si vous voulez, je vais vous montrer ce qui se passe si nous avons fait quelque chose comme 5 pour cent et rafraîchir.

180
00:14:34,010 --> 00:14:36,160
Nous obtenons des angles très légèrement arrondis.

181
00:14:36,290 --> 00:14:47,810
Donc, je vais revenir à mes 15 rafraîchissements et maintenant nous avons nos coins arrondis agréable, mais nous devons également travailler sur obtenir l'effet d'animation parce que lorsque je clique sur un de ces.

182
00:14:47,810 --> 00:14:54,740
Remarquez que lorsque la couleur change, elle disparaît comme l'effet de survol.

183
00:14:54,740 --> 00:14:59,920
Pour ce faire, nous devons également utiliser la propriété de transition, mais d'une manière légèrement différente.

184
00:14:59,990 --> 00:15:07,170
Donc, je vais aller au carré et la seule chose que nous voulons faire la transition est la couleur de fond ou de fond.

185
00:15:07,220 --> 00:15:12,470
Et encore une fois, faisons un long temps comme 2,0 secondes et voir comment cela ressemble.

186
00:15:12,500 --> 00:15:16,160
Alors je vais rafraîchir et je vais cliquer sur un de ces.

187
00:15:16,250 --> 00:15:19,710
Vous pouvez voir qu'il faut deux secondes entières pour fondu.

188
00:15:19,940 --> 00:15:21,940
Donc nous ne voulons pas que quelque chose dure aussi longtemps.

189
00:15:22,120 --> 00:15:26,290
Probablement aller à zéro point six peut-être.

190
00:15:26,750 --> 00:15:27,970
Essayons ça.

191
00:15:28,420 --> 00:15:28,850
D'ACCORD.

192
00:15:28,850 --> 00:15:31,610
Cela semble raisonnable.

193
00:15:32,500 --> 00:15:36,680
Donc vous pouvez voir chaque fois que ce fond change, il prend 0,6 secondes.

194
00:15:36,670 --> 00:15:46,710
Ce qui est différent cependant est que quand les autres propriétés changent il ne les anime pas comme nos boutons où nous avons dit quand n'importe quelle propriété change il devrait prendre le point trois secondes.

195
00:15:46,900 --> 00:15:49,790
Nous ne ciblons que le contexte et les changements.

196
00:15:49,810 --> 00:15:52,450
Cela devrait prendre 0,6 secondes.

197
00:15:52,490 --> 00:16:02,140
Une chose mineure dont nous voulons être conscients, c'est que la propriété de transition ne fonctionnera pas dans tous les navigateurs de la façon dont nous l'avons écrit en ce moment pour être aussi convivial que possible.

198
00:16:02,140 --> 00:16:10,650
Nous avons réellement besoin d'ajouter deux autres propriétés que nous ne remarquons aucune différence dans la fonctionnalité, mais il ya juste pour le support du navigateur.

199
00:16:10,660 --> 00:16:20,250
Donc, le premier est le Web Kit Dasch transition et nous allons simplement ajouter la même valeur exacte ici juste comme ça.

200
00:16:20,360 --> 00:16:26,550
Et puis nous avons besoin d'un autre qui est ce devrait être un tiret Moz M. Ozy.

201
00:16:26,600 --> 00:16:30,070
Ce sont donc des préfixes de navigateur.

202
00:16:30,230 --> 00:16:36,020
Donc Web Kit est pour le Kit Web qui est un moteur que les navigateurs utilisent comme Safari.

203
00:16:36,200 --> 00:16:41,700
Et puis nous avons Moz et Mozy qui est une forme courte est Zilah qui est ce sur quoi Firefox est construit.

204
00:16:42,050 --> 00:16:48,650
Donc, ce sont juste pour ajouter un peu plus de soutien parce que la propriété de transition n'est pas intégré dans chaque navigateur unique encore.

205
00:16:48,640 --> 00:16:49,790
Alors nous rafraîchissons.

206
00:16:50,060 --> 00:16:51,850
Rien ne doit sembler différent.

207
00:16:51,860 --> 00:17:08,660
Notre jeu fonctionne toujours de la même manière et nous obtenons toujours la même animation et nous devrions faire la même chose ici quand nous avons fait la transition tout simplement dupliquer ceci et changer cela pour être transitionnel et transition toutes les 0.3 secondes pour la transition de MOOC.

208
00:17:08,650 --> 00:17:15,630
Une dernière chose que nous pouvons fixer ici est le peu d'espacement entre la bande et le début de notre grille.

209
00:17:15,800 --> 00:17:18,950
Donc vous pouvez voir que nous avons un peu plus d'espace ici que nous n'avons pas ici.

210
00:17:19,150 --> 00:17:25,740
Et maintenant, si nous inspectons, nous avons un élément qui est autour de notre grille.

211
00:17:26,140 --> 00:17:34,320
Nous avons nos carrés et nous avons un conteneur div ID et ce conteneur div va autour de tous les 6 carrés.

212
00:17:34,390 --> 00:17:41,950
Donc, nous pouvons utiliser cela et ajouter un peu d'espace pour ce conteneur div, nous allons simplement ajouter une marge vers le haut et le bas.

213
00:17:42,110 --> 00:17:44,540
Donc je pense que nous l'avons déjà appelé un peu.

214
00:17:44,540 --> 00:17:45,550
Et c'est parti.

215
00:17:45,590 --> 00:17:47,510
Nous avons donc dit que la marge est nulle.

216
00:17:47,650 --> 00:17:57,020
Et l'auto ce que nous ferons à la place est dit marge est de 20 pixels sur le haut et le bas et auto sur la gauche et la droite qui est la façon dont il est centré.

217
00:17:57,050 --> 00:18:01,820
Donc, nous voulons que l'auto à gauche et à droite, mais 20 pixels sur le haut d'actualiser.

218
00:18:02,330 --> 00:18:03,590
Nous avons notre espacement.

219
00:18:04,120 --> 00:18:05,940
OK, nous avons terminé avec le style pour l'instant.