Come usare CSS box-shadow: 13 trucchi ed esempi

CSS è il linguaggio che gli sviluppatori utilizzano per definire lo stile di una pagina web. Controlla il modo in cui gli elementi HTML vengono visualizzati su uno schermo, su carta o in qualsiasi altra forma di supporto. CSS fornisce il pieno potere di personalizzazione per modellare la pagina web nella tua immagine.

Puoi modificare il colore di sfondo di un elemento, lo stile del carattere, il colore del carattere, l'ombra del riquadro, il margine e numerose altre proprietà utilizzando i CSS. Ti guideremo attraverso alcuni usi efficaci di box-shadow in questa guida.

Cos'è l'ombra del riquadro CSS?

Il scatola-ombra viene utilizzata per applicare un'ombra agli elementi HTML. È una delle proprietà CSS più utilizzate per lo styling di riquadri o immagini.

Sintassi CSS:

box-shadow: [offset orizzontale] [offset verticale] [raggio di sfocatura] [raggio di diffusione opzionale] [colore];

1. offset orizzontale: Se l'offset orizzontale è positivo, l'ombra sarà a destra del riquadro. E se l'offset orizzontale è negativo, l'ombra sarà a sinistra del riquadro.
instagram viewer
2. offset verticale: Se l'offset verticale è positivo, l'ombra sarà sotto il riquadro. E se l'offset verticale è negativo, l'ombra sarà sopra il riquadro.
3. raggio di sfocatura: Più alto è il valore, più sfocata sarà l'ombra.
4. raggio di diffusione: Significa quanto l'ombra dovrebbe diffondersi. Valori positivi aumentano la diffusione dell'ombra, valori negativi diminuiscono la diffusione.
5. Colore: Significa il colore dell'ombra. Inoltre, supporta qualsiasi formato di colore come rgba, hex o hsla.

I parametri di sfocatura, diffusione e colore sono opzionali. La parte più interessante di box-shadow è che puoi usare una virgola per separare i valori box-shadow un numero qualsiasi di volte. Questo può essere utilizzato per creare più bordi e ombre sugli elementi.

1. Aggiungi un'ombra box Dim a sinistra, a destra e in fondo alla scatola

Puoi aggiungere ombre molto scure su tre lati (sinistro, destro e inferiore) della scatola utilizzando il seguente CSS box-shadow con il tuo elemento HTML di destinazione:

box-shadow: rgba (149, 157, 165, 0.2) 0px 8px 24px;

Produzione:

2. Aggiungi un'ombra box Dim a Tutti i lati

Puoi aggiungere ombre chiare a tutti i lati del riquadro utilizzando il seguente CSS box-shadow con l'elemento HTML di destinazione:

box-shadow: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;

Produzione:

3. Aggiungi un'ombra a scatola sottile ai lati inferiore e destro

Puoi aggiungere ombre nella parte inferiore e destra del riquadro utilizzando il seguente CSS box-shadow con il tuo elemento HTML di destinazione:

box-shadow: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Produzione:

4. Aggiungi un'ombra a scatola scura a Tutti i lati

Puoi aggiungere un'ombra scura a tutti i lati della scatola utilizzando il seguente CSS box-shadow con il tuo elemento HTML di destinazione:

box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Produzione:

5. Aggiungi ombra diffusa a tutti i lati

Puoi aggiungere un'ombra diffusa a tutti i lati della scatola utilizzando il seguente comando con il tuo elemento HTML di destinazione:

box-shadow: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;

Produzione:

6. Aggiungi un'ombra di bordo sottile a tutti i lati

Puoi aggiungere una semplice ombra del bordo a tutti i lati della scatola utilizzando il seguente CSS con il tuo elemento HTML di destinazione:

box-shadow: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0.08) 0px 1px 0px inserto;

Produzione:

7. Aggiungi un'ombra a scatola ai lati inferiore e sinistro

Puoi aggiungere un'ombra ai lati inferiore e sinistro della scatola utilizzando il seguente CSS box-shadow con il tuo elemento HTML di destinazione:

box-shadow: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

Produzione:

8. Aggiungi un'ombreggiatura fioca ai lati superiore e sinistro, un'ombra scura ai lati inferiore e destro

Puoi aggiungere un'ombra chiara sul lato superiore e sinistro del riquadro e un'ombra scura sui lati inferiore e destro del riquadro utilizzando il seguente CSS con il tuo elemento HTML di destinazione:

box-shadow: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Produzione:

9. Aggiungi un'ombra di bordo sottile e colorata a tutti i lati

Puoi aggiungere una semplice ombra del bordo colorato a tutti i lati della scatola utilizzando il seguente CSS box-shadow con il tuo elemento HTML di destinazione:

box-shadow: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Produzione:

