L'ombreggiatura è un effetto che rilascia o aggiunge un'ombra dietro gli elementi HTML selezionati durante il rendering sulla pagina web. Questo effetto può essere ottenuto utilizzando il ' ombreggiatura() ” metodo come valore per CSS “ filtro ” o utilizzando la proprietà “ scatola-ombra ' proprietà. Utilizzando la proprietà 'box-shadow', il miglioramento visivo, l'esperienza dell'utente, l'enfasi e l'attenzione possono essere indirizzati a uno specifico elemento HTML mirato.
Questa guida illustra la procedura per creare un effetto ombra discendente utilizzando la proprietà box-shadow:
-
- Crea un'ombra esterna solida usando la proprietà box-shadow
- Crea un'ombra esterna sfocata usando la proprietà box-shadow
- Espandi l'area dell'ombra esterna
Come creare ombre esterne in CSS3 utilizzando la proprietà box-shadow?
IL ' scatola-ombra ” consente allo sviluppatore di stabilire una gerarchia visiva indicando la posizione relativa degli elementi nella pagina. Usandolo, i creatori di pagine Web possono creare l'illusione di oggetti che proiettano ombre sulle superfici, dando agli elementi una sensazione più interattiva.
Sintassi
La proprietà 'box-shadow' ha una sintassi di:
scatola-ombra: [ sfasamento orizzontale ] [ scostamento verticale ] [ raggio di sfocatura ] [ raggio di diffusione ] [ colore ] ;
Una spiegazione dei termini utilizzati nella sintassi di cui sopra:
-
- Inizialmente il “ sfasamento orizzontale ” recupera/memorizza la posizione dell'asse X e il “ negativo ” imposta l'ombra a sinistra e viceversa.
- IL ' scostamento verticale ” memorizza la posizione dell'asse Y, il “ positivo ” imposta l'ombra nella direzione verso il basso, e viceversa nel caso del “ negativo ' valore.
- Successivamente, il “ raggio di sfocatura ” valore come dal nome imposta la sfocatura dell'ombra.
- IL ' raggio di diffusione ” specifica di quanto raggio deve espandersi l'ombra.
- IL ' colore ” imposta il colore dell'ombra, può trovarsi nella “ HSL ' O ' RGB ” anche il formato.
Ora, esaminiamo un paio di esempi per una migliore comprensione:
Esempio 1: applicazione di un'ombra discendente solida utilizzando la proprietà box-shadow
Per impostare l'ombra discendente solida, solo le direzioni e il colore dell'ombra vengono inseriti come valore nel ' scatola-ombra ' proprietà:
< stile >.boxShadowEsempio {
larghezza: 210px;
bordo: seta di mais solida 2px;
altezza: 210px;
colore di sfondo: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
stile >
Nel codice sopra:
-
- Innanzitutto, viene selezionato l'elemento HTML con una classe di ' boxShadowEsempio ”. E il valore di ' 210 pixel ” è fornito al “ altezza ' E ' larghezza ' proprietà. Inoltre, utilizza il ' confine ' E ' colore di sfondo ” proprietà per una migliore visualizzazione.
- Successivamente, imposta il valore di ' 10px 10px verde foresta ' al ' scatola-ombra Proprietà CSS. IL ' 10px ” è l'offset orizzontale e verticale che determina la posizione in cui deve essere applicata l'ombra. E il ' verde foresta ” è il colore dell'ombra.
Dopo la compilazione, la pagina web appare così:
L'output conferma che è stata posizionata un'ombra discendente di tipo solido utilizzando la proprietà box-shadow.
Esempio 2: applica un'ombra esterna sfocata utilizzando la proprietà box-shadow
Per rendere sfocata l'ombra già applicata, viene inserito un altro valore numerico prima del colore per il ' scatola-ombra ' proprietà. Visita il codice aggiornato di seguito:
< stile >.boxShadowEsempio {
larghezza: 210px;
bordo: seta di mais solida 2px;
altezza: 210px;
colore di sfondo: fumo bianco;
box-shadow: 10px 10px 15px forestgreen;
}
stile >
Secondo il codice sopra, l'ombra è ora ' 15px ' sfocato. Dopo la fine della fase di compilazione, la pagina web si presenta così:
La figura sopra mostra che l'ombra è ora sfocata.
Esempio 3: espansione dell'area dell'ombra esterna
Il valore dello spread viene fornito al ' scatola-ombra ” proprietà per espandere la regione dell'ombra. Il valore dello spread deve essere in formato numerico. Come nel frammento di codice seguente, la regione ombreggiata viene espansa in ' 20px ”:
< stile >.boxShadowEsempio {
larghezza: 210px;
bordo: seta di mais solida 2px;
altezza: 210px;
colore di sfondo: fumo bianco;
box-shadow: 10px 10px 15px 20px forestgreen;
}
stile >
Dopo l'esecuzione, l'ombra discendente ora appare così:
Come puoi vedere, la regione dell'ombra è ora aumentata di 20px.
Conclusione
IL ' scatola-ombra ” proprietà viene utilizzata per la creazione di un “ ombra ” effetto sugli elementi HTML selezionati. IL ' ombra ” proprietà accetta cinque valori, “ sfasamento orizzontale ”, “ scostamento verticale ”, “ raggio di sfocatura ”, “ raggio di diffusione ' E ' colore ”. I valori 'offset orizzontale' e 'offset verticale' impostano le dimensioni dell'ombra da cui dovrebbe emergere l'ombra discendente. Il valore 'raggio di sfocatura' rende l'ombra sfocata e il valore 'raggio di diffusione' estende la regione dell'ombra.