Se vuoi applicare effetti speciali sui tuoi siti web aziendali, questo articolo fa per te.
Oggi parliamo di CSS e in particolare della proprietà backdrop-filter.
Come sicuramente sai ci sono plugin per realizzare qualsiasi cosa, ma se vuoi applicare effetti grafici senza appesantire di un grammo il sito, ti conviene lasciar perdere i plugins e concentrarti sui CSS.
Backdrop-filter: cosa è e come si applica
Il backdrop-filter è una proprietà CSS che si può applicare a degli elementi per donare loro effetti di filtro particolari.
Questa proprietà dona l’effetto solamente allo sfondo dell’elemento e non a tutto l’elemento.
Come si applica il backdrop-filter?
Per applicare il backdrop filter bisogna dichiarare le proprietà sottostante alla classe o all’id a cui intendiamo applicare il filtro.
background-color: #FFFFFF44; backdrop-filter: blur(8px);
ad esempio:
Voglio realizzare uno sticky menu con effetto sfocatura (come il mio attuale menu).
Cerco l’id della mia top bar, in questo caso #topbar e vado a applicare le proprietà:
#topbar {
background-color: #FFFFFF44;
backdrop-filter: blur(8px) ;
}
L’effetto sarà il seguente:
In questo caso ho scelto l’effetto blur (sfocatura) quindi tutto ciò che rimane “sotto” la mia topbar sarà sfocato.
Backdrop filter: quali sono gli altri valori?
Non solo Blur, ma possiamo impostare diversi valori alla proprietà backdrop filter come luminosità, contrasto, effetto sepia, bianco e nero, opacità, saturazione.. per impostarli e regolare meglio l’effetto modifica i valori tra parentesi.
backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%)
Se ti è piaciuto il post, hai dubbi o hai bisogno di info, lasciami un commento qui sotto!