10. Aggiungi più ombre di bordo colorate ai lati inferiore e sinistro della scatola

Puoi aggiungere più ombre di bordo colorate ai lati inferiore e sinistro della casella utilizzando il seguente CSS con il tuo elemento HTML di destinazione:

box-shadow: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px inserto, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px inserto;

Produzione:

11. Aggiungi più ombre di bordo colorate in basso

Puoi aggiungere più ombre di bordo colorate nella parte inferiore del riquadro utilizzando il seguente CSS di ombreggiatura del riquadro con l'elemento HTML di destinazione:

box-shadow: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170, 0,1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;

Produzione:

12. Aggiungi più ombre di bordo colorate ai lati inferiore e destro della scatola

Puoi aggiungere più ombre di bordo colorate ai lati inferiore e destro della casella utilizzando il seguente CSS con l'elemento HTML di destinazione:

box-shadow: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170, 0,1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;

Produzione:

13. Aggiungi ombre chiare sui lati sinistro e destro, diffondi ombre sul fondo

Puoi aggiungere ombre chiare ai lati sinistro e destro e diffondere l'ombra nella parte inferiore del riquadro utilizzando il seguente CSS box-shadow con l'elemento HTML di destinazione:

box-shadow: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09) 0px 8px 4px, rgba (0, 0, 0, 0,09) 0px 16px 8px, rgba (0, 0, 0, 0,09) 0px 32px 16px;

Produzione:

Integra CSS con una pagina HTML

Ora che sai come aggiungere fantastici effetti box-shadow usando i CSS, puoi integrarli facilmente con gli elementi HTML in diversi modi.

Relazionato: 11 strumenti utili per controllare, pulire e ottimizzare i file CSS

Puoi incorporarlo nella pagina HTML stessa o allegarlo come documento separato. Esistono tre modi per includere CSS in un documento HTML:

CSS interno

I fogli di stile incorporati o interni vengono inseriti all'interno del file sezione di un documento HTML utilizzando il elemento. Puoi creare un numero qualsiasi di file elementi in un documento HTML, ma devono essere racchiusi tra i file e tag. Ecco un esempio che mostra come utilizzare CSS interno con un documento HTML:

Stile 4

CSS in linea

Il CSS in linea viene utilizzato per aggiungere regole di stile univoche a un elemento HTML. Può essere utilizzato con un elemento HTML tramite stile attributo. L'attributo style contiene proprietà CSS sotto forma di "costo dell'immobile" separati da un punto e virgola (;).

Relazionato: Scopri come creare siti web bidimensionali con CSS Grid

Tutte le proprietà CSS devono essere in una riga, ovvero non dovrebbero esserci interruzioni di riga tra le proprietà CSS. Ecco un esempio che mostra come utilizzare CSS in linea con un documento HTML:

Stile 4

CSS esterno

Il CSS esterno è il modo più ideale per applicare gli stili ai documenti HTML. Un foglio di stile esterno contiene tutte le regole di stile in un documento separato (file .css), questo documento viene quindi collegato al documento HTML utilizzando il etichetta. Questo metodo è il metodo migliore per definire e applicare gli stili ai documenti HTML poiché il file HTML interessato richiede modifiche minime nel markup. Ecco un esempio che mostra come utilizzare CSS esterno con un documento HTML:

Crea un nuovo file CSS con l'estensione .css estensione. Ora aggiungi il seguente codice CSS all'interno di quel file:

.intestazione {
text-align: center;
}
.image-box {
blocco di visualizzazione;
margine sinistro: auto;
margin-right: auto;
box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;
}

Infine, crea un documento HTML e aggiungi il seguente codice all'interno di quel documento:

Stile 4

Notare che il file CSS è collegato al documento HTML tramite tag e href attributo.

Tutti i tre metodi precedenti (CSS interno, CSS in linea e CSS esterno) visualizzeranno lo stesso output-

Rendi elegante la tua pagina web con i CSS

Utilizzando CSS hai il pieno controllo sullo stile della tua pagina web. Puoi personalizzare ogni elemento HTML utilizzando varie proprietà CSS. Gli sviluppatori di tutto il mondo stanno contribuendo agli aggiornamenti CSS e lo hanno fatto sin dal suo rilascio nel 1996. Pertanto, i principianti hanno molto da imparare!

Fortunatamente, CSS è adatto ai principianti. Puoi fare un po 'di pratica eccellente iniziando con pochi semplici comandi e vedendo dove ti porta la tua creatività.

10 semplici esempi di codice CSS che puoi imparare in 10 minuti

Vuoi saperne di più sull'utilizzo dei CSS? Prova questi esempi di codice CSS di base per iniziare, quindi applicali alle tue pagine web.

Leggi Avanti

Circa l'autore