Bon retour.
Dans cette vidéo, nous allons travailler sur le style de notre site dès maintenant.
Il est certainement nulle part près de ce que c'est censé ressembler à la fin.
Alors, nous allons les comparer côte à côte.
Voici la nôtre ici.
Donc, certains des grands changements dont nous avons besoin pour faire arrondir les coins en ajoutant un certain espacement ici en haut.
Changer le style des boutons ici.
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.
Aussi la position d'entre eux est un peu mal.
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.
Il ya aussi une animation ici.
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é.
Nous voulons donc ajouter une transition à cela.
Aussi nous avons le H-1 ici qui a besoin de certains travaux sur le nôtre.
Il doit prendre plus de place.
Nous devons changer la couleur d'arrière-plan.
Nous voulons changer la police.
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.
Aussi nous devons changer la police pour le corps entier.
Donc, ce sont tous la même police.
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.
D'ACCORD.
Commençons par abord aborder cette H-1.
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.
Les choses sont alignées au centre.
Donc, tout ce que nous devons faire est d'ajouter du texte aligner centre et enregistrer et actualiser.
Ok légère amélioration.
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.
Mais si je rafraîchis encore et puis je gagne le jeu ou je clique sur de nouvelles couleurs.
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.
Nous devons trouver les endroits où nous le réinitialisons à cette couleur qui est 2 3 2 3 2 3.
Et c'est parti.
Nous voulons simplement que ce soit encore bleu.
Et c'est aussi quand je rafraîchir il commence, il est encore bleu.
J'ai de nouvelles couleurs.
Il reste aussi bleu.
D'ACCORD.
Voilà.
Maintenant, nous allons nous débarrasser de tout l'espace noir de chaque côté de notre H-1.
Donc, dans notre H-1, nous allons nous débarrasser de toute marge marginale zéro en haut et en bas à gauche et à droite.
Alors remarquez ce qui se passe quand faire cela.
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.
Et ce n'est pas en provenance de H-1 ou qui vient en fait du corps.
Donc, pour fixer que nous pouvons aller au corps et lui donner marge zéro.
Et maintenant, prêter attention à ce petit trou que je vais rafraîchir et qui disparaît.
Donc, notre bande blanche va tout le chemin vers le côté comme il le fait dans cette version ici.
D'ACCORD.
Ensuite nous allons nous concentrer sur le plaisir.
Donc, le plaisir va être le même pour tous nos éléments.
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.
Et nous allons utiliser une seule des polices construites dans le système de vantards qui s'appelle Avenir.
Donc ça va être la famille de polices Avenir.
C'est une police qui peut ne pas fonctionner sur tous les systèmes là-bas.
Donc, nous allons ajouter dans une autre option qui est Mont. Serat juste comme ça.
Donc nous nous retrouvons avec ce plaisir ici qui évidemment ne semble pas exactement la même chose.
Et cela se résume à notre poids de police.
Donc nous devons changer le poids de cette police, car c'est un H1.
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.
Ce que nous voulons faire, c'est lui donner du poids normal.
Donc, lorsque notre H-1 peut ajouter normal poids normale et enregistrer.
Rafraîchir.
C'est plus proche.
Maintenant il ya quelques autres choses que nous devons changer.
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.
Nous allons passer dans notre équipe et nous allons rééditer un peu le vieux.
Et c'est la première façon que nous allons faire ce travail.
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.
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.
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.
Maintenant, nous devons nous concentrer sur la réalisation de la portée beaucoup plus grande.
Donc, cette bande a une idée de l'affichage couleur.
Donc nous allons passer à R C S S et sélectionnez l'affichage couleur comme ça.
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.
Et si nous rafraîchissons nous obtenons maintenant cette taille de police beaucoup plus grande.
Et nous nous rapprochons.
Nous avons nos pauses ici.
Vous remarquez cependant que nous avons beaucoup plus d'espace entre les lignes que nous faisons ici.
Il y a donc quelques choses que nous pouvons faire pour y remédier.
Le premier est de changer la hauteur de la ligne.
Donc, nous allons lui donner une hauteur de ligne de 1,1 et enregistrer.
Et nous allons regarder notre version à nouveau et rafraîchir et vous pouvez voir que se rétrécit un peu.
Mais maintenant nous avons perdu l'espace sur le haut et le bas.
Il nous faut un peu d'espace.
Donc, ce que nous allons faire est d'aller dans et ajouter un peu de rembourrage.
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.
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.
Donc, notre en-tête semble bien.
Nous avons la bonne police la bonne façon de la police c'est tout en majuscules la couleur d'arrière-plan correcte.
Faisons en sorte que je joue reste correcte semble tout bon.
La prochaine chose que nous devrions aborder sont les boutons sur cette barre de navigation.
Nous avons donc certainement beaucoup de chemin à parcourir pour les améliorer.
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.
Nous voulons aussi nous débarrasser de la couleur de fond.
Il ne devrait donc pas y avoir d'arrière-plan comme vous pouvez le voir ici.
C'est juste attendre jusqu'à ce que nous planifions ou jusqu'à ce que nous en choisissions un.
Aussi, nous voulons nous assurer que la famille de polices est la même que cette police ici.
Alors, commençons.
Et je vais sélectionner tous les boutons de sorte que le bouton et nous allons simplement dire frontière aucune et sauver.
Faites attention aux boutons quand je rafraîchis.
D'ACCORD.
Nous n'avons donc pas de frontière.
Mais nous avons toujours cette couleur de fond.
Donc, maintenant que le même fond aucun et sauver et rafraîchir et nous nous rapprochons.
Donc, maintenant, nous avons tout simplement du texte.
Et nous allons commencer par faire tout ce texte en majuscules comme nous avons ici.
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.
Maintenant, nos boutons sont tous en majuscules.
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.
À l'heure actuelle, il ne prend qu'une partie de l'espace, donc nous pouvons le faire en fixant la hauteur à 100 pour cent.
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.
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.
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.
Donc poids de la police fera sept cents et puis la couleur sera également encore bleu.
Et nous allons vérifier que rafraîchir.
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.
Il ya un changement vraiment mineur que nous pouvons faire qui est de changer l'espacement des lettres pour être un pixel.
Et si vous faites attention lorsque je rafraîchir vous pouvez voir les choses espacées juste un peu entre chaque lettre.
Leslie nous concentrons sur la taille de la police.
Ils semblent un peu trop petits.
Donc, nous allons simplement utiliser la taille de la police et le définir pour être hérité.
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.
Alors jetez un oeil maintenant.
Une des grandes différences est qu'ils sont actuellement espacés différemment.
Dès que la page est chargée, nous avons l'espace ici sur notre version.
Cependant, nous n'avons pas cet espace avant de cliquer sur un bouton.
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.
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.
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.
Nous avons maintenant cette portée même si elle n'a rien en elle qui occupe 20 pour cent de cet écran.
Donc, cela pousse ces éléments vers le côté qui est exactement ce que nous voulons.
Jetons un coup d'oeil et les comparer.
D'accord, ça semble assez proche.
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.
Donc, cela va être en baisse dans notre bouton et nous allons ajouter l'effet hover d'abord.
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.
Nous inversons donc les couleurs et nous allons économiser et actualiser.
Maintenant que je flotte, vous pouvez voir que j'obtiens cet effet.
Parfait.
Et notre classe choisie que nous avons va regarder exactement la même chose.
Juste aller à copier les styles.
Il n'y a pas de différence lorsque nous sommes survoler quelque chose ou quand il est sélectionné.
Ils devraient avoir la même apparence.
Donc, vous pouvez voir que cela semble correct et je planer et seulement pendant que je flotte.
Fait-il obtenir ce fond bleu et la couleur de texte blanche.
Et quand je bouge, il s'en va.
Il y a une légère différence.
Si je flotte au-dessus des boutons de solution remarquez qu'il se fanent dans cette couleur.
Ce n'est pas seulement un instant d'activation de ma version.
Il bascule juste instantanément.
Nous pouvons corriger cela à l'aide d'une propriété de transition C Ss à l'intérieur du sélecteur de bouton.
Nous allons écrire la transition et la transmettre.
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.
Je vais donc l'exagérer d'abord avec deux secondes.
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.
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.
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.
Et je flotte.
Oh, ça ne fonctionne toujours pas.
Je manque mon s ici 2.00 s.
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.
Donc, deux secondes est certainement trop long.
Je pense que je vise pour le point trois secondes.
Examinons cela.
Voilà.
Ça me semble plutôt bien.
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.
Donc, j'ai les documents médians ouverts si vous voulez jeter un oeil.
C'est une bonne lecture.
Mais ils vous montrent quelques exemples sur les différentes choses que vous pouvez faire à bord d'un rayon.
Donc, ce que nous allons faire est de lui donner un rayon frontière légère et ce sont des carrés ici.
Et jetons un coup d'oeil à ce que nous visons.
Ce sont donc ce que nous voulons obtenir.
C'était donc une légère courbe légère.
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.
Nous obtenons des cercles et vous pourriez préférer utiliser des cercles.
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.
Et nous allons simplement vérifier et comparer ceux.
OK pour que l'air bien.
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.
Nous obtenons des angles très légèrement arrondis.
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.
Remarquez que lorsque la couleur change, elle disparaît comme l'effet de survol.
Pour ce faire, nous devons également utiliser la propriété de transition, mais d'une manière légèrement différente.
Donc, je vais aller au carré et la seule chose que nous voulons faire la transition est la couleur de fond ou de fond.
Et encore une fois, faisons un long temps comme 2,0 secondes et voir comment cela ressemble.
Alors je vais rafraîchir et je vais cliquer sur un de ces.
Vous pouvez voir qu'il faut deux secondes entières pour fondu.
Donc nous ne voulons pas que quelque chose dure aussi longtemps.
Probablement aller à zéro point six peut-être.
Essayons ça.
D'ACCORD.
Cela semble raisonnable.
Donc vous pouvez voir chaque fois que ce fond change, il prend 0,6 secondes.
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.
Nous ne ciblons que le contexte et les changements.
Cela devrait prendre 0,6 secondes.
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.
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.
Donc, le premier est le Web Kit Dasch transition et nous allons simplement ajouter la même valeur exacte ici juste comme ça.
Et puis nous avons besoin d'un autre qui est ce devrait être un tiret Moz M. Ozy.
Ce sont donc des préfixes de navigateur.
Donc Web Kit est pour le Kit Web qui est un moteur que les navigateurs utilisent comme Safari.
Et puis nous avons Moz et Mozy qui est une forme courte est Zilah qui est ce sur quoi Firefox est construit.
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.
Alors nous rafraîchissons.
Rien ne doit sembler différent.
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.
Une dernière chose que nous pouvons fixer ici est le peu d'espacement entre la bande et le début de notre grille.
Donc vous pouvez voir que nous avons un peu plus d'espace ici que nous n'avons pas ici.
Et maintenant, si nous inspectons, nous avons un élément qui est autour de notre grille.
Nous avons nos carrés et nous avons un conteneur div ID et ce conteneur div va autour de tous les 6 carrés.
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.
Donc je pense que nous l'avons déjà appelé un peu.
Et c'est parti.
Nous avons donc dit que la marge est nulle.
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é.
Donc, nous voulons que l'auto à gauche et à droite, mais 20 pixels sur le haut d'actualiser.
Nous avons notre espacement.
OK, nous avons terminé avec le style pour l'instant.