CSS : la Fonction Calc
CSS : la Fonction Calc
Dans ce cours en ligne, je vous propose d'apprendre à animer les bordures de vos liens grâce à la magie du CSS.
Nous allons mettre en place par défaut, des bordures de 10px de large en haut à gauche et en bas à droite de chaque lien.
L'idée sera que lorsque le pointer de la souris vient sur le lien, alors les bordures se referment de manière harmonieuse tout autour du lien.
L'objet ici étant d'augmenter l'expérience utilisateur en lui proposant les liens agréables à l'œil.
Pour ce faire nous allons devoir mobiliser un certain nombre de connaissances en langage CSS.
En cas de besoin, vous pouvez réviser ses connaissances en vous rendant sur les tutos suivants:
Ce tutoriel fait partie de ma collection de tuto nommée "Collection frontend".
Je mets les codes de ce tuto à votre disposition.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Mettre en place la zone Nav
Mettre en place la zone Nav
Leçon 2
Mettre en place une bordure en haut à gauche du lien
Mettre en place une bordure en haut à gauche du lien
Leçon 3
Mettre en place une bordure en bas à droite du lien
Mettre en place une bordure en bas à droite du lien
Leçon 4
Animer la bordure autour des liens lors du passage de la souris
Animer la bordure autour des liens lors du passage de la souris
Leçon 5
Bonus
Bonus
Plan détaillé du cours
Leçon 1Mettre en place la zone Nav
06m07s
Leçon 2Mettre en place une bordure en haut à gauche du lien
09m11s
Leçon 3Mettre en place une bordure en bas à droite du lien
06m15s
Leçon 4Animer la bordure autour des liens lors du passage de la souris
05m53s
Leçon 5Bonus
02m49s
Avis des apprenants