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

CSS yra kalba, kuria kūrėjai kuria tinklalapį. Jis kontroliuoja, kaip HTML elementai rodomi ekrane, popieriuje ar bet kurioje kitoje laikmenoje. CSS suteikia pilną pritaikymo galią, kad tinklalapį būtų galima stilizuoti pagal savo atvaizdą.

Naudodami CSS galite pakeisti elemento fono spalvą, šrifto stilių, šrifto spalvą, langelio šešėlį, paraštę ir daugybę kitų ypatybių. Apžvelgsime kai kuriuos efektyvius „box-shadow“ naudojimo būdus šiame vadove.

Kas yra CSS „box-shadow“?

The dėžutė-šešėlis ypatybė naudojama pritaikant šešėlį HTML elementams. Tai viena iš dažniausiai naudojamų CSS savybių, skirtų dėžučių ar vaizdų formavimui.

CSS sintaksė:

langelio šešėlis: [horizontalus poslinkis] [vertikalus poslinkis] [neryškumo spindulys] [pasirinktinis plitimo spindulys] [spalva];

1. horizontalus poslinkis: Jei horizontalus poslinkis yra teigiamas, šešėlis bus langelio dešinėje. Ir jei horizontalus poslinkis yra neigiamas, šešėlis bus kairėje langelio pusėje.
2. vertikalus poslinkis: Jei vertikalus poslinkis yra teigiamas, šešėlis bus žemiau langelio. Ir jei vertikalus poslinkis yra neigiamas, šešėlis bus virš langelio.
   instagram viewer
3. neryškus spindulys: Kuo didesnė vertė, tuo neryškesnis bus šešėlis.
4. plitimo spindulys: Tai reiškia, kiek šešėlis turėtų pasklisti. Teigiamos vertės didina šešėlio plitimą, neigiamos vertės mažina plitimą.
5. Spalva: Tai reiškia šešėlio spalvą. Be to, jis palaiko bet kokį spalvų formatą, pvz., Rgba, hex arba hsla.

Neryškumo, išplitimo ir spalvų parametrai yra neprivalomi. Įdomiausia langelio šešėlio dalis yra ta, kad kableliu galite atskirti langelio šešėlio reikšmes bet kiek kartų. Tai gali būti naudojama norint sukurti kelias elementų kraštines ir šešėlius.

1. Pridėkite „Dim“ langelio šešėlį langelio kairėje, dešinėje ir apačioje

Galite pridėti labai blankius šešėlius į tris langelio puses (kairę, dešinę ir apačią) naudodami šį langelio šešėlio CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Išvestis:

2. Pridėkite „Dim“ langelio šešėlį prie „Visos pusės“

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

langelis-šešėlis: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Išvestis:

3. Apačioje ir dešinėje pusėje pridėkite „Thin box-shadow“

Šešėlius galite pridėti langelio apačioje ir dešinėje naudodami šį langelio šešėlio CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: rgba (0, 0, 0, 0,15) 1,95 pikselio 1,95 pikselio 2,6 taško;

Išvestis:

4. Pridėkite tamsų langelį-šešėlį prie visų pusių

Tamsų šešėlį galite pridėti prie visų laukelio pusių naudodami šį langelio šešėlio CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Išvestis:

5. Pridėkite „Spread Shadow“ prie visų pusių

Galite pridėti išplėstinį šešėlį į visas laukelio puses naudodami šią komandą su savo tiksliniu HTML elementu:

langelis-šešėlis: 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švestis:

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

Galite pridėti paprastą kraštinės šešėlį į visas laukelio puses naudodami šį CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: 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 intarpas;

Išvestis:

7. Pridėkite langelio šešėlį prie apatinės ir kairės pusės

Galite pridėti šešėlį prie langelio apačios ir kairės pusės naudodami šį langelio šešėlio CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: rgba (0, 0, 0, 0,1) -4px9px25px -6px;

Išvestis:

8. Pridėkite „Dim“ langelio šešėlį ant viršutinės ir kairės pusės, tamsią šešėlį - prie apatinės ir dešinės pusės

Galite pridėti šviesų šešėlį į viršutinę ir kairę langelio puses, taip pat tamsų šešėlį į apatinę ir dešinę langelio puses naudodami šį CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0,8) -6px -2px 16px 0px;

Išvestis:

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

Galite pridėti paprastą spalvotą kraštinės šešėlį į visas langelio puses naudodami šį langelio šešėlio CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: rgba (3, 102, 214, 0,3) 0px 0px 0px 3px;

Išvestis:

10. Pridėkite kelis spalvotus krašto šešėlius prie dėžutės apačios ir kairės pusės

Galite pridėti kelis spalvotus kraštinės šešėlius į apatinę ir kairę langelio puses naudodami šį CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px intarpas, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px intarpas;

Išvestis:

11. Apačioje pridėkite kelis spalvotus krašto šešėlius

Galite pridėti kelis spalvotus kraštinės šešėlius į laukelio apačią naudodami šį langelio šešėlio CSS su savo 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švestis:

12. Prie dėžutės apačios ir dešinės pridėkite kelis spalvotus kraštinius šešėlius

Galite pridėti kelis spalvotus kraštinės šešėlius laukelio apačioje ir dešinėje naudodami šį CSS su savo 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) 20 taškų 20 taškų, rgba (240, 46, 170, 0,05) 25 taškų 25 taškų;

Išvestis:

13. Kairiajame ir dešiniajame šonuose pridėkite šviesius šešėlius, apačioje skleiskite šešėlį

Kairėje ir dešinėje pusėje galite pridėti šviesių šešėlių ir išskleisti šešėlį laukelio apačioje naudodami šį langelio šešėlio CSS su savo tiksliniu HTML elementu:

langelis-šešėlis: 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švestis:

Integruoti CSS su HTML puslapiu

Dabar jūs žinote, kaip pridėti šaunių „box-shadow“ efektų naudojant CSS, juos galite lengvai integruoti į HTML elementus keliais būdais.

Susijęs: 11 naudingų įrankių CSS failams patikrinti, išvalyti ir optimizuoti

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

Vidinis CSS

Įterptosios arba vidinės stiliaus lentelės įterpiamos į HTML dokumento skyrius naudojant elementas. Galite sukurti bet kokį skaičių elementai HTML dokumente, tačiau jie turi būti uždaryti tarp ir žymos. Štai pavyzdys, parodantis, kaip naudoti vidinę CSS su HTML dokumentu:

4 stilius

Įterpta CSS

Įterptoji CSS naudojama norint pridėti unikalių stiliaus taisyklių prie HTML elemento. Jį galima naudoti su HTML elementu per stiliaus atributas. Stiliaus atribute yra CSS ypatybės „nuosavybė: vertė“ atskirtas kabliataškiu (;).

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

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

4 stilius

Išorinė CSS

Išorinė 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 pritaikyti stilius HTML dokumentams, nes paveiktam HTML failui reikia minimalių žymėjimo pakeitimų. Štai pavyzdys, parodantis, kaip naudoti išorinę CSS su HTML dokumentu:

Sukurkite naują CSS failą naudodami .css pratęsimas. Dabar į failą įtraukite šį CSS kodą:

.Antraštė {
text-align: centre;
}
.image-box {
rodyti: blokuoti;
paraštė kairėje: automatinė;
paraštė-dešinė: automatinė;
langelis-šešėlis: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Galiausiai sukurkite HTML dokumentą ir įtraukite šį kodą į šį dokumentą:

4 stilius

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

Visi pirmiau minėti trys metodai (vidinis CSS, vidinis CSS ir išorinis CSS) rodys tą patį išvesties

Padarykite savo tinklalapį elegantišką naudodami CSS

Naudodamiesi CSS jūs visiškai kontroliuojate savo tinklalapio stilių. Kiekvieną HTML elementą galite tinkinti naudodami įvairias CSS ypatybes. Devizai iš viso pasaulio prisideda prie CSS atnaujinimų ir tai daro nuo pat jos išleidimo 1996 m. Pradedantiesiems tenka daug ko išmokti!

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

10 paprastų CSS kodo pavyzdžių, kuriuos galite sužinoti per 10 minučių

Norite sužinoti daugiau apie CSS naudojimą? Iš pradžių išbandykite šiuos pagrindinius CSS kodo pavyzdžius, tada pritaikykite juos savo tinklalapiuose.

Skaitykite toliau

Apie autorių