labo. 01 - exercice 01

Lien animé #1

L'objectif est de faire un effet de survol qui fait apparaitre une ligne sous le lien.

HTML

La structure HTML est déjà fournie. Veuillez prendre le temps de regarder et d'analyser le fichier partials/_ex01.html

État de survol

Avant d'aller trop loin dans l'effet de survol à créer. Nous allons le faire sans utiliser la pseudo-classe :hover. Ça nous permettra de voir ce qui se passe sans avoir à passer la souris par dessus. Une fois qu'on sera satisfait on l'ajoutera à la pseudo-classe de notre lien.

Un retour sur les pseudo-éléments sera nécessaire pour bien réussir ce numéro.

À lire : Comprendre les pseudo-element

Pour l'effet de survol de ce numéro, nous allons créer l'effet d'une ligne sous le lien avec la classe .link-item--underline. Il faudra ensuite travailler avec CE sélecteur en CSS. Dans les prochaines étapes, lorsqu'il sera question de LIGNE, on fera référence au pseudo-élément sur lequel vous travaillez qui représente une ligne.

Ajouter un pseudo-élément ::after en utilisant la concaténation SCSS
Appliquer la couleur primaire. Attention, le pseudo ne contient pas de texte.. alors possiblement que ce n'est pas color>?
Ajouter la propriété essentielle pour qu'un pseudo-élément fonctionne
Ajouter une hauteur de 4px
Ajouter une largeur de 100%

La ligne ne devrait pas apparaître pour le moment.
Inspectez la donc pour voir sa taille!

Mettez-lui display block afin que les propriétés width/height soient tenus en compte (impossible car c'était inline).

La ligne prend maintenant toute l'espace de l'élément. C'est normal, il faut maintenant s'assurer de la positionner sous le texte.

Nous allons maintenant mettre la ligne en bas

Ajouter le bon type de position à votre ::after afin qu'il se place dans le bas à 0 et à gauche à 0
Assurez-vous que le point de référence de votre positionnement absolu soit .link-item--underline.
Finalement, sur votre bouton, ajouter du padding dans le bas de 4px afin de distancer la ligne du texte.

État caché

Nous avons créé l'état de survol sans utiliser la pseudo-classe :hover, soit visible en tout temps pour le moment. Cachons maintenant le trait pour ne le faire apparaitre lors du survol. Afin de réaliser cet effet, nous allons descendre encore le trait encore plus bas.

Translation vers le bas

Ajouter une transformation qui permet de déplacer sur l'axe des Y de 100%. La ligne devrait descendre mais rester visible.

Lire sur la propriété transform

Il faut cacher la ligne. Vous pouvez utiliser la boite de votre .link-item--underline comme masque.

Mettre overflow: hidden; qui cachera tout ce qui sort à l'extérieur de la boite.
Ajouter aussi le bon type d'affichage (display) pour pouvoir profiter du modèle de boite qu'un élément inline ne permet pas, mais tout en conservant les avantages du inline.

Effet survol

Avant de jouer avec le pseudo élément, trouvez comment cacher le trait qui apparaît au survol sur CE lien spécifiquement.
Ajouter sur le hover la transformation inverse pour faire apparaitre la ligne lors du survol.

Finalement, parce qu'un effet sec (sans transition) est extrêmement drabe...

Ajouter une transition de .3s avec un ease-out seulement sur le transform.