Jak používat CSS box-shadow: 13 triků a příkladů

CSS je jazyk, který vývojáři používají ke stylování webových stránek. Řídí, jak se prvky HTML zobrazují na obrazovce, na papíře nebo v jakékoli jiné formě média. CSS poskytuje plnou sílu pro přizpůsobení k přizpůsobení webové stránky vašemu vlastnímu obrázku.

Pomocí CSS můžete změnit barvu pozadí prvku, styl písma, barvu písma, stínování rámečku, okraj a mnoho dalších vlastností. V této příručce vás provedeme některými efektivními způsoby využití stínového pole.

Co je CSS box-shadow?

The stín stínu Vlastnost se používá k použití stínu na prvky HTML. Je to jedna z nejpoužívanějších vlastností CSS pro styling boxů nebo obrázků.

Syntaxe CSS:

stín boxu: [horizontální posun] [vertikální posun] [poloměr rozmazání] [volitelný poloměr šíření] [barva];

1. vodorovné odsazení: Pokud je vodorovné odsazení kladné, bude stín vpravo od rámečku. A pokud je vodorovné odsazení záporné, stín bude nalevo od rámečku.
2. svislé odsazení: Pokud je svislé posunutí kladné, bude stín pod rámečkem. A pokud je svislé posunutí záporné, stín bude nad rámečkem.
instagram viewer
3. poloměr rozostření: Čím vyšší je hodnota, tím více bude stín rozmazaný.
4. poloměr šíření: Znamená to, jak moc by se měl stín šířit. Kladné hodnoty zvyšují šíření stínu, záporné hodnoty šíření šíří.
5. Barva: Znamená to barvu stínu. Podporuje také libovolný barevný formát, jako je rgba, hex nebo hsla.

Parametry rozmazání, šíření a barvy jsou volitelné. Nejzajímavější částí stínového pole je to, že můžete použít čárku k oddělení hodnot stínového pole libovolněkrát. To lze použít k vytvoření více ohraničení a stínů na prvcích.

1. Přidejte stínovaný rámeček do levé, pravé a spodní části rámečku

Můžete přidat velmi slabé stíny na tři strany (vlevo, vpravo a dole) pole pomocí následujícího CSS box-shadow s vaším cílovým prvkem HTML:

stín boxu: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Výstup:

2. Přidejte na všechny strany tlumený stín

Světlé stíny můžete přidat na všechny strany rámečku pomocí následujícího CSS box-shadow s cílovým prvkem HTML:

stín boxu: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Výstup:

3. Přidejte tenký rámeček do spodní a pravé strany

Můžete přidat stíny na spodní a pravou stranu rámečku pomocí následujícího CSS box-shadow s cílovým prvkem HTML:

stín boxu: rgba (0, 0, 0, 0,15) 1,95px 1,95px 2,6px;

Výstup:

4. Přidejte na všechny strany tmavý rámeček

Tmavý stín můžete přidat na všechny strany rámečku pomocí následujícího CSS box-shadow s cílovým prvkem HTML:

stín boxu: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Výstup:

5. Přidejte Spread Shadow na všechny strany

Stín šíření můžete přidat na všechny strany rámečku pomocí následujícího příkazu s cílovým prvkem HTML:

stín boxu: 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ýstup:

6. Přidejte na všechny strany tenký okrajový stín

Jednoduchý okrajový stín můžete přidat na všechny strany rámečku pomocí následujícího CSS s cílovým prvkem HTML:

stín boxu: 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ýstup:

7. Přidejte stín na spodní a levou stranu

Můžete přidat stín do spodní a levé strany rámečku pomocí následujícího CSS rámečku-stín s cílovým prvkem HTML:

stín boxu: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Výstup:

8. Přidejte stínovaný rámeček na horní a levou stranu, tmavý stín na spodní a pravou stranu

Světlý stín můžete přidat do horní a levé strany rámečku a tmavý stín do spodní a pravé strany rámečku pomocí následujícího CSS s vaším cílovým prvkem HTML:

stín boxu: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0,8) -6px -2px 16px 0px;

Výstup:

9. Přidejte na všechny strany tenký, barevný okrajový stín

Jednoduchý barevný okrajový stín můžete přidat na všechny strany rámečku pomocí následujícího CSS rámečku stín s cílovým prvkem HTML:

stín boxu: rgba (3, 102, 214, 0,3) 0px 0px 0px 3px;

Výstup:

10. Přidejte více barevných okrajových stínů do spodní a levé strany rámečku

Můžete přidat více barevných okrajových stínů do spodní a levé strany rámečku pomocí následujícího CSS s cílovým prvkem HTML:

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

Výstup:

11. Přidejte do dolní části více barevných okrajových stínů

Do dolní části rámečku můžete přidat více barevných okrajových stínů pomocí následujícího CSS box-shadow s cílovým prvkem HTML:

stín stínu: 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ýstup:

12. Přidejte více barevných okrajových stínů do spodní a pravé strany rámečku

Pomocí následujícího CSS s cílovým prvkem HTML můžete přidat více barevných okrajových stínů do spodní a pravé strany rámečku:

stín: 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ýstup:

13. Přidejte světelné stíny na levou a pravou stranu, roztáhněte stín na dno

Můžete přidat světlé stíny na levou a pravou stranu a rozšířit stín do spodní části rámečku pomocí následujícího CSS box-shadow s cílovým prvkem HTML:

stín boxu: 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ýstup:

Integrujte CSS se stránkou HTML

Nyní víte, jak pomocí CSS přidat skvělé efekty stínování boxů, můžete je snadno integrovat s prvky HTML několika způsoby.

Příbuzný: 11 Užitečné nástroje pro kontrolu, čištění a optimalizaci souborů CSS

Můžete jej vložit na samotnou stránku HTML nebo připojit jako samostatný dokument. Existují tři způsoby, jak zahrnout CSS do dokumentu HTML:

Interní CSS

Vložené nebo interní šablony stylů jsou vloženy do souboru část dokumentu HTML pomocí živel. Můžete vytvořit libovolný počet prvky v dokumentu HTML, ale musí být uzavřeny mezi a značky. Zde je příklad, který ukazuje, jak používat interní CSS s dokumentem HTML:

Styl 4

Inline CSS

Inline CSS se používá k přidání jedinečných pravidel stylu k prvku HTML. Lze jej použít s prvkem HTML prostřednictvím styl atribut. Atribut style obsahuje vlastnosti CSS ve formě "hodnota majetku" oddělené středníkem (;).

Příbuzný: Naučte se, jak vytvářet dvourozměrné webové stránky pomocí mřížky CSS

Všechny vlastnosti CSS musí být na jednom řádku, tj. Mezi vlastnostmi CSS by neměly být žádné zlomy řádků. Zde je příklad, který ukazuje, jak používat vložené CSS s dokumentem HTML:

Styl 4

Externí CSS

Externí CSS je nejideálnější způsob, jak aplikovat styly na dokumenty HTML. Externí list stylů obsahuje všechna pravidla stylů v samostatném dokumentu (soubor .css), tento dokument je poté propojen s dokumentem HTML pomocí štítek. Tato metoda je nejlepší metodou pro definování a použití stylů na dokumenty HTML, protože ovlivněný soubor HTML vyžaduje minimální změny v označení. Zde je příklad, který ukazuje, jak používat externí CSS s dokumentem HTML:

Vytvořte nový soubor CSS pomocí .css rozšíření. Nyní do tohoto souboru přidejte následující kód CSS:

.nadpis {
zarovnání textu: na střed;
}
.image-box {
displej: blok;
levý okraj: auto;
pravý okraj: auto;
stín boxu: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Nakonec vytvořte dokument HTML a do tohoto dokumentu přidejte následující kód:

Styl 4

Všimněte si, že soubor CSS je propojen s dokumentem HTML prostřednictvím značka a href atribut.

Všechny výše uvedené tři metody (interní CSS, vložené CSS a externí CSS) zobrazí stejný výstup -

Udělejte svou webovou stránku elegantní pomocí CSS

Používáním CSS máte plnou kontrolu nad stylem vaší webové stránky. Každý prvek HTML můžete přizpůsobit pomocí různých vlastností CSS. Vývojáři z celého světa přispívají k aktualizacím CSS a dělají to od jeho vydání v roce 1996. Začátečníci se tak mají co učit!

Naštěstí je CSS vhodný pro začátečníky. Můžete získat vynikající praxi tím, že začnete několika jednoduchými příkazy a uvidíte, kam vás vaše kreativita zavede.

10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minut

Chcete vědět více o používání CSS? Vyzkoušejte nejprve tyto základní příklady kódu CSS a poté je použijte na své vlastní webové stránky.

Přečtěte si další

O autorovi