1
00:00:00,210 --> 00:00:03,460
La prochaine chose que nous allons aborder est l'arrière-plan sur le corps.

2
00:00:03,660 --> 00:00:09,270
Et ce n'est pas une image de fond bien que si nous avons trouvé un qui ressemblait à ce qui fonctionnerait très bien.

3
00:00:09,420 --> 00:00:13,590
Mais, en fait, c'est un gradient que CSX ajoute pour moi.

4
00:00:13,650 --> 00:00:27,470
Donc, en substance, nous pouvons écrire gradients linéaires et plutôt que de les écrire sur notre propre à partir de zéro, je vais vous montrer une grande ressource qui a quelques gradients de couleur pré-fait agréable que nous pouvons travailler avec que nous pouvons mettre à jour et modifier sur notre posséder.

5
00:00:27,750 --> 00:00:29,850
Donc, il est appelé gradients dot com.

6
00:00:30,030 --> 00:00:35,580
Et puis il a un tas de gradients différents, nous pouvons utiliser les touches fléchées pour voir certains d'entre eux.

7
00:00:36,180 --> 00:00:39,860
Donc, je viens de passer à travers jusqu'à ce que j'ai trouvé un que j'ai aimé.

8
00:00:40,050 --> 00:00:52,120
Alors disons que je voulais utiliser tout ce que nous devons faire est de cliquer sur obtenir CSSA code ou appuyez sur la touche Entrée et puis copiez ce code dans un Presse-papiers et ensuite nous allons sélectionner le corps.

9
00:00:52,360 --> 00:00:56,960
Donc le corps et la pâte que dans.

10
00:00:57,540 --> 00:01:02,610
Donc, c'est vraiment juste une ligne, mais il ya tous les différents préfixes de navigateur.

11
00:01:02,880 --> 00:01:09,130
Donc pour Internet Explorer pour Firefox pour Chrome pour l'opéra tous ces différents préfixes.

12
00:01:09,240 --> 00:01:09,990
Mais ce qu'il fait.

13
00:01:10,020 --> 00:01:18,740
Nous mettons l'arrière-plan en gradient linéaire et nous choisissons deux couleurs et différents pourcentages de ces couleurs et aussi l'angle.

14
00:01:18,750 --> 00:01:24,390
Alors laissez-moi vous montrer ce que cela ressemble maintenant si nous rafraîchissons la nôtre.

15
00:01:24,390 --> 00:01:26,190
Nous avons ce beau gradient.

16
00:01:26,580 --> 00:01:28,420
On peut continuer à jouer là-bas.

17
00:01:28,620 --> 00:01:31,890
Vous pouvez vérifier un peu plus et n'hésitez pas à utiliser votre propre.

18
00:01:31,980 --> 00:01:35,860
Celui que j'ai décidé est appelé Bora-Bora ici.

19
00:01:36,210 --> 00:01:42,840
Donc nous allons juste copier cette copie dans le presse-papiers et de remplacer ce code.

20
00:01:42,840 --> 00:01:52,870
Tout cela ici avec ce nouveau gradient qui est encore une fois un autre gradient linéaire que quelqu'un d'autre a écrit deux couleurs pourcentages différents de chacun.

21
00:01:53,150 --> 00:01:54,450
Et nous allons sauver.

22
00:01:54,780 --> 00:01:56,250
Et allez le vérifier maintenant.

23
00:01:56,520 --> 00:01:57,830
Et voilà.

24
00:01:57,840 --> 00:01:59,190
Nous nous rapprochons donc.

25
00:01:59,430 --> 00:02:02,860
La prochaine grande chose sur laquelle nous devons travailler sont les icônes.

26
00:02:03,060 --> 00:02:05,530
Nous avons donc une icône plus apparaître.

27
00:02:05,640 --> 00:02:10,130
Et ce que cela fait, c'est qu'il montre et cache la forme et puis nous avons la poubelle.

28
00:02:10,130 --> 00:02:16,100
Je peux voir que nous devons également inclure ces icônes font partie d'une bibliothèque appelée police.

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

30
00:02:17,050 --> 00:02:22,650
Allez donc à la police impressionnante et juste google pour le site Web est Fonte awesome.

31
00:02:22,660 --> 00:02:24,030
Je l'attrape moi.

