backdrop-filter per l'effetto vetro smerigliato
Crei effetti di sfocatura vetro smerigliato sugli elementi sovrapposti ad altri contenuti usando backdrop-filter.
backdrop-filter per l'effetto vetro smerigliato è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è backdrop-filter?
backdrop-filter applica effetti grafici all'area dietro un elemento, anziché all'elemento stesso. L'elemento deve avere una certa trasparenza (uno sfondo con alfa inferiore a 1 o nessuno sfondo) per mostrare lo sfondo filtrato.
Effetto vetro smerigliato
Il classico effetto vetro smerigliato:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
Prefisso -webkit-backdrop-filter
Safari richiede il prefisso -webkit-backdrop-filter. Lo includa sempre insieme alla proprietà standard per garantire il supporto tra browser diversi.
Funzioni di filtro disponibili
backdrop-filter supporta le stesse funzioni di filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Vetro smerigliato scuro
Una variante scura per sovrapposizioni e finestre modali:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Requisito del contesto di impilamento
backdrop-filter crea un contesto di impilamento. L'elemento deve essere composto sopra lo sfondo retrostante; ciò significa che deve trovarsi sopra gli altri contenuti nell'ordine di impilamento, non necessariamente tramite z-index, ma secondo l'ordine di disegno.
Prestazioni di backdrop-filter
Un backdrop-filter: blur() intenso è costoso: obbliga il browser a disegnare lo sfondo in un passaggio separato. Per le prestazioni sui dispositivi mobili, utilizzi valori di sfocatura pari o inferiori a 20px. Eviti di applicarlo a contenuti che vengono ridisegnati frequentemente.
Finestra modale con sovrapposizione in vetro smerigliato
Una finestra di dialogo modale con sovrapposizione in vetro smerigliato:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Navigazione adesiva in vetro
Una barra di navigazione adesiva in vetro smerigliato:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Supporto dei browser
backdrop-filter è supportato in Chrome 76+, Firefox 103+ e Safari 9+ (webkit). Includa sempre il prefisso -webkit-. Consulti caniuse.com per i dati aggiornati e fornisca un fallback opaco per i browser non supportati.
Fallback opaco
Fornisca uno sfondo opaco come fallback per i browser che non supportano backdrop-filter:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Verifica rapida
Che cosa deve avere un elemento affinché backdrop-filter sia visibile?
Riepilogo
backdrop-filter applica effetti di filtro a ciò che si trova dietro un elemento. L'elemento deve essere trasparente affinché l'effetto possa essere visibile. Il classico effetto vetro smerigliato utilizza blur() + saturate(). Includa sempre -webkit-backdrop-filter per Safari. Fornisca un fallback opaco utilizzando @supports.
Impara CSS con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «backdrop-filter per l'effetto vetro smerigliato» è gratuita?
Sì — il testo completo di «backdrop-filter per l'effetto vetro smerigliato» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «backdrop-filter per l'effetto vetro smerigliato»?
Crei effetti di sfocatura vetro smerigliato sugli elementi sovrapposti ad altri contenuti usando backdrop-filter. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «backdrop-filter per l'effetto vetro smerigliato»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- filter: blur, brightness, contrast, grayscale
- backdrop-filter per l'effetto vetro smerigliato
- mix-blend-mode per la fusione dei livelli
- Proprietà isolation