CSS box-shadow'i kasutamine: 13 nippi ja näiteid

CSS on keel, mida arendajad kasutavad veebilehe kujundamiseks. See kontrollib, kuidas HTML-elemente kuvatakse ekraanil, paberil või mis tahes muus vormis. CSS pakub täielikku kohandamisvõimalust veebilehe kujundamiseks oma pildi järgi.

CSS-i abil saate muuta elemendi taustavärvi, fondi stiili, fondi värvi, kasti varju, veerist ja paljusid muid omadusi. Tutvustame teile selles juhendis kasti varju tõhusat kasutamist.

Mis on CSS box-shadow?

The kast-vari atribuuti kasutatakse HTML elementidele varju rakendamiseks. See on kastide või piltide kujundamisel üks enimkasutatavaid CSS-i omadusi.

CSS-i süntaks:

box-shadow: [horisontaalne nihe] [vertikaalne nihe] [hägususraadius] [valikuline leviraadius] [värv];

1. horisontaalne nihe: Kui horisontaalne nihe on positiivne, jääb vari kastist paremale. Ja kui horisontaalne nihe on negatiivne, jääb vari kastist vasakule.
2. vertikaalne nihe: Kui vertikaalne nihe on positiivne, jääb vari kasti alla. Ja kui vertikaalne nihe on negatiivne, on vari kasti kohal.
instagram viewer
3. hägususraadius: Mida suurem on väärtus, seda hägusem on vari.
4. levimisraadius: See tähistab, kui palju vari peaks levima. Positiivsed väärtused suurendavad varju levikut, negatiivsed vähendavad levikut.
5. Värv: See tähistab varju värvi. Samuti toetab see mis tahes värvivormingut, nagu rgba, hex või hsla.

Hägususe, leviku ja värvi parameetrid on valikulised. Kasti-varju kõige huvitavam osa on see, et koma abil saate kasti-varju väärtused eraldada mitu korda. Seda saab kasutada elementide jaoks mitme piiri ja varju loomiseks.

1. Lisage kasti vasakule, paremale ja allserva Dim-vari

Kasti kolmele küljele (vasakule, paremale ja alumisele) saate lisada väga hämarad varjud, kasutades oma HTML-i sihtelemendiga järgmist box-shadow CSS-i:

kast-vari: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Väljund:

2. Lisage jaotisele Kõik küljed Dim-vari

Heledaid varje saate kasti kõikidele külgedele lisada, kasutades HTML-i sihtmärgi elemendiga järgmist box-shadow CSS-i:

kast-vari: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Väljund:

3. Lisage alumisele ja paremale küljele Thin box-shadow

Varje saate kasti alla ja parempoolsesse serva lisada, kasutades HTML-i sihtrühmaga järgmist box-shadow CSS-i:

kasti vari: rgba (0, 0, 0, 0,15) 1,95 pikslit 1,95 pikslit 2,6 pikslit;

Väljund:

4. Lisage jaotisele All Sides tume kastivari

Tumeda varju saate kasti kõikidele külgedele lisada, kasutades HTML-i sihtrühma järgmise kastivari CSS-i:

kastivari: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Väljund:

5. Lisage kõikidele külgedele Spread Shadow

Saate lisada hajutatud varju kasti kõikidele külgedele, kasutades järgmist HTML-i sihtelemendiga käsku:

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;

Väljund:

6. Lisage õhuke piirjoon kõigile külgedele

Saate lisada lihtsa äärise varju kasti kõikidele külgedele, kasutades oma HTML-i sihtelemendiga järgmist CSS-i:

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 sisestatud;

Väljund:

7. Lisage kasti vari all ja vasakul küljel

Varju saate kasti alumisse ja vasakusse serva lisada, kasutades HTML-i sihtmärgi elemendiga järgmist box-shadow CSS-i:

kasti vari: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Väljund:

8. Lisage ülemisele ja vasakule küljele hämar kast-vari, alumisele ja paremale küljele tumedad varjud

Saate lisada kerge varju kasti ülemisse ja vasakusse serva ning tumeda varju kasti alumisse ja parempoolsesse serva, kasutades oma HTML-i sihtelemendiga järgmist CSS-i:

kasti-vari: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0,8) -6px -2px 16px 0px;

Väljund:

9. Lisage õhuke ja värviline piirjoon kõigile külgedele

Saate lisada lihtsa värvilise äärise varju kasti kõikidele külgedele, kasutades HTML-i sihtmärgi elemendiga järgmist kasti-varju CSS-i:

kasti vari: rgba (3, 102, 214, 0,3) 0px 0px 0px 3px;

Väljund:

10. Lisage kasti alumisele ja vasakule küljele mitu värvilist äärisvarju

Järgmise CSS-i ja HTML-i sihtelemendi abil saate kasti alumisse ja vasakusse serva lisada mitu värvilist äärisvarju:

box-shadow: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px sisestatud, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px sisestatud;

Väljund:

11. Lisage mitmevärvilised äärisvarjud alt

Kasti allossa saate lisada mitu värvilist äärisvarju, kasutades oma HTML-i sihtelemendiga järgmist kasti-varju CSS-i:

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;

Väljund:

12. Lisage kasti alumisele ja paremale küljele mitu värvilist äärisvarju

Järgmise CSS-i ja HTML-i sihtelemendi abil saate kasti alumisse ja paremasse serva lisada mitu värvilist äärisvarju:

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) 20 pikslit 20 pikslit, rgba (240, 46, 170, 0,05) 25 pikslit 25 pikslit;

Väljund:

13. Lisage heledad varjud vasakule ja paremale küljele, levitage varju põhjale

Võite lisada heledaid varje vasakule ja paremale küljele ning levitada varju kasti põhja, kasutades oma HTML-i sihtmärgi järgmise kastivari CSS-i:

kasti vari: 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;

Väljund:

CSS-i integreerimine HTML-lehega

Nüüd teate, kuidas CSS-i abil lisada lahedaid varjuefekte, saate neid HTML-elementidega hõlpsasti mitmel viisil integreerida.

Seotud: 11 kasulikke tööriistu CSS-failide kontrollimiseks, puhastamiseks ja optimeerimiseks

Võite selle manustada HTML-lehele ise või manustada eraldi dokumendina. CSS-i kaasamiseks HTML-dokumenti on kolm võimalust:

Sisemine CSS

Manustatud või sisemised stiililehed lisatakse lehte HTML-dokumendi jaotis, kasutades element. Saate luua mis tahes arvu elemendid HTML-dokumendis, kuid need peavad olema ja sildid. Siin on näide, kuidas kasutada sisemist CSS-i HTML-dokumendiga:

Stiil 4

Reas CSS

Sisemist CSS-i kasutatakse HTML-elemendile ainulaadsete stiilireeglite lisamiseks. Seda saab kasutada HTML-elemendiga stiil atribuut. Atribuut stiil sisaldab CSS-i atribuute kujul "vara: väärtus" eraldatakse semikooloniga (;).

Seotud: Siit saate teada, kuidas CSS Gridiga kahemõõtmelisi veebisaite luua

Kõik CSS-i atribuudid peavad olema ühel real, st CSS-i omaduste vahel ei tohiks olla reavahet. Siin on näide CSS-i kasutamise kohta HTML-dokumendiga:

Stiil 4

Väline CSS

Väline CSS on ideaalne viis HTML-dokumentidele stiilide rakendamiseks. Väline stiilileht sisaldab kõiki stiilireegleid eraldi dokumendis (.css-fail), seejärel lingitakse see dokument HTML-dokumendiga, kasutades silt. See meetod on parim viis stiilide määratlemiseks ja HTML-dokumentidele rakendamiseks, kuna mõjutatud HTML-fail nõuab märgistuses minimaalseid muudatusi. Siin on näide, kuidas kasutada välist CSS-i HTML-dokumendiga:

Looge uus CSS-fail failiga .css pikendamine. Nüüd lisage selle faili sisse järgmine CSS-kood:

.heading {
teksti joondamine: keskel;
}
.image-box {
kuva: plokk;
marginaal vasakul: auto;
paremäär: parem;
kastivari: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Lõpuks looge HTML-dokument ja lisage selle dokumendi sisse järgmine kood:

Stiil 4

Pange tähele, et CSS-fail on lingitud HTML-dokumendiga silt ja href atribuut.

Kõik ülaltoodud kolm meetodit (sisemine CSS, sisemine CSS ja väline CSS) kuvavad sama väljundit

Muutke oma veebileht CSS-iga elegantseks

CSS-i abil saate täielikult kontrollida oma veebilehe stiili. Iga HTML-i elementi saate kohandada, kasutades erinevaid CSS-i atribuute. Kogu maailma arendajad panustavad CSS-i värskendustesse ja nad on seda teinud alates selle ilmumisest 1996. aastal. Sellisena on algajatel palju õppida!

Õnneks on CSS algajatele sobiv. Suurepärase praktika saate, kui alustate mõne lihtsa käsklusega ja näete, kuhu loovus teid viib.

10 lihtsat CSS-koodi näidet, mida saate õppida 10 minutiga

Kas soovite CSS-i kasutamise kohta rohkem teada saada? Alustuseks proovige neid CSS-i põhilisi näiteid ja seejärel rakendage neid oma veebisaitidele.

Loe edasi

Autori kohta