32
00:02:24,930 --> 00:02:29,660
Et tout ce qu'il est est une collection d'un tas d'icônes.

33
00:02:29,970 --> 00:02:39,720
Alors laissez-moi vous montrer si nous regardons sous les icônes il ya une énorme liste de toutes les différentes icônes que nous pouvons utiliser afin que vous puissiez voir là.

34
00:02:40,380 --> 00:02:52,740
Nous devons donc inclure cette bibliothèque à l'intérieur de notre application afin que nous puissions soit la télécharger soit cliquer sur le téléchargement, soit nous pouvons également faire une police.

35
00:02:52,740 --> 00:02:57,370
Incroyable CDN et juste utiliser un de ces CDN ainsi.

36
00:02:57,450 --> 00:02:58,710
L'un ou l'autre fonctionnerait.

37
00:02:59,100 --> 00:03:06,800
Donc, pour le bien de la variété, car ils ont déjà téléchargé la requête Jay, je vais utiliser le CD et ici copier ce lien.

38
00:03:07,470 --> 00:03:30,940
Ensuite, je vais aller à ma page d'index Timo et j'ai besoin d'ajouter une balise de lien, car il est fichier CSSA donc ce n'est pas réellement un fichier javascript ou une police, mais c'est un fichier C Ss et je vais enregistrer et ce que c'est En fait, me donne un tas de classes qui sont pré-construits et pré-fait que je peux ensuite ajouter aux éléments que je vais vous montrer quelques exemples.

39
00:03:31,230 --> 00:03:51,350
Si vous vouliez utiliser dire la batterie vide ou batterie trois quarts tout ce que nous devons savoir, c'est que la classe est appelée un tableau de bord dash 3 tiret courters Donc nous devons ajouter un juste copier le code ici quelque part dans notre application.

40
00:03:51,510 --> 00:03:53,400
Mettons-le dans le H-1.

41
00:03:53,400 --> 00:03:59,060
C'est une étiquette d'oeil qui représente l'icône et nous lui donnons une classe et nous n'avons pas à mettre n'importe quoi dedans ici.

42
00:03:59,070 --> 00:04:02,560
Nous laissons ce vide et cela se trouve Rifan génial.

43
00:04:02,700 --> 00:04:13,500
Et puis c'est le nom de l'icône et sauvera rafraîchir et nous avons maintenant cette icône de batterie plutôt que l'icône de batterie trois trimestre.

44
00:04:13,500 --> 00:04:28,070
Nous voulons le signe plus et la poubelle afin que nous allons ici et à l'intérieur de la H-1 gardera l'icône et garder la f une classe, mais nous voulons F.A. tiret plus et n'hésitez pas à utiliser votre propre icône.

45
00:04:28,110 --> 00:04:49,990
Si vous continuez à trouver génial et vous trouvez un autre que vous aimez parce que nous pourrions également utiliser l'un comme un crayon regardant l'icône ou un crayon et du papier et si j'étais frais et ont maintenant le signe plus qui est entré dans le style et se déplacer Sur la droite et tout ce que nous devons faire pour cela est de le sélectionner d'abord afin que nous allons sélectionner le chien.

46
00:04:50,280 --> 00:05:00,950
F un tiret plus et flotté juste comme ça et rafraîchir et il est maintenant plus sur le bon site.

47
00:05:00,960 --> 00:05:06,250
Maintenant, nous allons aborder les poubelles et nous n'allons pas faire face à l'animation tout de suite.

48
00:05:06,300 --> 00:05:09,810
Nous allons juste obtenir la poubelle pour apparaître à tous au lieu d'un X.

49
00:05:10,260 --> 00:05:44,520
Donc, revenons en arrière et sur notre spande nous allons réellement nous débarrasser des X et à l'intérieur de la portée, nous allons ajouter un autre e-tag et le e-TAG va avoir une classe de FAA et le nom de L'icône poubelle est FAA Dasch trash nous allons copier que plus à l'autre span et c'est seulement pour l'existant à utiliser lorsque la page charge, mais nous obtenons trois poubelles pour les nouveaux.

50
00:05:44,730 --> 00:05:46,280
Nous parlons toujours de l'ex.

51
00:05:46,530 --> 00:05:50,310
Alors nous voulons aller ici à notre Javascript.

52
00:05:50,310 --> 00:05:54,990
Et quand nous stylo nouveau, nous ne voulons pas d'ajouter un span avec X.

53
00:05:55,290 --> 00:06:00,930
Vous souhaitez ajouter une icône et nous devons nous assurer que nos citations n'interfèrent pas.

54
00:06:00,930 --> 00:06:08,690
Donc, si nous utilisons des guillemets simples là et sauver et maintenant nous devrions avoir une poubelle icône à l'intérieur de la portée.

55
00:06:08,870 --> 00:06:10,830
Alors ajoutons quelques nouvelles.

56
00:06:10,830 --> 00:06:11,650
Voilà.

57
00:06:12,030 --> 00:06:15,320
Et je peux toujours cliquer parce qu'ils sont encore à l'intérieur d'une portée.

58
00:06:15,450 --> 00:06:18,680
C'est donc un élément d'icône au lieu d'un intervalle.

59
00:06:19,530 --> 00:06:22,440
Alors je clique sur l'événement encore de travail.

60
00:06:22,470 --> 00:06:30,210
Maintenant, nous allons travailler sur cette animation simple et tout cela est fait avec C évaluer les travées ici sont effectivement cachés lorsque la page charge.

61
00:06:30,210 --> 00:06:31,630
Ils ont une richesse de zéro.

62
00:06:31,860 --> 00:06:40,950
Et puis, lorsque je planifie, nous augmentons la largeur jusqu'à 40 pixels et nous le rendons animé à l'aide de la propriété transition.

63
00:06:41,430 --> 00:06:44,070
Alors allons essayer une partie de cela.

64
00:06:44,400 --> 00:07:06,270
Ouvrez notre fichier CSSA et la première chose que nous allons faire est de style spans si span et nous allons leur donner une couleur de fond que la couleur rouge qui est e 7 4 C 3 C et va rafraîchir.

65
00:07:06,460 --> 00:07:10,820
Et maintenant, nous avons ce fond rouge autour de lui.

66
00:07:10,830 --> 00:07:22,680
La prochaine chose que nous allons faire est de leur donner une hauteur de 40 pixels qui ne semble pas faire beaucoup encore, mais une fois que nous ajoutons dans quelques propriétés plus vous remarquerez une différence.

67
00:07:23,250 --> 00:07:29,140
Ajoutons une marge à droite de 20 pixels et revenons en arrière.

68
00:07:29,200 --> 00:07:34,420
Maintenant, cela nous donne l'espace que nous voulions ici.

69
00:07:35,550 --> 00:07:45,700
Ensuite, nous allons leur donner du texte d'aligner centre qui est juste une différence très légère sur les travées ici.

70
00:07:45,990 --> 00:07:55,110
Les icônes à l'intérieur d'un important est de rendre l'icône trop blanc pour la couleur blanche.

71
00:07:55,110 --> 00:07:55,970
D'accord.

72
00:07:56,220 --> 00:08:02,640
Donc, je vais vous montrer comment les faire ressembler à ce premier sans l'animation afin qu'ils soient toujours là.

73
00:08:02,930 --> 00:08:06,830
Et puis nous allons les faire animer afin qu'ils soient cachés jusqu'à ce que nous planifions.

74
00:08:06,870 --> 00:08:12,190
Nous nous rapprochons, mais nous avons besoin de plus d'espace verticalement et horizontalement.

75
00:08:12,390 --> 00:08:21,990
Donc, je vais ajouter dans un avec un 40 pixels qui finalement nous allons mettre à zéro et de mettre l'affichage deux dans le bloc de ligne.

76
00:08:22,440 --> 00:08:23,950
Et je rafraîchis maintenant.

77
00:08:24,870 --> 00:08:26,790
Et ça a l'air juste.

78
00:08:26,790 --> 00:08:29,460
Donc, la prochaine chose est de faire l'animation.

79
00:08:29,760 --> 00:08:33,630
Et la façon dont cela fonctionne, nous allons réellement définir la largeur à zéro.

80
00:08:33,780 --> 00:08:42,420
Donc, toutes ces travées ont un zéro jusqu'à ce que je survoler un allié et ensuite nous augmentons que d'être de 40 sur cette portée.

81
00:08:42,870 --> 00:08:44,580
Alors, faisons-le maintenant.

82
00:08:45,020 --> 00:09:02,480
Je vais définir avec zéro et puis lorsque nous planer sur un allié et non pas seulement la portée, mais lorsque nous planer sur un allié, nous voulons sélectionner la portée qui est à l'intérieur d'un allié qui est plané sur.

83
00:09:02,790 --> 00:09:08,020
Ensuite, nous allons définir avec être de 40 pixels juste comme ça.

84
00:09:08,070 --> 00:09:11,310
Et revenons à notre propre version et rafraîchissons.

85
00:09:11,670 --> 00:09:13,920
Vous pouvez voir que les travées sont maintenant disparues.

86
00:09:14,310 --> 00:09:19,330
Et quand je survoler et voler la portée apparaît et le bouton fonctionne.

87
00:09:19,800 --> 00:09:27,860
Donc, la prochaine fonctionnalité est de le faire animer de sorte qu'il n'apparaît pas seulement instantanément et pour faire que nous allons simplement utiliser la propriété de transition.

88
00:09:28,170 --> 00:09:43,680
Donc, sur la portée, nous allons ajouter la transition point zéro deux secondes et nous allons rendre linéaire qui se réfère simplement à l'assouplissement qui signifie qu'il se déplacera à une vitesse constante.

89
00:09:43,680 --> 00:09:44,520
Et voilà.

90
00:09:44,520 --> 00:09:46,680
Nous avons notre belle animation.

91
00:09:47,250 --> 00:09:56,110
Il ya un petit élément qui me dérange ici qui est que l'icône montre toujours même lorsque la portée est de zéro pixels de large.

92
00:09:56,340 --> 00:09:59,970
Donc c'est vraiment difficile à voir mais regardez l'icône ici.

93
00:09:59,970 --> 00:10:03,230
Il est toujours là même quand je ne suis pas planant dessus.

94
00:10:03,240 --> 00:10:11,210
Donc, ce que nous allons faire est juste de définir l'opacité sur la portée à zéro et puis le définir comme un lorsque nous voler.

95
00:10:11,370 --> 00:10:17,580
Donc opacité zéro, puis opacité 1.0 quand on plane.

96
00:10:18,420 --> 00:10:19,840
Et cela devrait prendre soin d'elle.

97
00:10:19,860 --> 00:10:22,370
Alors maintenant, nous ne pouvons pas voir les icônes.

98
00:10:22,500 --> 00:10:29,790
Là, il est, puis il disparaît et il disparaît aussi bien parce que la propriété de transition affecte tout.

99
00:10:30,120 --> 00:10:34,740
Donc nous allons faire 2.2 secondes et je vais vous montrer.

100
00:10:35,640 --> 00:10:40,810
Remarquez comment il s'effondre et puis disparaît.

101
00:10:40,890 --> 00:10:42,560
C'est donc une version très lente.

102
00:10:43,200 --> 00:10:46,830
Et nous allons faire 0.2.

103
00:10:47,070 --> 00:10:59,530
Il ya une petite chose ennuyeuse que nous avons laissé qui est si vous regardez vraiment étroitement ici ou augmenter la taille là est un petit écart entre l'entrée et puis cette liste l'UL.

104
00:11:00,060 --> 00:11:03,810
Mais l'écart disparaît quand je me concentre là-bas maintenant.

105
00:11:04,200 --> 00:11:07,220
Et puis, quand je ne suis pas concentré, il revient.

106
00:11:07,500 --> 00:11:24,690
Donc, pour fixer que nous allons ajouter une petite frontière qui est invisible en fait, il va avoir une couleur juste une petite frontière de R.G. Être 0 0 0 0 0 0 que nous allons prendre juste le même espace que notre frontière fait quand nous sommes concentrés.

107
00:11:25,080 --> 00:11:34,560
Nous allons donc revenir en arrière et aimer l'entrée que nous avons ici et lui donner une bordure de trois pixels R-Ga solide.

108
00:11:35,150 --> 00:11:38,640
Zéro zéro zéro zéro.

109
00:11:39,210 --> 00:11:41,770
Cela finira par nous donner une frontière invisible.

110
00:11:41,880 --> 00:11:47,420
Mais remarquez ici que je vais rafraîchir maintenant que peu d'écart disparaît.