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

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

CSS ir valoda, ko izstrādātāji izmanto, veidojot tīmekļa lapu. Tas kontrolē, kā HTML elementi tiek parādīti ekrānā, uz papīra vai jebkādā citā multivides formā. CSS nodrošina pilnu pielāgošanas iespēju, lai veidotu tīmekļa lapu pēc sava attēla.





Izmantojot CSS, varat mainīt elementa fona krāsu, fonta stilu, fonta krāsu, lodziņa ēnu, piemali un daudzus citus rekvizītus. Šajā rokasgrāmatā mēs jums parādīsim dažus efektīvus kastes ēnu izmantošanas veidus.



Kas ir CSS box-shadow?

The kaste-ēna īpašums tiek izmantots, lai HTML elementiem piemērotu ēnu. Tā ir viena no visbiežāk izmantotajām CSS īpašībām kastīšu vai attēlu veidošanai.





CSS sintakse:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. horizontālais nobīde: Ja horizontālais nobīde ir pozitīva, ēna būs pa labi no lodziņa. Un, ja horizontālais nobīde ir negatīva, ēna būs pa kreisi no lodziņa.
  2. vertikālā 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 kastes.
  3. izplūšanas rādiuss: Jo augstāka vērtība, jo neskaidrāka būs ēna.
  4. izkliedes rādiuss: Tas norāda, cik lielā mērā ēnai vajadzētu izplatīties. Pozitīvas vērtības palielina ēnas izplatību, negatīvās vērtības samazina izplatību.
  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, izkliedes un krāsu parametri nav obligāti. Visinteresantākā lodziņa ēnas daļa ir tā, ka varat izmantot komatu, lai atdalītu lodziņa ēnas vērtības neierobežotu skaitu reižu. To var izmantot, lai uz elementiem izveidotu vairākas robežas un ēnas.



1. Kastes kreisajā, labajā un apakšā pievienojiet blāvu lodziņu-ēnu

Jūs varat pievienot ļoti blāvas ēnas lodziņa trim pusēm (pa kreisi, pa labi un apakšā), izmantojot šādu lodziņa ēnu CSS ar savu mērķa HTML elementu:

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

Izeja:



2. Visām pusēm pievienojiet blāvu lodziņu-ēnu

Jūs varat pievienot gaišas ēnas visām lodziņa malām, izmantojot šādu lodziņa ēnu CSS ar savu mērķa HTML elementu:



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

Izeja:

3. Pievienojiet plānu un ēnu apakšējo un labo pusi

Jūs varat pievienot ēnas lodziņa apakšējai un labajai pusei, izmantojot šādu lodziņa ēnu CSS ar savu mērķa HTML elementu:

kā atgriezties klasiskajā Gmail
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Izeja:

4. Pievienojiet tumšo lodziņu ēnu visām pusēm

Jūs varat pievienot tumšas ēnas visām lodziņa malām, izmantojot šo lodziņa ēnas CSS ar savu mērķa HTML elementu:

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

Izeja:

5. Pievienojiet Spread Shadow uz visām pusēm

Jūs varat pievienot izkliedētu ēnu visām lodziņa malām, izmantojot šo komandu ar savu 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. Visām malām pievienojiet plānu robežu ēnu

Jūs varat pievienot vienkāršu apmales ēnu visām lodziņa malām, izmantojot šo CSS ar savu 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 inset;

Izeja:

7. Pievienojiet lodziņu ēnu apakšējai un kreisajai pusei

Jūs varat pievienot ēnu lodziņa apakšējai un kreisajai pusei, izmantojot šādu lodziņa ēnas CSS ar savu mērķa HTML elementu:

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

Izeja:

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

Jūs varat pievienot gaišu ēnu lodziņa augšējai un kreisajai pusei, kā arī tumšo ē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. Visām malām pievienojiet plānu, krāsainu apmales ēnu

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

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

Izeja:

10. Pievienojiet daudzkrāsainas apmales ēnas kastes apakšējai un kreisajai pusei

Lodziņa apakšējai un kreisajai pusei varat pievienot vairākas krāsainas apmales, izmantojot šo CSS ar savu mērķa 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;

Izeja:

kā atgriezties pie vecā gmail formāta

11. Pievienojiet apakšai vairākas krāsainas apmales

Lodziņa apakšdaļai varat pievienot vairākas krāsainas apmales, izmantojot šo lodziņa ēnu CSS ar 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 daudzkrāsainas apmales ēnas kastes apakšējai un labajai pusei

Lodziņa apakšējai un labajai pusei varat pievienot vairākas krāsainas apmales, izmantojot šo CSS ar savu 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) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Izeja:

13. Pievienojiet gaišas ēnas kreisajai un labajai pusei, izklājiet ēnu apakšā

Jūs varat pievienot gaišas ēnas kreisajai un labajai pusei un izkliedēt ēnu lodziņa apakšā, izmantojot šādu lodziņa ēnu CSS ar savu mērķa 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;

Izeja:

Integrējiet CSS ar HTML lapu

Tagad jūs zināt, kā pievienot atdzist kastes ēnu efektus, izmantojot CSS, un tos var 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

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

Iekšējais CSS

Iebūvētās vai iekšējās stila lapas tiek ievietotas HTML dokumenta sadaļā, izmantojot elements. Jūs varat izveidot jebkuru skaitu elementi HTML dokumentā, bet tiem jābūt ievietotiem starp un tagus. Šeit ir piemērs, kas parāda, kā izmantot iekšējo CSS ar 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





Iekļauts CSS

Iekļauto CSS izmanto, lai HTML elementam pievienotu unikālus stila noteikumus. To var izmantot kopā ar HTML elementu, izmantojot stils atribūts. Stila atribūtā ir CSS rekvizīti formā 'īpašums: vērtība' atdalīts ar semikolu ( ; ).

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

Visiem CSS rekvizītiem jābūt vienā rindā, t.i., starp CSS rekvizītiem nedrīkst būt rindu pārtraukumu. Šeit ir piemērs, kas parāda, kā izmantot iekļauto CSS ar HTML dokumentu:





CSS box-shadow



Style 4





Ārējais CSS

Ārējais CSS ir ideālākais veids, kā piemērot stilus HTML dokumentiem. Ā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 stilu noteikšanai un piemērošanai HTML dokumentiem, jo ​​ietekmētajam HTML failam ir nepieciešamas minimālas izmaiņas iezīmēšanā. Šeit ir piemērs, kas parāda, kā izmantot ārēju CSS ar HTML dokumentu:

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

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

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

kā ieslēgt Apple TV bez tālvadības pults




CSS box-shadow




Style 4





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

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

Padariet savu vietni elegantu, izmantojot CSS

Izmantojot CSS, jūs pilnībā kontrolējat savas tīmekļa lapas stilu. Jūs varat pielāgot katru HTML elementu, izmantojot dažādus CSS rekvizītus. Izstrādātāji no visas pasaules piedalās CSS atjauninājumos, un viņi to dara kopš tā izlaišanas 1996. gadā. Tādējādi iesācējiem ir daudz jāmācās!

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

Kopīgot Kopīgot Čivināt E -pasts 10 vienkārši CSS koda piemēri, kurus varat iemācīties 10 minūtēs

Vai nepieciešama palīdzība saistībā ar CSS? Vispirms izmēģiniet šos pamata CSS koda piemērus, pēc tam izmantojiet tos savām tīmekļa lapām.

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • Web dizains
  • CSS
Par autoru Yuvraj Chandra(60 raksti publicēti)

Yuvraj ir datorzinātņu bakalaura students Deli universitātē, Indijā. Viņš aizraujas ar Full Stack tīmekļa izstrādi. Kad viņš neraksta, viņš pēta dažādu tehnoloģiju dziļumu.

Vairāk no Yuvraj Chandra

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu