CSS-i kast-vari kasutamine: 13 nippi ja näidet

CSS-i kast-vari kasutamine: 13 nippi ja näidet

CSS on keel, mida arendajad kasutavad veebilehe kujundamiseks. See juhib HTML -elementide kuvamist ekraanil, paberil või muul kujul. CSS pakub täielikku kohandamisvõimet veebilehe kujundamiseks oma pildi järgi.





CSS-i abil saate muuta elemendi taustavärvi, fondi stiili, fondi värvi, kasti-varju, veerist ja palju muid omadusi. Selles juhendis tutvustame teile mõningaid kasti-varju tõhusaid kasutusviise.



Mis on CSS box-shadow?

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





CSS -i süntaks:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  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, jääb vari kasti kohale.
  3. hägususe raadius: Mida kõrgem väärtus, seda hägusem on vari.
  4. leviku raadius: See näitab, kui palju vari peaks levima. Positiivsed väärtused suurendavad varju levikut, negatiivsed väärtused vähendavad levikut.
  5. Värv: See tähistab varju värvi. Samuti toetab see mis tahes värvivormingut, näiteks rgba, hex või hsla.

Hägususe, leviku ja värvi parameetrid on valikulised. Kast-varju kõige huvitavam osa on see, et kasti-varju väärtuste eraldamiseks komaga saate kasutada koma. Seda saab kasutada elementidele mitme äärise ja varju loomiseks.



1. Lisage kasti vasakule, paremale ja alumisele osale hämar kast

Saate lisada väga hämaraid varje kasti kolmele küljele (vasakule, paremale ja alla), kasutades järgmist HTML-sihtelemendiga kasti-varju CSS-i:

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

Väljund:



2. Lisage kõikidele külgedele hämar kast

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



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

Väljund:

3. Lisage alumisele ja paremale küljele õhuke kast-vari

Saate lisada varje kasti alumisse ja paremasse serva, kasutades järgmist HTML-sihtelemendiga kasti-varju CSS-i:

soovitan telesaateid selle põhjal, mis mulle meeldib
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Väljund:

4. Lisage kõikidele külgedele tume kast-vari

Saate lisada tumeda varju kasti kõikidele külgedele, kasutades järgmist HTML-siht-elemendiga kasti-varju CSS-i:

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

Väljund:

5. Lisage Spread Shadow kõikidele külgedele

Saate lisada laialivalguvat varju kasti kõikidele külgedele, kasutades järgmist käsku koos oma siht -HTML -elemendiga:

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 äärisvari kõikidele külgedele

Saate lisada lihtsa äärisvarju kasti kõikidele külgedele, kasutades järgmist sihtmärgi HTML -elemendiga 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 inset;

Väljund:

7. Lisage alumisele ja vasakule küljele kast-vari

Saate lisada varju kasti alumisse ja vasakusse serva, kasutades järgmist HTML-sihtmärgiga elementi:

box-shadow: 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 tumedat varju

Saate lisada heleda varju kasti üla- ja vasakule küljele ning tumeda varju kasti alumisele ja paremale küljele, kasutades järgmist sihtmärgi HTML -elemendiga CSS -i:

box-shadow: 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, värviline äärisvari kõikidele külgedele

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

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

Väljund:

10. Lisage kasti alumisele ja vasakule küljele mitmevärvilised äärisvarjud

Saate lisada mitu värvilist äärisvarju kasti alumisse ja vasakusse serva, kasutades järgmist sihtmärgi HTML -elemendiga CSS -i:

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

Väljund:

salvestage veebisaidilt video

11. Lisage alt mitmevärvilised äärisvarjud

Saate lisada mitu värvilist äärisvarju kasti põhja, kasutades järgmist HTML-sihtelemendiga 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 mitmevärvilised äärisvarjud

Saate lisada mitme värvilise äärisvarju kasti alumisse ja paremasse serva, kasutades järgmist sihtmärgi HTML -elemendiga CSS -i:

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;

Väljund:

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

Saate lisada heledaid varje vasakule ja paremale küljele ning levitada varju kasti põhja, kasutades järgmist HTML-sihtelemendiga kasti-varju CSS-i:

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;

Väljund:

Integreerige CSS HTML -lehega

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

Seotud: 11 kasulikku tööriista CSS -failide kontrollimiseks, puhastamiseks ja optimeerimiseks

Saate selle manustada HTML -lehele või lisada eraldi dokumendina. CSS -i lisamiseks HTML -dokumenti on kolm võimalust.

Sisemine CSS

Sisseehitatud või sisemised stiililehed sisestatakse kausta HTML -dokumendi jaotises, kasutades element. Saate luua suvalise arvu elemendid HTML -dokumendis, kuid need peavad olema suletud ja silte. Siin on näide sisemise CSS -i kasutamise kohta HTML -dokumendiga:





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





Sisseehitatud CSS

Inline CSS -i kasutatakse HTML -elemendile ainulaadsete stiilireeglite lisamiseks. Seda saab kasutada koos HTML -elemendiga stiil atribuut. Stiili atribuut sisaldab CSS -i atribuute kujul 'property: value' eraldatud semikooloniga ( ; ).

Seotud: Lugege, kuidas luua kahemõõtmelisi veebisaite CSS-võrgu abil

Kõik CSS -i atribuudid peavad olema ühel real, st CSS -i atribuutide vahel ei tohiks olla reavahesid. Siin on näide, mis näitab, kuidas kasutada sisemist CSS -i HTML -dokumendiga.





CSS box-shadow



Style 4





Väline CSS

Väline CSS on kõige ideaalsem viis stiilide rakendamiseks HTML -dokumentidele. 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, mis näitab, kuidas kasutada välist CSS -i koos HTML -dokumendiga:

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

.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;
}

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

ei suutnud leida või laadida põhiklassi põhiklassi




CSS box-shadow




Style 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 veebisait CSS -iga elegantseks

CSS -i kasutades on teil täielik kontroll oma veebilehe kujunduse üle. Saate kohandada iga HTML -i elementi, kasutades erinevaid CSS -i atribuute. CSS -i uuendustele aitavad kaasa arendajad üle kogu maailma ja nad on seda teinud alates selle avaldamisest 1996. aastal. Sellisena on algajatel palju õppida!

Õnneks on CSS algajatele sõbralik. Te saate suurepäraseid harjutusi, alustades mõnest lihtsast käsust ja vaadates, kuhu teie loovus teid viib.

Jaga Jaga Piiksuma E -post 10 lihtsat CSS -koodi näidet, mida saate õppida 10 minutiga

Kas vajate abi CSS -iga? Alustuseks proovige neid CSS -koodi põhinäiteid, seejärel rakendage neid oma veebilehtedele.

Loe edasi Seotud teemad
  • Programmeerimine
  • Veebidisain
  • CSS
Autori kohta Yuvraj Chandra(60 artiklit avaldatud)

Yuvraj on arvutiteaduse bakalaureuseõppe üliõpilane Indias Delhi ülikoolis. Ta on kirglik Full Stacki veebiarenduse vastu. Kui ta ei kirjuta, uurib ta erinevate tehnoloogiate sügavust.

Veel Yuvraj Chandrast

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin