Sebbene le tendenze del design varino ogni anno, puoi contare sull'uso di effetti ombra di base come box-shadow e drop-shadow per contribuire positivamente all'estetica di un sito web. Puoi usare le ombre esterne per creare effetti piacevoli e ben resi senza sembrare scadente.
Diamo uno sguardo più da vicino alla proprietà CSS drop-shadow .
Che cos'è l'ombra esterna CSS?
drop-shadow() è un effetto CSS che mostra un'ombra attorno alla forma di un oggetto specificato. Ecco la sintassi per applicare un CSS drop-shadow .
Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);
È disponibile un'ampia gamma di funzioni di filtro tra cui sfocatura() , luminosità() e ombra ( ) .
offset-x determina la distanza orizzontale e offset-y determina la distanza verticale. Nota che i valori negativi posizionano l'ombra a sinistra ( offset-x ) e sopra ( offset-y ) l'oggetto.
Gli ultimi due parametri sono facoltativi. È possibile specificare il raggio di sfocatura dell'ombra come lunghezza. Per impostazione predefinita, è impostato su 0. Non puoi avere un raggio di sfocatura negativo.
Il colore dell'ombra è specificato come . Se non hai specificato un colore, segue il valore della proprietà color .
Quando è utile l'ombreggiatura CSS?
Potresti già sapere che box-shadow fa il lavoro abbastanza bene. Quindi, potresti pensare, perché abbiamo bisogno di un'ombra esterna? Ci sono numerosi casi in cui la funzione drop-shadow() è un salvavita. Diamo un'occhiata ad alcuni di loro:
Forme non rettangolari
A differenza di un box-shadow , puoi aggiungere un'ombra esterna a forme non rettangolari. Ad esempio, abbiamo un SVG o PNG trasparente con una forma non rettangolare, ad esempio una stella. Qui, l'aggiunta di un'ombra che corrisponde all'oggetto stesso può essere completata con box-shadow o drop-shadow . Considera entrambi gli scenari:
HTML
CSS
.star-img img { display: inline-block; height: 15em; width: 25em; } .box-shadow { color: red; box-shadow: 0.60em 0.60em 0.2em; } .drop-shadow { filter: drop-shadow(0.60em 0.60em 0.2em); }
Uscita :
Quando si confrontano entrambi gli effetti, è evidente che un'ombra scatolata dà un'ombra rettangolare; inoltre non importa se l'immagine è trasparente o possiede già uno sfondo. D'altra parte, l' ombra esterna consente di creare un'ombra che si conforma alla forma dell'immagine stessa.
I fattori limitanti sono che la funzione drop-shadow() accetta tutti i parametri di tipo tranne la parola chiave inset e il parametro spread .
Elementi raggruppati
Esistono diversi casi in cui potrebbe essere necessario creare componenti sovrapponendo determinati elementi. Se stai usando box-shadow , dovrai affrontare il problema di provare a proiettare un'ombra nel modo giusto. Ecco come funziona quando si raggruppa un'immagine e un componente di testo:
HTML
Live in the moment
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.
CSS di base
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } h2 { font-size: 2rem; } p { font-size: 0.8rem; } .parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; } .image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; } .text-container { color: rgb(255, 236, 236); background-color: rgb(141 0 35); width: 30rem; padding: 3rem; align-self: flex-end; position: relative; }
Ora, applicare il box-shadow e drop-ombra per vedere la differenza.
.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5)); } .box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3); }
Produzione:
Come puoi vedere, l' ombra della scatola viene applicata su ciascun elemento individualmente mentre l' ombra esterna li raggruppa entrambi e applica l'ombra.
Elementi ritagliati
È possibile utilizzare la proprietà clip-path per ritagliare una determinata regione che determina quali parti di un'immagine o di un elemento devono essere mostrate. Il filtro ombra esterna ci consente di creare un'ombra esterna sull'elemento ritagliato applicandolo al genitore di quell'elemento:
HTML
CSS
.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); } .clipped-element { width: 50em; height: 50em; margin: 0 auto; background-image: url(smiling-girl.jpg); clip-path: circle(50%); background-size: cover; background-repeat: no-repeat; }
Produzione:
Abbiamo ritagliato il 50% dell'immagine con un percorso circolare. Pertanto, il filtro dell'ombra esterna viene applicato solo alla parte visibile dell'immagine. Non è fantastico?
Limitazioni e differenze
Come abbiamo discusso sopra, drop-shadow non supporta il parametro di diffusione . Ciò significa che non sarebbe possibile creare un effetto contorno utilizzando la funzione drop-shadow() perché viene ucciso ovunque. Inoltre, esegue il rendering di effetti ombra diversi da box-shadow e text-shadow (con gli stessi parametri). Potresti pensare che le differenze tra box-shadow e drop-shadow si riducano al CSS Box Model . Uno lo segue mentre l'altro no. Ecco un esempio:
HTML
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
CSS di base
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .parent-container { width: 72rem; } p { font-size: 3em; font-style: bold; }
Applicazione di effetti ombra
.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); } .box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; } .text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }
Produzione:
Si può vedere che il box-shadow dà un più pesante, l'ombra più scura della text-shadow e drop-ombra . Inoltre, c'è una leggera differenza nel posizionamento dell'ombra tra text-shadow e drop-shadow . Tuttavia, potresti preferire diversi effetti d'ombra in base alle tue esigenze.
Supporto browser
La funzione drop-shadow() è supportata in tutti i browser moderni ad eccezione dei browser più vecchi come Internet Explorer. Sebbene non sia qualcosa che ostacolerebbe seriamente l'esperienza utente, puoi aggiungere una query di funzionalità con un fallback box-shadow .
Sperimenta con diversi effetti ombra
La popolarità di box-shadow è abbastanza ovvia a causa della moltitudine di casi d'uso. Tuttavia, la funzione drop-shadow() è molto sottoutilizzata. Ci auguriamo che sperimenterai diversi effetti ombra e proverai a implementare l' ombra esterna nei tuoi progetti futuri.
Le pseudo-classi aggiungono una gamma completamente nuova di funzionalità ai CSS e al tuo repertorio di sviluppo web personale. Scopri di più su di loro per diventare uno sviluppatore web più competente ed efficiente.