CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Créer une Lightbox en Full CSS

Créer une Lightbox en Full CSS

La pseudo classe target
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
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à la Lightbox en CSS

Objectifs

Les objectifs de cette vidéo sont :


  • Apprendre à créer une lightbox en full CSS.
  • Comprendre l'utilisation des pseudo-classes et pseudo-éléments CSS.
  • Optimiser les interactions utilisateurs en CSS.

Résumé

Découvrez comment créer une lightbox en full CSS sans avoir besoin de JavaScript. Cette vidéo vous guide pas à pas.

Description

Dans cette leçon, nous allons apprendre à réaliser une lightbox en full CSS. Cela signifie que nous n'utiliserons pas du tout de JavaScript pour créer ce type de comportement spécifique. Vous verrez comment, en utilisant des pseudo-éléments et des pseudo-classes, il est possible de réaliser des interactions complexes uniquement avec du CSS. Nous commencerons par préparer notre page HTML avec les différents éléments nécessaires, puis nous passerons au CSS pour styliser et positionner les images ainsi que gérer les interactions utilisateurs.

Nous utiliserons des propriétés de positionnement comme position fixe pour nous assurer que la lightbox reste en place même si l'utilisateur scrolle sur la page. Vous apprendrez également à utiliser des transitions pour rendre ce comportement plus fluide et agréable pour l'utilisateur.

Cette vidéo est une excellente introduction aux techniques avancées de CSS, et vous permettra de mieux comprendre comment utiliser le CSS pour des interactions dynamiques sans recourir à JavaScript.

Voir plus

Questions fréquentes

Pourquoi utiliser la propriété 'position fixe' pour la lightbox ?
La propriété 'position fixe' maintient la lightbox à un emplacement spécifique sur l'écran, même lorsqu'on fait défiler la page, garantissant ainsi que la lightbox reste visible.
Quelle pseudo-classe est utilisée pour déclencher l'apparition de la lightbox ?
La pseudo-classe ':target' est utilisée pour déclencher l'apparition de la lightbox lorsque l'on clique sur un lien qui cible son identifiant.
Comment rendre la fermeture de la lightbox possible en cliquant en dehors de l'image ?
En utilisant un pseudo-élément :after sur la lightbox qui couvre toute la zone de visualisation et redirige le clic vers un identifiant inexistant, ce qui referme la lightbox.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 1 an
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 2 ans
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
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 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !