Kā izmantot CSS box-shadow: 13 triki un piemēri

CSS ir valoda, kuru izstrādātāji izmanto tīmekļa lapas veidošanai. Tas kontrolē, kā HTML elementi tiek parādīti uz ekrāna, uz papīra vai jebkura cita veida nesēja. CSS nodrošina pilnu pielāgošanās iespēju, lai veidotu vietni pēc sava attēla.

Izmantojot CSS, varat mainīt elementa fona krāsu, fonta stilu, fonta krāsu, lodziņa ēnu, piemali un daudzas citas īpašības. Mēs iepazīsimies ar dažiem efektīviem lodziņa ēnas izmantošanas veidiem šajā ceļvedī.

Kas ir CSS box-shadow?

The kaste-ēna rekvizīts tiek izmantots, lai HTML elementiem piemērotu ēnu. Tas ir viens no visbiežāk izmantotajiem CSS īpašumiem kastīšu vai attēlu veidošanai.

CSS sintakse:

box-shadow: [horizontāls nobīde] [vertikāls nobīde] [izplūduma rādiuss] [pēc izvēles izplatīšanās rādiuss] [krāsa];

1. horizontāls nobīde: Ja horizontālais nobīde ir pozitīva, ēna būs lodziņa labajā pusē. Un, ja horizontālais nobīde ir negatīva, ēna būs pa kreisi no lodziņa.
2. vertikāls nobīde: Ja vertikālais nobīde ir pozitīva, ēna būs zem lodziņa. Un, ja vertikālais nobīde ir negatīva, ēna būs virs lodziņa.
instagram viewer
3. izplūduma rādiuss: Jo augstāka vērtība, jo ēna būs izplūdušāka.
4. izplatīšanās rādiuss: Tas norāda, cik daudz ēnai vajadzētu izplatīties. Pozitīvas vērtības palielina ēnas izplatīšanos, negatīvās vērtības samazina izplatīšanos.
5. Krāsa: Tas apzīmē ēnas krāsu. Turklāt tas atbalsta jebkuru krāsu formātu, piemēram, rgba, hex vai hsla.

Izplūšanas, izplatīšanās un krāsu parametri nav obligāti. Visinteresantākā lodziņa-ēnas daļa ir tā, ka jūs varat izmantot komatu, lai vairākas reizes atdalītu lodziņa-ēnas vērtības. To var izmantot, lai izveidotu vairākas apmales un ēnas uz elementiem.

1. Pievienojiet Dim lodziņa ēnu lodziņa kreisajā, labajā un apakšējā daļā

Varat pievienot ļoti blāvas ēnas trim lodziņa pusēm (pa kreisi, pa labi un apakšā), izmantojot šo HTML-HTML lodziņa-ēnas CSS:

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

Izeja:

2. Pievienojiet izvēlnei Visas malas rūtiņu Dim

Varat pievienot gaišas ēnas visām lodziņa malām, izmantojot šo HTML-HTML lodziņa ēnas CSS:

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

Izeja:

3. Apakšējā un labajā pusē pievienojiet Thin box-shadow

Varat pievienot ēnas lodziņa apakšdaļai un labajai pusei, izmantojot šo HTML-box box-shadow CSS:

box-shadow: rgba (0, 0, 0, 0,15) 1,95 pikseļi 1,95 pikseļi 2,6 pikseļi;

Izeja:

4. Pievienojiet mapei Visas malas tumšu lodziņu

Varat pievienot tumšu ēnu visām lodziņa malām, izmantojot šo HTML-HTML lodziņa ēnas CSS:

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

Izeja:

5. Pievienojiet Spread Shadow visām pusēm

Varat pievienot izplatīto ēnu visām lodziņa pusēm, izmantojot šo komandu ar mērķa 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;

Izeja:

6. Pievienojiet plānu sānu ēnu visām malām

Varat pievienot vienkāršu apmales ēnu visām lodziņa malām, izmantojot šo CSS ar mērķa 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 ieliktnis;

Izeja:

7. Pievienojiet lodziņa ēnu apakšējā un kreisajā pusē

Ēnu var pievienot lodziņa apakšdaļai un kreisajai pusei, izmantojot šo HTML-HTML lodziņa-ēnas CSS:

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

Izeja:

8. Pievienojiet Dim lodziņa ēnu augšējai un kreisajai pusei, tumšu ēnu - apakšējai un labajai pusei

Jūs varat pievienot gaišu ēnu lodziņa augšdaļai un kreisajai pusei, kā arī tumšu ēnu lodziņa apakšējai un labajai pusei, izmantojot šo CSS ar savu mērķa HTML elementu:

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

Izeja:

9. Pievienojiet plānām, krāsainām apmales ēnām visām malām

Jūs varat pievienot vienkāršu krāsainu apmales ēnu visām lodziņa pusēm, izmantojot šo lodziņa-ēnas CSS ar mērķa HTML elementu:

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

Izeja:

10. Pievienojiet vairākas krāsainas apmales ēnas lodziņa apakšējai un kreisajai pusei

