backdrop-filter pour un effet de verre dépoli
Créez des effets de flou de verre dépoli sur des éléments superposés à d’autres contenus avec backdrop-filter.
backdrop-filter pour un effet de verre dépoli est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que backdrop-filter ?
backdrop-filter applique des effets graphiques à la zone derrière un élément, plutôt qu'à l'élément lui-même. L'élément doit être partiellement transparent (arrière-plan avec alpha inférieur à 1 ou sans arrière-plan) pour laisser apparaître l'arrière-plan filtré.
Effet de verre dépoli
Le motif classique du verre dépoli :
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
Préfixe -webkit-backdrop-filter
Safari exige le préfixe -webkit-backdrop-filter. Incluez-le toujours avec la propriété standard pour assurer la compatibilité entre les navigateurs.
Fonctions de filtre disponibles
backdrop-filter prend en charge les mêmes fonctions que filter : blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Verre dépoli sombre
Une variante sombre pour les superpositions et les boîtes de dialogue modales :
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Condition requise pour le contexte d'empilement
backdrop-filter crée un contexte d'empilement. L'élément doit être composé au-dessus de l'arrière-plan — il doit donc se trouver au-dessus des autres contenus dans l'ordre d'empilement (pas nécessairement grâce à z-index, mais selon l'ordre de peinture).
Performances de backdrop-filter
Un backdrop-filter: blur() important est coûteux — il oblige le navigateur à rendre l'arrière-plan lors d'une passe distincte. Pour de bonnes performances sur mobile, utilisez des valeurs de flou inférieures ou égales à 20 px. Évitez cet effet sur les contenus fréquemment repeints.
Boîte de dialogue modale avec superposition en verre dépoli
Une boîte de dialogue modale avec une superposition en verre dépoli :
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Navigation persistante en verre
Une barre de navigation persistante en verre dépoli :
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Prise en charge par les navigateurs
backdrop-filter est pris en charge par Chrome 76+, Firefox 103+ et Safari 9+ (webkit). Incluez toujours le préfixe -webkit-. Consultez caniuse.com pour obtenir les données actuelles et fournissez une solution de repli opaque pour les navigateurs non pris en charge.
Solution de repli opaque
Fournissez un arrière-plan opaque comme solution de repli pour les navigateurs qui ne prennent pas en charge backdrop-filter :
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Vérification rapide
Que doit avoir un élément pour que backdrop-filter soit visible ?
Récapitulatif
backdrop-filter applique des effets de filtre à ce qui se trouve derrière un élément. L'élément doit être transparent pour que l'effet soit visible. Le verre dépoli classique utilise blur() + saturate(). Incluez toujours -webkit-backdrop-filter pour Safari. Fournissez une solution de repli opaque à l'aide de @supports.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « backdrop-filter pour un effet de verre dépoli » est-elle gratuite ?
Oui — le texte complet de « backdrop-filter pour un effet de verre dépoli » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « backdrop-filter pour un effet de verre dépoli » ?
Créez des effets de flou de verre dépoli sur des éléments superposés à d’autres contenus avec backdrop-filter. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « backdrop-filter pour un effet de verre dépoli » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- filter : blur, brightness, contrast, grayscale
- backdrop-filter pour un effet de verre dépoli
- mix-blend-mode pour le mélange des calques
- Propriété isolation