Home-theater-designers
CSS è il linguaggio utilizzato dagli sviluppatori per definire lo stile di una pagina web. Controlla come gli elementi HTML vengono visualizzati su uno schermo, su carta o in qualsiasi altra forma di supporto. I CSS forniscono 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.
Che cos'è CSS box-shadow?
Il scatola-ombra viene utilizzata per applicare un'ombra agli elementi HTML. È una delle proprietà CSS più utilizzate per lo styling di caselle o immagini.
Sintassi CSS:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- 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.
- offset verticale: Se l'offset verticale è positivo, l'ombra sarà sotto il riquadro. E se l'offset verticale è negativo, l'ombra sarà sopra la scatola.
- raggio di sfocatura: Più alto è il valore, più sfocata sarà l'ombra.
- raggio di diffusione: Significa quanto l'ombra dovrebbe diffondersi. I valori positivi aumentano la diffusione dell'ombra, i valori negativi la diminuiscono.
- Colore: Indica il colore dell'ombra. Inoltre, supporta qualsiasi formato di colore come rgba, hex o hsla.
I parametri di sfocatura, diffusione e colore sono facoltativi. 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 usato per creare più bordi e ombre sugli elementi.
1. Aggiungi un'ombra di scatola oscura a sinistra, a destra e in fondo alla scatola
Puoi aggiungere ombre molto deboli su tre lati (sinistro, destro e inferiore) della casella 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 oscura a tutti i lati
Puoi aggiungere ombre chiare a tutti i lati della scatola usando il seguente CSS box-shadow con il tuo elemento HTML di destinazione:
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;Produzione:
3. Aggiungi un'ombra sottile al lato inferiore e destro
Puoi aggiungere ombre al lato inferiore e destro della casella utilizzando il seguente CSS box-shadow con l'elemento HTML di destinazione:
aiutami a trovare un film da guardare
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;Produzione:
4. Aggiungi un'ombra scura a tutti i lati
Puoi aggiungere un'ombra scura a tutti i lati della scatola usando 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 l'ombra diffusa su tutti i lati
Puoi aggiungere un'ombra diffusa su tutti i lati della casella utilizzando il seguente comando con l'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 su tutti i lati
Puoi aggiungere una semplice ombra di bordo a tutti i lati della scatola utilizzando il seguente CSS con l'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 inset;Produzione:
7. Aggiungi un'ombra di scatola ai lati inferiore e sinistro
Puoi aggiungere un'ombra ai lati inferiore e sinistro della casella utilizzando il seguente CSS box-shadow con l'elemento HTML di destinazione:
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;Produzione:
8. Aggiungi un'ombra oscurata ai lati superiore e sinistro, un'ombra scura ai lati inferiore e destro
Puoi aggiungere un'ombra chiara al lato superiore e sinistro della casella, nonché un'ombra scura ai lati inferiore e destro della casella utilizzando il seguente CSS con l'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 su tutti i lati
Puoi aggiungere una semplice ombra di bordo colorata 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 l'elemento HTML di destinazione:
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;Produzione:
come faccio a spegnere bixby?
11. Aggiungi più ombre di bordo colorate in basso
Puoi aggiungere più ombre di bordo colorate nella parte inferiore della casella utilizzando il seguente CSS box-shadow 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 ai lati sinistro e destro, diffondi l'ombra sul fondo
Puoi aggiungere ombre chiare ai lati sinistro e destro e diffondere l'ombra nella parte inferiore della casella utilizzando il seguente CSS box-shadow con il tuo 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 sai come aggiungere fantastici effetti box-shadow usando CSS, puoi integrarli facilmente con elementi HTML in diversi modi.
Imparentato: 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 di sezione di un documento HTML utilizzando il elemento. Puoi creare un numero qualsiasi di elementi in un documento HTML, ma devono essere racchiusi tra i e tag. Ecco un esempio che mostra come utilizzare CSS interni con un documento HTML:
CSS box-shadow
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
Style 4
CSS in linea
CSS in linea viene utilizzato per aggiungere regole di stile univoche a un elemento HTML. Può essere utilizzato con un elemento HTML tramite il stile attributo. L'attributo style contiene proprietà CSS sotto forma di 'costo dell'immobile' separati da un punto e virgola ( ; ).
Correlati: 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 dimostra come utilizzare CSS in linea con un documento HTML:
CSS box-shadow
Style 4
CSS esterno
CSS esterno è il modo più ideale per applicare 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 stili ai documenti HTML poiché il file HTML interessato richiede modifiche minime nel markup. Ecco un esempio che mostra come utilizzare CSS esterni con un documento HTML:
Crea un nuovo file CSS con il .css estensione. Ora aggiungi il seguente codice CSS all'interno di quel file:
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: 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:
perché il mio volume non funziona sul mio iPhone?
CSS box-shadow
Style 4
Nota che il file CSS è collegato al documento HTML tramite taggare 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
Usando i 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 fanno sin dal suo rilascio nel 1996. Pertanto, i principianti hanno molto da imparare!
Fortunatamente, i CSS sono adatti ai principianti. Puoi fare un ottimo esercizio iniziando con alcuni semplici comandi e vedendo dove ti porta la tua creatività.
Condividere Condividere Tweet E-mail 10 semplici esempi di codice CSS che puoi imparare in 10 minutiHai bisogno di aiuto con i CSS? Prova questi esempi di codice CSS di base per iniziare, quindi applicali alle tue pagine web.
Leggi Avanti Argomenti correlati- Programmazione
- Web design
- CSS
Yuvraj è uno studente universitario di Informatica presso l'Università di Delhi, in India. È appassionato di sviluppo Web Full Stack. Quando non scrive, esplora la profondità di diverse tecnologie.
Altro da Yuvraj ChandraIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti