Come creare un'ombra esterna con i CSS

Sebbene le tendenze del design varino ogni anno, puoi contare sull'uso di effetti ombra di base come scatola-ombra e ombra per contribuire positivamente all'estetica di un sito web. Puoi usare ombre per creare effetti piacevoli e ben resi senza risultare sdolcinati.

Diamo un'occhiata più da vicino ai CSS ombra proprietà.

Che cos'è l'ombra esterna CSS?

ombra( ) è un effetto CSS che visualizza un'ombra attorno alla forma di un oggetto specificato. Ecco la sintassi per applicare un CSS ombra.

Sintassi:
filtro: drop-shadow (offset-x offset-y sfocatura-raggio colore);

Ci sono una vasta gamma di funzioni di filtro Compreso 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 al di 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 di colore proprietà.

Quando è utile l'ombreggiatura CSS?

Potresti già saperlo scatola-ombra fa il lavoro abbastanza bene. Quindi, potresti pensare, perché abbiamo bisogno? ombra affatto? Ci sono numerosi casi in cui il ombra( ) la funzione è un salvavita. Diamo un'occhiata ad alcuni di loro:

Forme non rettangolari

A differenza di un scatola-ombra, puoi aggiungere un ombra 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 entrambi scatola-ombra o ombra. Considera entrambi gli scenari:

HTML

CSS

.star-img img {
display: blocco in linea;
altezza: 15m;
larghezza: 25 em;
}
.box-shadow {
colore rosso;
box-ombra: 0.60em 0.60em 0.2em;
}
.drop-ombra {
filtro: ombreggiatura (0.60em 0.60em 0.2em);
}

Produzione:

Confrontando entrambi gli effetti, è evidente che a scatola-ombra dà un'ombra rettangolare; inoltre non importa se l'immagine è trasparente o possiede già uno sfondo. D'altra parte, ombra permette di creare un'ombra che si conforma alla forma dell'immagine stessa.

I fattori limitanti sono che ombra( ) la funzione accetta tutti i parametri di tipo tranne il inserto parola chiave e propagazione parametro.

Elementi raggruppati

Esistono diversi casi in cui potrebbe essere necessario creare componenti sovrapponendo determinati elementi. Se stai usando scatola-ombra, dovrai affrontare il problema di cercare di gettare un'ombra nel modo giusto. Ecco come funziona quando si raggruppa un'immagine e un componente di testo:

HTML

Vivi il momento

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corruzione commodi quisquam ex numquam incidunt.

CSS di base

corpo {
imbottitura: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ginevra, Verdana, sans-serif;
}
h2 {
dimensione del carattere: 2rem;
}
P {
dimensione del carattere: 0.8rem;
}
.parent-contenitore {
display: flessibile;
direzione di flessione: colonna;
altezza: 17rem;
larghezza: 50 em;
}
.contenitore di immagini img {
larghezza: 15 em;
posizione: assoluta;
indice z: 1;
cima: 2em;
sinistra: 1,5 em;
}
.text-contenitore {
colore: rgb (255, 236, 236);
colore di sfondo: rgb (141 0 35);
larghezza: 30 rem;
imbottitura: 3rem;
align-self: flex-end;
posizione: relativa;
}

Ora applica il scatola-ombra e ombra per vedere la differenza.

.drop-ombra {
filtro: ombra (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
.scatola,
.box img {
box-shadow: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

Produzione:

Come puoi vedere, il scatola-ombra viene applicato su ogni elemento singolarmente mentre il ombra raggruppa entrambi e applica l'ombra.

Elementi ritagliati

Puoi usare il percorso di clip proprietà per ritagliare una determinata regione che determina quali parti di un'immagine o di un elemento devono essere mostrate. Il filtro ombra drop ci permette di creare un ombra sull'elemento ritagliato applicandolo al genitore di quell'elemento:

HTML

CSS

.parent-contenitore {
filtro: ombra (0rem 0rem 1.5rem marrone);
}
.elemento-clippato {
larghezza: 50 em;
altezza: 50m;
margine: 0 automatico;
immagine di sfondo: url (ragazza-sorridente.jpg);
percorso di ritaglio: cerchio (50%);
dimensione dello sfondo: copertina;
background-repeat: no-repeat;
}

Produzione:

Abbiamo ritagliato il 50% dell'immagine con un percorso circolare. quindi, il filtro ombra drop viene applicato solo alla parte visibile dell'immagine. Non è fantastico?

Limitazioni e differenze

Come abbiamo discusso sopra, ombra non supporta il propagazione parametro. Ciò significa che non sarebbe possibile creare un effetto contorno utilizzando il ombra( ) funzione perché viene ucciso ovunque. Inoltre, rende diversi effetti ombra dal scatola-ombra e testo-ombra (con gli stessi parametri). Potresti sentire che le differenze tra i scatola-ombra e ombra riduci a Modello scatola CSS. Uno lo segue mentre l'altro no. Ecco un esempio:

HTML

Ogni articolo MUO ti avvicinerà di un passo.


Ogni articolo MUO ti avvicinerà di un passo.



Ogni articolo MUO ti avvicinerà di un passo.

CSS di base

corpo {
imbottitura: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ginevra, Verdana, sans-serif;
}
.parent-contenitore {
larghezza: 72 rem;
}
P {
dimensione del carattere: 3em;
stile del carattere: grassetto;
}

Applicazione di effetti ombra

.drop-ombra {
filtro: ombra (0.5em 0.5em 0.1em #555);
}
.box-shadow {
box-ombra: 0.5em 0.5em 0.1em #555;
}
.text-shadow {
text-shadow: 0.5em 0.5em 0.1em #555;
}

Produzione:

Puoi vedere che scatola-ombra dà un'ombra più pesante e più scura del testo-ombra e ombra. Inoltre, c'è una leggera differenza nel posizionamento dell'ombra tra il testo-ombra e ombra. Tuttavia, potresti preferire diversi effetti d'ombra in base alle tue esigenze.

Supporto browser

Il ombra( ) la funzione è 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 a scatola-ombra ricaderci.

Sperimenta con diversi effetti ombra

La popolarità di scatola-ombra è abbastanza ovvio a causa della moltitudine di casi d'uso. in ogni caso, il ombra( ) funzione è molto sottoutilizzata. Ci auguriamo che sperimenterai diversi effetti ombra e proverai a implementarli ombra 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.

Come usare CSS box-shadow: 13 trucchi ed esempi

Le scatole insignificanti sembrano noiose. Abbelliscili con l'effetto box-shadow CSS!

Leggi Avanti

Circa l'autore