Ako používať CSS box-shadow: 13 trikov a príkladov

Ako používať CSS box-shadow: 13 trikov a príkladov

CSS je jazyk, ktorý vývojári používajú pri vytváraní štýlu webovej stránky. Ovláda, ako sa prvky HTML zobrazujú na obrazovke, na papieri alebo v akejkoľvek inej forme média. CSS poskytuje úplné možnosti prispôsobenia štýlu webovej stránky podľa vášho vlastného obrázku.





Pomocou CSS môžete zmeniť farbu pozadia prvku, štýl písma, farbu písma, tieň poľa, okraj a mnoho ďalších vlastností. V tejto príručke vás prevedieme niekoľkými efektívnymi spôsobmi použitia box-shadow.



Čo je to CSS box-shadow?

The box-tieň vlastnosť sa používa na použitie tieňa na prvky HTML. Je to jedna z najpoužívanejších vlastností CSS na úpravu štýlov alebo obrázkov.





Syntax CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. horizontálne posunutie: Ak je vodorovný posun kladný, tieň bude napravo od poľa. A ak je vodorovný posun negatívny, tieň bude naľavo od poľa.
  2. vertikálne posunutie: Ak je zvislý posun kladný, tieň bude pod rámčekom. A ak je vertikálny posun negatívny, tieň bude nad rámčekom.
  3. polomer rozmazania: Čím je hodnota vyššia, tým bude tieň rozmazanejší.
  4. polomer šírenia: Udáva, ako veľmi sa má tieň šíriť. Kladné hodnoty zvyšujú šírenie tieňa, záporné hodnoty rozpätie znižujú.
  5. Farba: Označuje farbu tieňa. Tiež podporuje akýkoľvek farebný formát ako rgba, hex alebo hsla.

Parametre rozostrenia, roztiahnutia a farby sú voliteľné. Najzaujímavejšou časťou box-shadow je, že na oddelenie hodnôt box-shadow môžete použiť čiarku ľubovoľný počet krát. Toto je možné použiť na vytvorenie viacerých ohraničení a tieňov na prvkoch.



1. Do ľavej, pravej a spodnej časti poľa pridajte tieň poľa

Veľmi tmavé tiene môžete pridať na tri strany (ľavú, pravú a dolnú časť) poľa pomocou nasledujúceho CSS tieňového poľa s cieľovým prvkom HTML:

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

Výkon:



2. Na všetky strany pridajte tieň poľa Dim

Svetlé tiene môžete pridať na všetky strany poľa pomocou nasledujúceho CSS box-shadow s cieľovým prvkom HTML:



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

Výkon:

3. Do spodnej a pravej strany pridajte tenký rámček

Tiene môžete do spodnej a pravej strany poľa pridať pomocou nasledujúceho CSS box-shadow s cieľovým prvkom HTML:

ako prejsť späť na klasický gmail
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Výkon:

4. Na všetky strany pridajte tmavý tieň

Tmavý tieň môžete pridať na všetky strany poľa pomocou nasledujúceho CSS tieňového boxu s cieľovým prvkom HTML:

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

Výkon:

5. Pridajte Spread Shadow na všetky strany

Roztienený tieň môžete pridať na všetky strany poľa pomocou nasledujúceho príkazu s cieľovým prvkom HTML:

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;

Výkon:

6. Pridajte tenký okrajový tieň na všetky strany

Jednoduchý okrajový tieň môžete pridať na všetky strany poľa pomocou nasledujúceho CSS s cieľovým prvkom HTML:

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;

Výkon:

7. Pridajte tieň poľa do spodnej a ľavej strany

Tieň môžete pridať na spodnú a ľavú stranu poľa pomocou nasledujúceho CSS tieňového boxu s cieľovým prvkom HTML:

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

Výkon:

8. Pridajte tmavý tieň na hornú a ľavú stranu, tmavý tieň do spodnej a pravej strany

Svetlý tieň môžete pridať na hornú a ľavú stranu poľa a tmavý tieň na spodnú a pravú stranu poľa pomocou nasledujúceho CSS s cieľovým prvkom HTML:

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

Výkon:

9. Pridajte na všetky strany tenký, farebný hraničný tieň

Jednoduchý farebný tieňový okraj môžete pridať na všetky strany poľa pomocou nasledujúceho CSS tieňového boxu s cieľovým prvkom HTML:

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

Výkon:

10. Pridajte viacfarebné hraničné tiene do spodnej a ľavej strany škatule

Do spodnej a ľavej strany poľa môžete pridať viacfarebné tiene okrajov pomocou nasledujúceho CSS s cieľovým prvkom HTML:

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

Výkon:

prenosné počítače, ktoré sa nabíjajú cez USB c

11. Do spodnej časti pridajte viacfarebné hraničné tiene

Do spodnej časti poľa môžete pridať viacfarebné tiene okrajov pomocou nasledujúceho CSS tieňového poľa s cieľovým prvkom HTML:

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;

Výkon:

12. Pridajte viacfarebné hraničné tiene do spodnej a pravej strany škatule

Do spodnej a pravej strany poľa môžete pridať viacfarebné tiene okrajov pomocou nasledujúceho CSS s cieľovým prvkom HTML:

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;

Výkon:

13. Pridajte svetlé tiene na ľavú a pravú stranu, rozložte tiene do spodnej časti

Svetlé tiene môžete pridať na ľavú a pravú stranu a tieň rozložiť do spodnej časti poľa pomocou nasledujúceho CSS box-shadow s cieľovým prvkom HTML:

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;

Výkon:

Integrujte CSS so stránkou HTML

Teraz viete, ako pridať chladné efekty tieňa pomocou CSS, a môžete ich ľahko integrovať s prvkami HTML niekoľkými spôsobmi.

Súvisiace: 11 Užitočných nástrojov na kontrolu, čistenie a optimalizáciu súborov CSS

Môžete ho vložiť do samotnej stránky HTML alebo ho pripojiť ako samostatný dokument. Existujú tri spôsoby, ako zahrnúť CSS do dokumentu HTML:

Interný CSS

Vložené alebo interné šablóny štýlov sú vložené do priečinka časti dokumentu HTML pomocou prípony element. Môžete vytvoriť ľubovoľný počet prvky v dokumente HTML, ale musia byť uzavreté medzi súborom a tagy. Tu je príklad demonštrujúci, ako používať interné CSS s dokumentom HTML:





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





Vložené CSS

Vložený CSS sa používa na pridanie jedinečných pravidiel štýlu k prvku HTML. Dá sa použiť s prvkom HTML prostredníctvom súboru štýl atribút. Atribút style obsahuje vlastnosti CSS vo forme „vlastnosť: hodnota“ oddelené bodkočiarkou ( ; ).

Súvisiace články: Naučte sa vytvárať dvojrozmerné webové stránky pomocou mriežky CSS

Všetky vlastnosti CSS musia byť v jednom riadku, t.j. medzi vlastnosťami CSS by nemali byť žiadne prerušenia riadkov. Tu je príklad demonštrujúci, ako používať vložené CSS s dokumentom HTML:





CSS box-shadow



Style 4





Externý CSS

Externé CSS sú najideálnejším spôsobom aplikácie štýlov na dokumenty HTML. Externý hárok štýlov obsahuje všetky pravidlá štýlu v samostatnom dokumente (súbor .css), tento dokument je potom prepojený s dokumentom HTML pomocou tag. Táto metóda je najlepšou metódou na definovanie a používanie štýlov na dokumenty HTML, pretože príslušný súbor HTML vyžaduje minimálne zmeny v značení. Tu je príklad demonštrujúci, ako používať externé CSS s dokumentom HTML:

Vytvorte nový súbor CSS pomocou prípony .css predĺženie. Teraz do tohto súboru pridajte nasledujúci kód CSS:

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

Nakoniec vytvorte dokument HTML a do tohto dokumentu pridajte nasledujúci kód:

čo je rýchlejší chrome alebo firefox




CSS box-shadow




Style 4





Upozorňujeme, že súbor CSS je prepojený s dokumentom HTML prostredníctvom tag a href atribút.

Všetky tri vyššie uvedené metódy (interný CSS, vložený CSS a externý CSS) zobrazia rovnaký výstup-

Urobte svoju webovú stránku elegantnou pomocou CSS

Používaním CSS máte plnú kontrolu nad štýlom svojej webovej stránky. Každý prvok HTML môžete prispôsobiť pomocou rôznych vlastností CSS. Vývojári z celého sveta prispievajú k aktualizáciám CSS a robia to od vydania v roku 1996. Začiatočníci sa preto majú čo učiť!

Našťastie je CSS vhodný pre začiatočníkov. Výbornú prax môžete získať tak, že začnete s niekoľkými jednoduchými príkazmi a zistíte, kam vás vaša kreativita zavedie.

zdieľam zdieľam Tweet E -mail 10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

Potrebujete pomoc s CSS? Na začiatok vyskúšajte tieto základné príklady kódu CSS a potom ich aplikujte na svoje webové stránky.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • Vzhľad stránky
  • CSS
O autorovi Yuvraj Chandra(60 publikovaných článkov)

Yuvraj je študentom informatiky na univerzite v Dillí v Indii. Je nadšený pre vývoj webových aplikácií Full Stack. Keď nepíše, skúma hĺbku rôznych technológií.

Viac od Yuvraja Chandru

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber