„Box Shadow CSS“ pamoka - kaip pridėti kritimo šešėlį prie bet kurio HTML elemento

Naudodami CSS ypatybę, bet kuriam HTML elementui galime pridėti šešėlį box-shadow. Štai kaip.

Pagrindinio lašo šešėlio pridėjimas

Pirmiausia nustatykime keletą pagrindinių HTML elementų, kad pridėtume šešėlius:

 Box1 Box2 Box3 

Tada pridėkite keletą pagrindinių CSS:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

Rezultatas yra tik trys juodos dėžės, į kurias mums bus lengva pridėti šešėlių, paskambindami jų unikaliais ID:

HTML elementų sąranka

Norėdami pridėti pagrindinį šešėlį, box-shadownaudokime 1 langelio ypatybę:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Į 1 langelį įtraukite pagrindinį šešėlį

Čia mes turime 3 parametrus. Pirmieji 2 yra atitinkamai x poslinkis ir y poslinkis. Jie nustato šešėlio vietą.

Poslinkis yra susijęs su kilme, kuri HTML visada yra viršutinis kairysis elemento kampas. Teigiamas x poslinkis perkels šešėlį į dešinę, o teigiamas y poslinkis - į apačią.

Trečias parametras yra jūsų šešėlio spalva.

Atminkite, kad nors mes čia ir naudojome elementus, box-shadownuosavybė gali būti pritaikyta ir bet kuriam kitam HTML elementui.

Pridėti suliejimo spindulį

Jei norime, kad šešėlis atrodytų kiek tikroviškiau, norėsime eksperimentuoti su blur-radiusparametru.

Šis parametras kontroliuoja, kiek reikia neryškinti šešėlį, kad jis taptų didesnis ir lengvesnis. Taikykime jį 2 langelyje:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
2 langelio pridėjimas suliejimo spinduliu

4 taškų reikšmė nustato suliejimo spindulį, kad jis būtų pritaikytas mūsų šešėliui.

Skleidimo spindulio pridėjimas

Jei norime kontroliuoti šešėlio dydį, galime naudoti spread-radiusparametrą, kuris kontroliuoja, kiek šešėlis auga ar susitraukia.

Prie 2 langelio pridėkime 8 taškų plitimo spindulį:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Prie 2 langelio pridėjus plitimo spindulį, be neryškumo

Prisiminkite šių parametrų eiliškumą!

Kelių šešėlių sujungimas vienoje nuosavybėje

Jei norime pasigrožėti, galime pridėti kelis kritimo šešėlius prie elemento naudodami vieną box-shadowypatybę.

Padarykime tai su 3 langeliu, tuo pačiu pridėdami mėlyną ir žalią šešėlį:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
sujungti kelis metamus šešėlius

Premija: sukurkite pradinį šešėlį

Nors tai nesukurs šešėlio, insetparametras taip pat gali būti naudojamas kartu su box-shadownuosavybe.

Kaip rodo pavadinimas, šis parametras sukuria įterptą šešėlį (ty šešėlį dėžutės viduje).

insetParametras gali būti patalpintas arba pradžioje arba tuo, pabaigoje

box-shadownuosavybė. Čia mes parodome jo naudojimą su blockquoteelementu.

HTML:

 The key to success is to start before you're ready. 

— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Sukurkite įdėtą šešėlį

Žinoma, galite pridėti šiek tiek neryškumo ir išplitimo, kad padidintumėte šešėlį, ar net kelis šešėlius:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Įkeltas šešėlis kartu su šešėliu

Turėdami šią box-shadownuosavybę galime lengvai išskirti tinklalapio elementus, kad sukurtume gražų 3D apšvietimo efektą.

Jei norite patys eksperimentuoti, pateikiu kodinį rašiklį, kurį sukūriau su šioje pamokoje naudojamais pavyzdžiais.

Pažaisk ir pamatyk, ką gali sugalvoti!

Norite pamatyti daugiau žiniatinklio kūrimo patarimų ir žinių?

  • Prenumeruokite mano savaitinį naujienlaiškį
  • Apsilankykite mano tinklaraštyje 1000 mylių pasaulyje
  • Sekite mane „Twitter“