Kaip naudoti „CSS box-shadow“: 13 gudrybių ir pavyzdžių

Kaip naudoti „CSS box-shadow“: 13 gudrybių ir pavyzdžių

CSS yra kalba, kurią kūrėjai naudoja kurdami tinklalapį. Jis kontroliuoja, kaip HTML elementai rodomi ekrane, popieriuje ar bet kokia kita laikmenos forma. CSS suteikia visas tinkinimo galimybes sukurti tinklalapį pagal savo įvaizdį.





Naudodami CSS galite pakeisti elemento fono spalvą, šrifto stilių, šrifto spalvą, langelio šešėlį, paraštę ir daugybę kitų savybių. Šiame vadove aptarsime keletą efektyvių „box-shadow“ naudojimo būdų.



Kas yra CSS dėžutė-šešėlis?

The dėžutė-šešėlis nuosavybė naudojama šešėliams pritaikyti HTML elementams. Tai viena iš dažniausiai naudojamų CSS savybių, skirtų langeliams ar vaizdams formuoti.





CSS sintaksė:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. horizontalus poslinkis: Jei horizontalus poslinkis yra teigiamas, šešėlis bus dėžutės dešinėje. Ir jei horizontalus poslinkis yra neigiamas, šešėlis bus kairėje dėžutės pusėje.
  2. vertikalus poslinkis: Jei vertikalus poslinkis yra teigiamas, šešėlis bus žemiau dėžutės. Ir jei vertikalus poslinkis yra neigiamas, šešėlis bus virš dėžutės.
  3. suliejimo spindulys: Kuo didesnė vertė, tuo šešėlis bus neryškus.
  4. sklaidos spindulys: Tai reiškia, kiek šešėlis turėtų skleisti. Teigiamos vertės padidina šešėlio sklaidą, neigiamos - sumažina sklaidą.
  5. Spalva: Tai reiškia šešėlio spalvą. Be to, jis palaiko bet kokį spalvų formatą, pvz., „Rgba“, „hex“ ar „hsla“.

Neryškumo, sklaidos ir spalvų parametrai yra neprivalomi. Įdomiausia „box-shadow“ dalis yra ta, kad galite naudoti kablelį, norėdami atskirti „box-shadow“ reikšmes bet kokį skaičių kartų. Tai gali būti naudojama elementams sukurti kelias kraštines ir šešėlius.



1. Prie dėžutės kairės, dešinės ir apačios pridėkite tamsų langelį-šešėlį

Galite pridėti labai silpnų šešėlių į tris dėžutės puses (kairę, dešinę ir apačią) naudodami šį langelio šešėlio CSS su tiksliniu HTML elementu:

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

Išėjimas:



2. Prie visų pusių pridėkite tamsų langelį-šešėlį

Galite pridėti šviesių šešėlių į visas dėžutės puses naudodami šį langelio šešėlio CSS su tiksliniu HTML elementu:



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

Išėjimas:

3. Prie apatinės ir dešinės pusės pridėkite ploną langelį-šešėlį

Galite pridėti šešėlių apatinėje ir dešinėje dėžutės pusėje naudodami šį langelio šešėlio CSS su tiksliniu HTML elementu:

kaip užsidirbti pinigų su vaizdo žaidimais
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Išėjimas:

4. Prie visų pusių pridėkite tamsų langelį-šešėlį

Galite pridėti tamsų šešėlį į visas dėžutės puses naudodami šį langelio šešėlio CSS su tiksliniu HTML elementu:

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

Išėjimas:

5. Pridėkite Spread Shadow į visas puses

Galite pridėti išsklaidytą šešėlį į visas dėžutės puses naudodami šią komandą su tiksliniu HTML elementu:

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;

Išėjimas:

6. Pridėkite ploną sienų šešėlį prie visų pusių

Galite pridėti paprastą krašto šešėlį prie visų langelio pusių naudodami šį CSS su tiksliniu HTML elementu:

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;

Išėjimas:

7. Prie apatinės ir kairiosios pusės pridėkite langelį-šešėlį

Galite pridėti šešėlį apatinėje ir kairėje dėžutės pusėse naudodami šį langelio šešėlio CSS su tiksliniu HTML elementu:

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

Išėjimas:

8. Pridėkite tamsų langelį-šešėlį prie viršutinės ir kairės pusės, tamsų šešėlį į apačią ir dešinę

Galite pridėti šviesų šešėlį viršutinėje ir kairėje dėžutės pusėje, taip pat tamsų šešėlį apatinėje ir dešinėje dėžutės pusėse, naudodami šį CSS su tiksliniu HTML elementu:

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

Išėjimas:

9. Prie visų pusių pridėkite ploną, spalvotą sienų šešėlį

Galite pridėti paprastą spalvotą kraštinį šešėlį prie visų langelio pusių naudodami šį langelio šešėlio CSS su tiksliniu HTML elementu:

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

Išėjimas:

10. Prie apatinės ir kairiosios dėžutės pusės pridėkite kelių spalvų kraštinių šešėlius

Galite pridėti kelis spalvotus kraštinius šešėlius prie dėžutės apačios ir kairės pusės naudodami šį CSS su tiksliniu HTML elementu:

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

