Accueil Formations Apprendre CSS 3

Apprendre à masquer des éléments HTML avec CSS

Retour à la formation
Chapitre 26 Leçon 1
Précédent
Suivant

Apprenez à utiliser la propriété visibility en CSS pour masquer des éléments HTML sans perturber le flux de la page.

Détails de la leçon

Description de la leçon

Cette leçon vous guidera à travers les principes fondamentaux de l'affichage des éléments HTML en utilisant les propriétés bloc et inline. Nous explorerons une méthode pour masquer un élément tout en maintenant son espace réservé dans le flux de la page, en utilisant la propriété CSS visibility. Vous apprendrez les différentes valeurs disponibles pour cette propriété (visible et hidden) et comment les appliquer pour obtenir des effets de transition et de fondu.

Par exemple, vous verrez comment cibler un article spécifique en utilisant son ID, puis appliquer visibility: hidden pour le masquer temporairement sans altérer la mise en page globale du document HTML. Cette technique peut être particulièrement utile pour des effets visuels dynamiques dans des applications web.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :
1. Apprendre à utiliser la propriété visibility en CSS.
2. Comprendre la différence entre les éléments blocs et inline.
3. Savoir appliquer des transitions de visibilité dans des projets web.

Prérequis pour cette leçon

Avant de suivre cette leçon, il est recommandé de :
1. Avoir une connaissance de base en HTML et CSS.
2. Comprendre les concepts de base des propriétés CSS.

Métiers concernés

Ces compétences sont particulièrement utiles pour les développeurs front-end, les web designers et tous les professionnels impliqués dans la création et la gestion de contenu web interactif et dynamique.

Alternatives et ressources

Comme alternatives à l'utilisation de visibility, vous pouvez explorer les propriétés CSS comme display: none; pour masquer complètement un élément ou opacity pour créer des effets de transparence. Des frameworks CSS comme Bootstrap et Tailwind CSS offrent également des classes utilitaires pour gérer la visibilité des éléments.

Questions & Réponses

La propriété CSS utilisée est visibility avec la valeur hidden.
Les éléments bloc occupent toute la largeur disponible et s'empilent verticalement, tandis que les éléments inline ne prennent que l'espace nécessaire à leur contenu et s'affichent côte à côte.
Pour réafficher un élément masqué, utilisez visibility: visible; dans le fichier CSS.