CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Créer des Effets CSS au Survol de la Souris

Créer des Effets CSS au Survol de la Souris

Une interaction au survol d'une image
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

Introduction aux Effets CSS

Objectifs

Les objectifs de cette vidéo sont de :

- Apprendre à créer des effets CSS au survol de la souris
- Utiliser des classes CSS pour une meilleure modularité du code
- Appliquer des transformations et des ombres avec CSS
- Optimiser les animations pour une meilleure expérience utilisateur.

Résumé

Découvrez comment utiliser le CSS pour créer des effets attrayants sur vos images lors du survol de la souris.

Description

Dans cette leçon, nous vous montrons comment créer des effets CSS au survol de la souris sur des images pour améliorer l'interactivité et l'apparence de votre site web. Nous allons passer par plusieurs étapes, y compris le positionnement des éléments dans le HTML, l'application de styles de base avec CSS, et l'ajout d'animation pour une meilleure expérience utilisateur. Nous discuterons également des meilleures pratiques pour ces effets afin de garantir qu'ils fonctionnent bien sur différents appareils, notamment les mobiles où le hover n'est pas disponible.

Nous allons également utiliser des classes CSS spécifiques pour rendre notre code plus modulaire et réutilisable. Vous apprendrez à appliquer des effets de transformation et d'ombre, et à améliorer l'effet visuel avec des transitions souples. Enfin, nous verrons comment optimiser les animations pour qu'elles ne ralentissent pas la navigation et améliorent l'expérience utilisateur globale.

Voir plus

Questions - réponses

Pourquoi est-il important de penser à l'expérience mobile lors de la création d'effets CSS au survol ?
L'expérience mobile ne supporte pas le hover, ce qui oblige l'utilisateur à toucher l'élément pour voir l'effet, il est donc crucial de ne pas masquer des informations essentielles.
Qu'est-ce que la propriété 'flex-direction' fait dans un modèle Flexbox ?
La propriété 'flex-direction' permet de définir l'axe principal sur lequel les éléments doivent être alignés, que ce soit en ligne (row) ou en colonne (column).
Comment peut-on centrer des éléments à l'intérieur d'un conteneur en utilisant Flexbox ?
En utilisant 'align-items: center' et 'justify-content: center', on peut centrer les éléments horizontalement et verticalement dans un conteneur Flexbox.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 6 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 4 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !