fbpx

Conosciamo Drop-shadow, il filtro Css meno utilizzato nel web

Conosciamo Drop-shadow, il filtro Css meno utilizzato nel web

Il Drop-shadow è uno dei filtri Css meno utilizzati perchè non si conosce bene la sottile differenza rispetto al suo filtro gemello che è il Box-shadow. Come quest’ultimo, accetta i valori di “x-offset” e “y-offset”, contorno sfumato e colore. Il filtro “drop-shadow” è effettivamente una versione sfumata in offset dell’input della maschera alfa dell’immagine, disegnata con uno specifico colore e in modo omogeneo. Ma qual è la vera differenza tra i due filtri? La proprietà “box-shadow” crea un’ombra di forma rettangolare dietro il box dell’elemento, mentre il filtro “drop-shadow” crea un’ombra che è conforme alla forma (canale alfa) dell’immagine stessa.
Ecco la sintassi:

[drop-shadow(offset-x offset-y blur-radius color)]

Ma perchè e quando va utilizzato il filtro “drop-shadow”? Quest’ultimo ci permette di aggiungere un’ombra ad un elemento che non corrisponde al suo contenitore, ma che usa la maschera alfa dell’elemento. Possiamo quindi aggiungere un drop-shadow ad un immagine png trasparente o un logo svg per esempio.

Inoltre il filtro drop-shadow può essere applicato sia se l’immagine è inline nell’Html sia all’immagine inserita nel Css. Quindi vuol dire che possiamo aggiungere un’ombra ad un immagine realizzata con sfondo gradiente.

#1 – Elementi tagliati

Se tagliamo o mascheriamo un elemento con il “clip-path” o “mask-image,” qualsiasi box-shadow che aggiungiamo sarà tagliata, per cui sarà invisibile se è fuori della maschera di ritaglio. In tal caso il filtro “drop-shadow” è molto utile perchè aggiunge l’ombra sull’elemento figlio.

#2 – Elememti Raggruppati

Ma cosa succede se vogliamo applicare il filtro a più elementi? Succede qualcosa di strano con uno strano spazio bianco visibile. Se aggiungiamo un box-shadow a ciascun singolo elemento, ognuno avrà la propria ombra, e potrebbe generare un effetto non gradevole alla vista. In tal caso dobbiamo inserire del Css per nascondere l’ombra dove gli elementi si sovrappongono. Se invece usiamo il drop-shadow all’intero componente, abbiamo l’ombra esattamente dove la vogliamo senza essere costretti a tagliare qualcosa.

#3 – Drop Shadow Multipli

È possibile usare drop-shadow multipli per ottenere alcuni effetti speciali, come quello seguente:

Il filtro drop-shadow non da come risultato la stessa ombra che offre il box-shadow, anche se inseriamo gli stessi parametri poichè tende a restituire un’ombra più scura e pesante anche se utilizziamo gli stessi valori.

Supporto dei browser

I filtri CSS (incluso drop-shadow) sono supportati in tutti i moderni browsers. Io tendo ad usarli come un progressivo miglioramento, senza il bisogno di lavorare per i vecchi browsers ma se ti interessa aggiornarli anche per i vecchi browser devi usare il seguente codice di fallback:
Nonostante abbia un supporto eccellente, il filtro drop-shadow è poco utilizzato mentre invece avete scoperto che in diverse soluzioni come nella 1, 2 e 3 elencati sopra si tratta di un filtro particolarmente utile. Spero che dopo aver letto questo articolo possiate utilizzarlo per i vostri progetti.

Fonte: Michelle Barker

— SCARICA LA RISORSA “Drop Shadow vs Box Shadow” —

Per piacere seguici e metti mi piace:
Nessun Commento

Sorry, the comment form is closed at this time.

Social media & sharing icons powered by UltimatelySocial