Share
Dans cette vidéo de mon cours d’animation pratique sur le Web, vous apprendrez à créer un simple effet de survol à l’aide de CSS. Nous allons rendre nos boutons de navigation plus intéressants en animant l’arrière-plan et les couleurs du texte au survol. Vous apprendrez également quelques astuces CSS pour centrer correctement un menu sur la page..
La première chose à faire est de créer votre propre version du stylo de départ sur CodePen, qui contient tout le code dont vous avez besoin pour commencer..
Donc, une fois que vous ouvrez cela, allez-y et cliquez sur le Fourchette bouton pour en créer une nouvelle copie et vous pourrez alors commencer à modifier votre nouvelle copie..
Tout d'abord, je veux réduire l'espace entre les boutons. Vous pouvez le faire en définissant marge droite à une valeur de 4px. Et vous verrez qu'ils sont beaucoup plus rapprochés.
Ensuite, nous voulons centrer cette navigation sur la page. Par défaut, une liste non ordonnée est un élément de niveau bloc et le moyen le plus simple de centrer un élément de niveau bloc consiste à marge: 0 auto;.
Notre liste non ordonnée a une classe de .main-nav, alors allez dans cette règle et ajoutez marge: 0 auto;.
Au début, cela ne fonctionnera pas car, puisqu'il s'agit d'un élément de niveau bloc, il occupe par défaut toute la largeur du navigateur ou de son conteneur..
Donc, afin de le centrer, nous devons d'abord lui donner une largeur. Et je veux que sa largeur soit déterminée par le nombre d'éléments dans le menu et la quantité d'espace occupée par ces éléments..
Nous avons cinq boutons, chacun avec une largeur de 140 px. Et puis nous avons une marge droite sur chacun de ces éléments de liste de 4 px. Donc, la largeur totale est de 5 x 140 = 700, plus l'espacement entre eux, qui est de 4 x 4 = 16. Donc, notre largeur totale de cette liste non ordonnée est de 716 px..
Mais si on ajoute largeur: 716px; dans le .main-nav classe, ça ne marche pas. Vous verrez que cela centre les choses, mais le bouton "NOUS CONTACTER" a été déplacé à la ligne suivante..
En effet, le bouton "CONTACTEZ-NOUS" a également une marge droite de 4 px. C'est donc cette cinquième marge à droite qui le rend plus large que 716 px.
Nous pourrions résoudre ce problème en réglant notre largeur sur 720, mais ce n’est pas parfaitement centré car nous avons quatre pixels supplémentaires de marge à droite. Donc, une meilleure option consiste simplement à supprimer la marge droite pour le dernier élément de la liste..
Nous pouvons le faire en créant une nouvelle règle:
.main-nav li: dernier-enfant marge-droite: 0;
Lorsque nous faisons cela, tout fonctionne correctement et nous pouvons redescendre à 716 px pour la largeur, et nous voyons que notre bouton "CONTACTEZ-NOUS" ne se décompose pas à la ligne suivante..
Une dernière chose à faire est d’espacer un peu le menu afin qu’il ne soit pas si proche du haut de la fenêtre du navigateur. Donc au lieu de marge: 0 auto;, nous pourrions faire marge: auto 20px. Cela lui donnera une marge de 20 pixels en haut et en bas. Et puis le auto, évidemment, le centrer horizontalement.
Alors maintenant, créons notre effet de survol. À l'heure actuelle, notre étiquette d'ancrage n'a pas de couleur d'arrière-plan. Alors prenons la couleur d’arrière-plan de l’élément de la liste, coupons-la, puis déplacez-la vers notre balise d’ancrage. Alors maintenant, nos balises d'ancrage ont cette couleur d'arrière-plan.
Ensuite, nous allons créer une nouvelle règle pour l'effet de survol pour ces balises d'ancrage:
.navigation principale: survol background-color: # 349;
Maintenant, lorsque nous survolons les boutons, l'arrière-plan disparaît.
Afin de rendre cela un peu plus accrocheur, nous allons ajouter une atténuation subtile. Lorsque nous allons atténuer un élément, nous devons d’abord déterminer la règle à laquelle appliquer cette propriété de transition. Nous n'allons pas l'appliquer à la règle de vol stationnaire; nous allons l'appliquer à la règle d'origine pour la balise d'ancrage à l'intérieur de ce nav principal.
Donc, pour cette règle originale, nous allons ajouter transition: tous .5s;. Cela signifie que toute propriété que nous décidons d'animer ira de l'avant et animera, et cela durera une demi-seconde. Alors maintenant, lorsque nous survolons chacun de ces boutons, nous obtenons un fondu discret agréable.
Modifions cela un peu pour que nous puissions effacer deux choses différentes en même temps. Sauvegardons donc notre travail dans CodePen puis passons à une nouvelle version.
Ensuite, enlevez la couleur de fond et placez une bordure autour des boutons. Donc, pour notre règle de balise d'ancrage d'origine, nous allons nous débarrasser de notre couleur d'arrière-plan et nous aurons plutôt une bordure. Alors ajoutez bordure: 1px blanc solide;.
Vous remarquerez que tout se brise à nouveau et que le bouton "CONTACTEZ-NOUS" passe à la ligne suivante..
En effet, chaque fois que vous ajoutez une bordure à un élément ayant déjà une largeur définie, cette bordure l’agrandit. Donc, notre largeur est fixée à 140 px, mais nous avons alors un pixel de bordure à gauche et un pixel de bordure à droite, faisant toute la largeur de 142 px..
C'est le comportement par défaut, mais il existe une propriété appelée taille de la boîte cela nous permet de changer ce comportement par défaut. Si on change taille de la boîte à boîte à bordure, alors la largeur finale de notre article sera ce que nous définissons pour cela. Donc, si nous définissons une largeur de 140 px et que nous y ajoutons des bordures, ces bordures apparaîtront à l'intérieur l'élément, et la largeur finale de l'élément sera toujours 140 px.
Vous pouvez donc monter en haut et ajouter une nouvelle ligne:
* box-sizing: border-box;
Et quand nous faisons cela, vous verrez que cela se corrige automatiquement.
Maintenant, lorsque nous survolons ces balises d'ancrage, je souhaite que la couleur de fond devienne blanche et que le texte devienne bleu..
Donc, au lieu de définir la couleur d’arrière-plan sur la couleur de l’arrière-plan de notre corps, nous allons la définir sur une valeur de blanc (#fff). Alors maintenant, lorsque nous survolons un bouton, la couleur de fond passe au blanc. Et maintenant, nous voulons juste changer la couleur du texte en # 349, qui est le même bleu que notre fond.
Alors maintenant, lorsque nous survolons ceux-ci, il s'invertit tout seul. Le texte, qui était blanc, est maintenant le même bleu que l'arrière-plan. Et le fond, qui était bleu, a changé en blanc.
Dans le cours complet, Practical Web Animation, je vais vous montrer des moyens pratiques de créer des animations pour des boutons, des tableaux de tarification et d'autres éléments Web, en utilisant CSS et jQuery concis pour le faire..
Vous pouvez suivre ce cours immédiatement avec un abonnement à Envato Elements. Pour un seul forfait mensuel, vous aurez accès non seulement à ce cours, mais également à notre bibliothèque croissante de plus de 1 000 cours vidéo et de livres numériques de premier plan sur l'industrie sur Envato Tuts.+.
De plus, vous obtenez maintenant des téléchargements illimités à partir de la vaste bibliothèque Envato Elements de plus de 300 000 ressources créatives. Créez avec des polices, des photos, des graphiques et des modèles uniques et livrez plus rapidement de meilleurs projets.
Accentsconagua