CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Effets de transition avancés en CSS pour des éléments générés

Effets de transition avancés en CSS pour des éléments générés

Un menu avec du contenu généré - 2
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Exemple de navigation avec du contenu généré en CSS

Objectifs

Les objectifs de cette vidéo sont de vous apprendre à :
- Créer et manipuler un élément généré en CSS
- Appliquer des effets de transition pour améliorer l'interactivité de la navigation
- Utiliser des propriétés comme position, top et opacity de manière efficace.

Résumé

Cette leçon explique comment créer un effet de transition pour un élément généré en CSS lorsqu'on survole une navigation.

Description

Dans cette leçon, vous apprendrez à créer un effet de transition unique pour un élément généré en CSS. Concrètement, nous allons configurer un élément généré via la pseudo-classe ::after pour qu'il apparaisse par le bas et se déplace vers le haut lorsque nous survolons un lien avec la souris. Contrairement à l'effet initial où l'élément commence avec une largeur de 0, nous définirons ici une largeur de 100% dès le départ. En utilisant des propriétés comme position: relative et top, nous décalerons l'élément de 10 pixels vers le bas dans l'état initial.

Ensuite, sur l'événement de survol de la souris, cet élément retournera à 0 pixels en transitionnant du bas vers le haut. Pour une meilleure expérience visuelle, nous masquerons initialement l'élément en utilisant opacity: 0, puis nous le rendrons visible avec opacity: 1 au survol. Cette approche permet de créer un joli effet de mouvement qui améliore l'interactivité et l'attrait visuel du site.

Voir plus

Questions - réponses

Quel est l'objectif de cette leçon?
L'objectif est d'apprendre à créer un effet de transition pour un élément généré en CSS lorsqu'on survole une navigation avec la souris.
Comment initialement masquer l'élément généré?
On peut initialement masquer l'élément généré en utilisant la propriété opacity: 0.
Quelle propriété CSS utilise-t-on pour décaler l'élément généré?
On utilise la propriété position: relative et la propriété top pour décaler l'élément généré.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 5 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !