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

CSS je jazyk, ktorý vývojári používajú na úpravu webových stránok. Kontroluje, ako sa prvky HTML zobrazujú na obrazovke, na papieri alebo v akejkoľvek inej forme média. CSS poskytuje úplnú možnosť prispôsobenia na prispôsobenie webovej stránky podľa vášho vlastného obrázka.

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

Čo je to CSS box-shadow?

The tieňový box Vlastnosť sa používa na použitie tieňa na prvky HTML. Je to jedna z najpoužívanejších vlastností CSS pre tvarovanie škatúľ alebo obrázkov.

Syntax CSS:

tieňový box: [horizontálne posunutie] [vertikálne posunutie] [polomer rozmazania] [voliteľný polomer rozloženia] [farba];

1. horizontálne odsadenie: Ak je vodorovné odsadenie kladné, tieň bude vpravo od rámčeka. A ak je vodorovné odsadenie záporné, tieň bude naľavo od rámčeka.
2. vertikálne odsadenie: Ak je vertikálne posunutie kladné, tieň bude pod rámčekom. A ak je vertikálny posun záporný, tieň bude nad rámčekom.
instagram viewer
3. polomer rozmazania: Čím vyššia je hodnota, tým viac bude tieň rozmazaný.
4. polomer šírenia: Znamená to, koľko by sa mal tieň šíriť. Pozitívne hodnoty zvyšujú šírenie tieňa, negatívne hodnoty rozširujú.
5. Farba: Znamená to farbu tieňa. Podporuje tiež akýkoľvek farebný formát, ako je rgba, hex alebo hsla.

Parametre rozmazania, šírenia a farieb sú voliteľné. Najzaujímavejšou časťou box-shadow je, že na oddelenie hodnôt box-shadow môžete použiť čiarku ľubovoľne krát. To možno použiť na vytvorenie viacerých orámovaní a tieňov na prvkoch.

1. Pridajte Tlmený tieň poľa do ľavej, pravej a dolnej časti rámčeka

Môžete pridať veľmi slabé tiene na tri strany (ľavú, pravú a spodnú časť) poľa pomocou nasledujúceho CSS box-shadow s cieľovým prvkom HTML:

tieň poľa: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Výkon:

2. Pridajte Tlmený tieň políčka na Všetky strany

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

tieň boxu: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Výkon:

3. Pridajte tenký rámček tieňa na spodnú a pravú stranu

Tiene môžete pridať na spodnú a pravú stranu poľa pomocou nasledujúceho CSS box-shadow s cieľovým prvkom HTML:

tieň poľa: rgba (0, 0, 0, 0,15) 1,95px 1,95px 2,6px;

Výkon:

4. Pridajte Tmavý box-tieň na Všetky strany

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

tieň poľa: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Výkon:

5. Pridajte Spread Shadow na všetky strany

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

tieňový box: 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 na všetky strany tenký okrajový tieň

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

tieňový box: 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 vložka;

Výkon:

7. Pridajte tieň do dolnej a ľavej strany

Tieň môžete pridať na spodnú a ľavú stranu poľa pomocou nasledujúceho CSS box-shadow s cieľovým prvkom HTML:

tieň poľa: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Výkon:

8. Pridajte Tlmený tieň políčka na hornú a ľavú stranu, tmavý tieň na spodnú a pravú stranu

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

tieňový box: 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ý okrajový tieň

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

tieň poľa: rgba (3, 102, 214, 0,3) 0px 0px 0px 3px;

Výkon:

10. Pridajte viac farebných okrajových tieňov do spodnej a ľavej strany škatule

Môžete pridať viac farebných okrajových tieňov na spodnú a ľavú stranu poľa pomocou nasledujúceho CSS s vašim cieľovým prvkom HTML:

tieň poľa: rgba (50, 50, 93, 0,25) vložka 0px 30px 60px -12px, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px vložka;

Výkon:

11. Pridajte viac farebných okrajových tieňov do spodnej časti

Do spodnej časti poľa môžete pridať viac farebných okrajových tieňov pomocou nasledujúceho CSS box-shadow s cieľovým prvkom HTML:

tieňový box: 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 viac farebných okrajových tieňov do spodnej a pravej strany škatule

Pomocou nasledujúceho CSS s cieľovým prvkom HTML môžete pridať viac farebných okrajových tieňov na spodnú a pravú stranu poľa:

tieňový box: 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, roztiahnite tieň na dno

Môžete pridať svetlé tiene na ľavú a pravú stranu a rozšíriť tieň na spodok poľa pomocou nasledujúceho CSS box-shadow s vaším cieľovým prvkom HTML:

tieňový box: 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ť vynikajúce efekty tieňov pomocou CSS, a môžete ich ľahko integrovať do prvkov HTML viacerými spôsobmi.

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

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

Interné CSS

Vložené alebo interné tabuľky štýlov sú vložené do súboru časť dokumentu HTML pomocou element. Môžete vytvoriť ľubovoľný počet prvky v dokumente HTML, ale musia byť uzavreté medzi a značky. Tu je príklad demonštrujúci, ako používať interné CSS s dokumentom HTML:

Štýl 4

Vložené CSS

Inline CSS sa používa na pridanie jedinečných pravidiel štýlu do prvku HTML. Môže byť použitý s prvkom HTML prostredníctvom štýl atribút. Atribút style obsahuje vlastnosti CSS vo forme "property: value" oddelené bodkočiarkou (;).

Súvisiace: Naučte sa, ako vytvárať dvojrozmerné webové stránky pomocou CSS Grid

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

Štýl 4

Externé CSS

Externý CSS je najideálnejší spôsob, ako aplikovať štýly na dokumenty HTML. Externá šablóna štýlov obsahuje všetky pravidlá štýlov v samostatnom dokumente (súbor .css), tento dokument je potom prepojený s dokumentom HTML pomocou značka. Táto metóda je najlepšou metódou na definovanie a použitie štýlov na dokumenty HTML, pretože ovplyvnený súbor HTML vyžaduje minimálne zmeny v označení. Tu je príklad demonštrujúci, ako používať externé CSS s dokumentom HTML:

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

. hlavička {
zarovnanie textu: na stred;
}
.obrázok {
displej: blok;
okraj vľavo: auto;
pravý okraj: auto;
tieň poľa: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

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

Štýl 4

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

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

Vytvorte svoju webovú stránku elegantnou pomocou CSS

Použití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 jeho vydania v roku 1996. Začiatočníci sa ako tak majú čo učiť!

Našťastie je CSS vhodný pre začiatočníkov. Môžete získať vynikajúce postupy tým, že začnete niekoľkými jednoduchými príkazmi a uvidíte, kam vás vaša kreativita zavedie.

10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

Chcete sa dozvedieť viac o používaní CSS? Na začiatok vyskúšajte tieto základné príklady kódu CSS, ktoré potom môžete použiť na svoje vlastné webové stránky.

Prečítajte si Ďalej

O autorovi