La prochaine chose que nous allons aborder est l'arrière-plan sur le corps.
Et ce n'est pas une image de fond bien que si nous avons trouvé un qui ressemblait à ce qui fonctionnerait très bien.
Mais, en fait, c'est un gradient que CSX ajoute pour moi.
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.
Donc, il est appelé gradients dot com.
Et puis il a un tas de gradients différents, nous pouvons utiliser les touches fléchées pour voir certains d'entre eux.
Donc, je viens de passer à travers jusqu'à ce que j'ai trouvé un que j'ai aimé.
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.
Donc le corps et la pâte que dans.
Donc, c'est vraiment juste une ligne, mais il ya tous les différents préfixes de navigateur.
Donc pour Internet Explorer pour Firefox pour Chrome pour l'opéra tous ces différents préfixes.
Mais ce qu'il fait.
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.
Alors laissez-moi vous montrer ce que cela ressemble maintenant si nous rafraîchissons la nôtre.
Nous avons ce beau gradient.
On peut continuer à jouer là-bas.
Vous pouvez vérifier un peu plus et n'hésitez pas à utiliser votre propre.
Celui que j'ai décidé est appelé Bora-Bora ici.
Donc nous allons juste copier cette copie dans le presse-papiers et de remplacer ce code.
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.
Et nous allons sauver.
Et allez le vérifier maintenant.
Et voilà.
Nous nous rapprochons donc.
La prochaine grande chose sur laquelle nous devons travailler sont les icônes.
Nous avons donc une icône plus apparaître.
Et ce que cela fait, c'est qu'il montre et cache la forme et puis nous avons la poubelle.
Je peux voir que nous devons également inclure ces icônes font partie d'une bibliothèque appelée police.
Impressionnant.
Allez donc à la police impressionnante et juste google pour le site Web est Fonte awesome.
Je l'attrape moi.
Et tout ce qu'il est est une collection d'un tas d'icônes.
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à.
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.
Incroyable CDN et juste utiliser un de ces CDN ainsi.
L'un ou l'autre fonctionnerait.
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.
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.
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.
Mettons-le dans le H-1.
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.
Nous laissons ce vide et cela se trouve Rifan génial.
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.
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.
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.
F un tiret plus et flotté juste comme ça et rafraîchir et il est maintenant plus sur le bon site.
Maintenant, nous allons aborder les poubelles et nous n'allons pas faire face à l'animation tout de suite.
Nous allons juste obtenir la poubelle pour apparaître à tous au lieu d'un X.
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.
Nous parlons toujours de l'ex.
Alors nous voulons aller ici à notre Javascript.
Et quand nous stylo nouveau, nous ne voulons pas d'ajouter un span avec X.
Vous souhaitez ajouter une icône et nous devons nous assurer que nos citations n'interfèrent pas.
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.
Alors ajoutons quelques nouvelles.
Voilà.
Et je peux toujours cliquer parce qu'ils sont encore à l'intérieur d'une portée.
C'est donc un élément d'icône au lieu d'un intervalle.
Alors je clique sur l'événement encore de travail.
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.
Ils ont une richesse de zéro.
Et puis, lorsque je planifie, nous augmentons la largeur jusqu'à 40 pixels et nous le rendons animé à l'aide de la propriété transition.
Alors allons essayer une partie de cela.
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.
Et maintenant, nous avons ce fond rouge autour de lui.
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.
Ajoutons une marge à droite de 20 pixels et revenons en arrière.
Maintenant, cela nous donne l'espace que nous voulions ici.
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.
Les icônes à l'intérieur d'un important est de rendre l'icône trop blanc pour la couleur blanche.
D'accord.
Donc, je vais vous montrer comment les faire ressembler à ce premier sans l'animation afin qu'ils soient toujours là.
Et puis nous allons les faire animer afin qu'ils soient cachés jusqu'à ce que nous planifions.
Nous nous rapprochons, mais nous avons besoin de plus d'espace verticalement et horizontalement.
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.
Et je rafraîchis maintenant.
Et ça a l'air juste.
Donc, la prochaine chose est de faire l'animation.
Et la façon dont cela fonctionne, nous allons réellement définir la largeur à zéro.
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.
Alors, faisons-le maintenant.
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.
Ensuite, nous allons définir avec être de 40 pixels juste comme ça.
Et revenons à notre propre version et rafraîchissons.
Vous pouvez voir que les travées sont maintenant disparues.
Et quand je survoler et voler la portée apparaît et le bouton fonctionne.
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.
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.
Et voilà.
Nous avons notre belle animation.
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.
Donc c'est vraiment difficile à voir mais regardez l'icône ici.
Il est toujours là même quand je ne suis pas planant dessus.
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.
Donc opacité zéro, puis opacité 1.0 quand on plane.
Et cela devrait prendre soin d'elle.
Alors maintenant, nous ne pouvons pas voir les icônes.
Là, il est, puis il disparaît et il disparaît aussi bien parce que la propriété de transition affecte tout.
Donc nous allons faire 2.2 secondes et je vais vous montrer.
Remarquez comment il s'effondre et puis disparaît.
C'est donc une version très lente.
Et nous allons faire 0.2.
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.
Mais l'écart disparaît quand je me concentre là-bas maintenant.
Et puis, quand je ne suis pas concentré, il revient.
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.
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.
Zéro zéro zéro zéro.
Cela finira par nous donner une frontière invisible.
Mais remarquez ici que je vais rafraîchir maintenant que peu d'écart disparaît.