Varat pievienot vairākas krāsainas apmales ēnas lodziņa apakšējā un kreisajā pusē, izmantojot šo CSS ar savu mērķa HTML elementu:

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

Izeja:

11. Apakšā pievienojiet vairākas krāsainas apmales ēnas

Varat pievienot vairākas krāsainas apmales ēnas lodziņa apakšpusē, izmantojot šo lodziņa-ēnas CSS ar savu mērķa 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;

Izeja:

12. Pievienojiet vairākas krāsainas apmales ēnas lodziņa apakšējai un labajai pusei

Varat pievienot vairākas krāsainas apmales ēnas lodziņa apakšdaļā un labajā pusē, izmantojot šo CSS ar mērķa 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 pikseļi 20 pikseļi, rgba (240, 46, 170, 0,05) 25 pikseļi 25 pikseļi;

Izeja:

13. Pievienojiet gaismas ēnas kreisajā un labajā pusē, izklājiet ēnu apakšā

Kreisajā un labajā pusē varat pievienot gaišas ēnas un izplatīt ēnu lodziņa apakšdaļā, izmantojot šo HTML-HTML lodziņa-ēnas CSS:

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;

Izeja:

Integrēt CSS ar HTML lapu

Tagad jūs zināt, kā pievienot atdzist lodziņa-ēnas efektus, izmantojot CSS, jūs tos varat viegli integrēt ar HTML elementiem vairākos veidos.

Saistīts: 11 noderīgi rīki CSS failu pārbaudei, tīrīšanai un optimizēšanai

Jūs varat to iegult pašā HTML lapā vai pievienot kā atsevišķu dokumentu. Ir trīs veidi, kā CSS iekļaut HTML dokumentā:

Iekšējā CSS

Ievietotās vai iekšējās stila lapas tiek ievietotas HTML dokumenta sadaļa, izmantojot elements. Jūs varat izveidot jebkuru skaitu elementi HTML dokumentā, taču tiem jābūt ievietotiem starp un tagus. Šis piemērs parāda, kā izmantot iekšējo CSS ar HTML dokumentu:

4. stils

Iekļauts CSS

Iekļauto CSS izmanto, lai HTML elementam pievienotu unikālas stila kārtulas. To var izmantot ar HTML elementu, izmantojot stils atribūts. Stila atribūts satur CSS īpašības "īpašums: vērtība" atdalīts ar semikolu (;).

Saistīts: Uzziniet, kā izveidot divdimensiju vietnes ar CSS režģi

Visiem CSS rekvizītiem jābūt vienā rindā, t.i., starp CSS rekvizītiem nedrīkst būt līniju pārtraukumi. Lūk, piemērs, kas parāda, kā iekļauto CSS ar HTML dokumentu:

4. stils

Ārējā CSS

Ārējais CSS ir ideālākais veids, kā HTML stilos pielietot stilus. Ārējā stila lapā ir visi stila noteikumi atsevišķā dokumentā (.css failā), pēc tam šis dokuments tiek saistīts ar HTML dokumentu, izmantojot tagu. Šī metode ir labākā metode, lai definētu un piemērotu stilus HTML dokumentiem, jo ​​ietekmētajam HTML failam ir nepieciešamas minimālas izmaiņas iezīmējumā. Šis piemērs parāda, kā izmantot ārēju CSS ar HTML dokumentu:

Izveidojiet jaunu CSS failu ar .css pagarinājums. Tagad failā pievienojiet šādu CSS kodu:

.heading {
text-align: center;
}
.image-box {
displejs: bloks;
atstarpe pa kreisi: automātiska;
margin-right: auto;
box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Visbeidzot, izveidojiet HTML dokumentu un dokumentā pievienojiet šādu kodu:

4. stils

Ņemiet vērā, ka CSS fails ir saistīts ar HTML dokumentu, izmantojot un href atribūts.

Visas iepriekš minētās trīs metodes (iekšējā CSS, iekšējā CSS un ārējā CSS) parādīs to pašu

Padariet savu vietni elegantu, izmantojot CSS

Izmantojot CSS, jūs pilnībā kontrolējat savas tīmekļa lapas stilu. Katru HTML elementu var pielāgot, izmantojot dažādas CSS īpašības. Izstrādātāji no visas pasaules veicina CSS atjauninājumus, un viņi to ir darījuši kopš tā izlaišanas 1996. gadā. Iesācējiem ir daudz jāmācās!

Par laimi, CSS ir draudzīga iesācējiem. Jūs varat iegūt izcilu praksi, sākot ar dažām vienkāršām komandām un redzot, kur jūsu radošums jūs aizved.

10 vienkārši CSS kodu piemēri, kurus varat uzzināt 10 minūtēs

Vai vēlaties uzzināt vairāk par CSS izmantošanu? Vispirms izmēģiniet šos pamata CSS koda piemērus, pēc tam tos lietojiet savās tīmekļa lapās.

Lasiet Tālāk

Par autoru