Išėjimas:

kaip sužinoti, ar „Facebook“ nulaužė

11. Į apačią pridėkite kelių spalvų kraštinių šešėlius

Galite pridėti kelių spalvų kraštinių šešėlių į langelio apačią naudodami šį langelio šešėlio CSS su tiksliniu HTML elementu:

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;

Išėjimas:

12. Pridėkite kelių spalvų kraštinių šešėlius prie dėžutės apačios ir dešinės pusės

Galite pridėti kelių spalvų kraštinių šešėlių apatinėje ir dešinėje dėžutės pusėse naudodami šį CSS su tiksliniu HTML elementu:

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;

Išėjimas:

13. Pridėkite šviesių šešėlių prie kairės ir dešinės pusės, paskleiskite šešėlį apačioje

Galite pridėti šviesių šešėlių kairėje ir dešinėje ir skleisti šešėlį dėžutės apačioje naudodami šį langelio šešėlio CSS su tiksliniu HTML elementu:

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;

Išėjimas:

Integruokite CSS su HTML puslapiu

Dabar jūs žinote, kaip pridėti šaunių langelio šešėlių efektų naudojant CSS, galite lengvai juos integruoti į HTML elementus įvairiais būdais.

Susijęs: 11 naudingų įrankių CSS failams tikrinti, valyti ir optimizuoti

Galite įterpti jį į patį HTML puslapį arba pridėti kaip atskirą dokumentą. Yra trys būdai įtraukti CSS į HTML dokumentą:

Vidinė CSS

Įterptieji arba vidiniai stiliaus lapai įterpiami į HTML dokumento skiltyje, naudojant elementas. Galite sukurti bet kokį skaičių elementai HTML dokumente, tačiau jie turi būti uždėti tarp ir žymes. Štai pavyzdys, parodantis, kaip naudoti vidinį CSS su HTML dokumentu:





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





Įterpti CSS

Įterptas CSS naudojamas norint pridėti unikalių stiliaus taisyklių prie HTML elemento. Jis gali būti naudojamas su HTML elementu per stilius atributas. Stiliaus atribute yra CSS ypatybių 'property: value' atskirtas kabliataškiu ( ; ).

Susiję: Sužinokite, kaip sukurti dvimatis svetaines naudojant CSS tinklelį

Visos CSS ypatybės turi būti vienoje eilutėje, t. Y. Tarp CSS ypatybių neturėtų būti eilučių pertraukų. Štai pavyzdys, parodantis, kaip naudoti įterptąjį CSS su HTML dokumentu:





CSS box-shadow



Style 4





Išorinis CSS

Išorinis CSS yra idealiausias būdas pritaikyti stilius HTML dokumentams. Išoriniame stiliaus lape yra visos stiliaus taisyklės atskirame dokumente (.css faile), tada šis dokumentas susiejamas su HTML dokumentu naudojant žyma. Šis metodas yra geriausias būdas apibrėžti ir taikyti stilius HTML dokumentams, nes paveiktas HTML failas reikalauja minimalių žymėjimo pakeitimų. Štai pavyzdys, parodantis, kaip naudoti išorinį CSS su HTML dokumentu:

Sukurkite naują CSS failą naudodami .css pratęsimas. Dabar pridėkite šį CSS kodą to failo viduje:

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

Galiausiai sukurkite HTML dokumentą ir pridėkite šį kodą to dokumento viduje:

kaip įjungti „iPhone 7“ į atkūrimo režimą




CSS box-shadow




Style 4





Atminkite, kad CSS failas yra susietas su HTML dokumentu per žyma ir href atributas.

Visi trys aukščiau išvardyti metodai (vidinis CSS, įterptas CSS ir išorinis CSS) parodys tą pačią išvestį.

Padarykite savo tinklalapį elegantišką naudodami CSS

Naudodami CSS galite visiškai kontroliuoti savo tinklalapio stilių. Galite tinkinti kiekvieną HTML elementą naudodami įvairias CSS ypatybes. Viso pasaulio kūrėjai prisideda prie CSS atnaujinimų ir tai daro nuo pat jo išleidimo 1996 metais. Taigi pradedantiesiems yra daug ko išmokti!

Laimei, CSS yra patogus pradedantiesiems. Galite įgyti puikios praktikos, pradėję nuo kelių paprastų komandų ir pamatę, kur nuves jūsų kūrybiškumas.

Dalintis Dalintis „Tweet“ Paštu 10 paprastų CSS kodų pavyzdžių, kuriuos galite išmokti per 10 minučių

Reikia pagalbos dėl CSS? Pirmiausia išbandykite šiuos pagrindinius CSS kodų pavyzdžius, tada pritaikykite juos savo tinklalapiuose.

Skaityti toliau Susijusios temos
  • Programavimas
  • Interneto svetainės dizainas
  • CSS
Apie autorių Yuvraj Chandra(Paskelbti 60 straipsnių)

Yuvraj yra kompiuterių mokslo bakalauro studentas Delyje, Indijoje. Jis aistringas „Full Stack“ žiniatinklio kūrimui. Kai jis nerašo, jis tyrinėja skirtingų technologijų gylį.

Daugiau iš Yuvraj Chandra

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia