backdrop-filter voor frosted glass
Maak wazige frosted-glass-effecten op elementen die met backdrop-filter over andere inhoud heen liggen.
backdrop-filter voor frosted glass is een gratis CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Wat is backdrop-filter?
backdrop-filter past grafische effecten toe op het gebied achter een element, in plaats van op het element zelf. Het element moet gedeeltelijk transparant zijn (een achtergrond met alpha kleiner dan 1 of geen achtergrond), zodat de gefilterde achtergrond zichtbaar wordt.
Matglaseffect
Het klassieke patroon voor matglas:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
Voorvoegsel -webkit-backdrop-filter
Safari vereist het voorvoegsel -webkit-backdrop-filter. Neem dit voor ondersteuning in verschillende webbrowsers altijd naast de standaardeigenschap op.
Beschikbare filterfuncties
backdrop-filter ondersteunt dezelfde functies als filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Donker matglas
Een donkere variant voor overlays en modale vensters:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Vereiste voor stapelcontext
backdrop-filter maakt een stapelcontext. Het element moet boven op de achtergrondlaag worden samengesteld — dit betekent dat het boven andere inhoud in de stapelvolgorde moet staan, niet noodzakelijk vanwege z-index, maar vanwege de tekenvolgorde.
Prestaties van backdrop-filter
Zware backdrop-filter: blur() is duur — de webbrowser moet de achtergrond in een afzonderlijke doorgang renderen. Gebruik voor goede mobiele prestaties vervagingswaarden van maximaal 20px. Vermijd dit bij inhoud die vaak opnieuw wordt getekend.
Modaalvenster met matte laag
Een modaal dialoogvenster met een laag van matglas:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Vastgezette navigatie met glas
Een navigatiebalk van matglas die blijft vaststaan:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Ondersteuning door webbrowsers
backdrop-filter wordt ondersteund in Chrome 76+, Firefox 103+ en Safari 9+ (webkit). Neem altijd het voorvoegsel -webkit- op. Controleer caniuse.com voor actuele gegevens en bied een ondoorzichtige terugvaloptie voor niet-ondersteunde webbrowsers.
Ondoorzichtige terugvaloptie
Bied een ondoorzichtige achtergrond als terugvaloptie voor webbrowsers die backdrop-filter niet ondersteunen:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Korte controle
Wat moet een element hebben om backdrop-filter zichtbaar te maken?
Samenvatting
backdrop-filter past filtereffecten toe op wat er achter een element zit. Het element heeft transparantie nodig om het effect zichtbaar te maken. Voor het klassieke matglas gebruik je blur() + saturate(). Neem altijd -webkit-backdrop-filter op voor Safari. Bied met @supports een ondoorzichtige terugvaloptie.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “backdrop-filter voor frosted glass” gratis?
Ja — de volledige tekst van “backdrop-filter voor frosted glass” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “backdrop-filter voor frosted glass”?
Maak wazige frosted-glass-effecten op elementen die met backdrop-filter over andere inhoud heen liggen. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “backdrop-filter voor frosted glass”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- filter: blur brightness contrast grayscale
- backdrop-filter voor frosted glass
- mix-blend-mode voor het mengen van lagen
- De eigenschap isolation