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

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

CSS je jazyk, který vývojáři používají ke stylizaci webové stránky. Řídí, jak se prvky HTML zobrazují na obrazovce, na papíře nebo v jakékoli jiné formě média. CSS poskytuje plné možnosti přizpůsobení stylu webové stránky podle vašeho vlastního obrázku.





Pomocí CSS můžete změnit barvu pozadí prvku, styl písma, barvu písma, stín stínu, okraj a řadu dalších vlastností. V této příručce vás provedeme několika účinnými způsoby použití box-shadow.



Co je CSS box-shadow?

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





Syntaxe CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. horizontální odsazení: Pokud je vodorovný posun kladný, stín bude napravo od pole. A pokud je vodorovný posun záporný, stín bude nalevo od rámečku.
  2. svislé odsazení: Pokud je svislý posun kladný, stín bude pod rámečkem. A pokud je svislý posun záporný, stín bude nad rámečkem.
  3. poloměr rozostření: Čím vyšší je hodnota, tím bude stín rozmazanější.
  4. poloměr šíření: Udává, jak moc se má stín šířit. Kladné hodnoty šíření stínu zvyšují, záporné hodnoty šíření snižují.
  5. Barva: Označuje barvu stínu. Také podporuje jakýkoli barevný formát, jako je rgba, hex nebo hsla.

Parametry rozostření, rozložení a barvy jsou volitelné. Nejzajímavější částí box-shadow je, že můžete použít čárku k oddělení hodnot box-shadow libovolný početkrát. To lze použít k vytvoření více ohraničení a stínů na prvcích.



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

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

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

Výstup:



2. Přidejte Dim box-shadow na All Sides

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



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

Výstup:

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

Stíny můžete přidat na spodní a pravou stranu pole pomocí následujícího CSS box-shadow s cílovým elementem HTML:

jak dostat skladby z ipodu do počítače
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Výstup:

4. Přidejte na všechny strany tmavý stín

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

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

Výstup:

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

Rozprostřený stín můžete přidat na všechny strany pole pomocí následujícího příkazu s cílovým prvkem 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ýstup:

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

Pomocí následujících CSS s cílovým elementem HTML můžete přidat jednoduchý okrajový stín na všechny strany pole:

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ýstup:

7. Přidejte rámeček do spodní a levé strany

Stín můžete přidat na spodní a levou stranu pole pomocí následujícího CSS box-shadow s cílovým elementem HTML:

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

Výstup:

8. Přidejte tmavý stín na horní a levou stranu, tmavý stín na spodní a pravou stranu

Pomocí následujícího CSS s cílovým prvkem HTML můžete přidat světlý stín na horní a levou stranu pole a tmavý stín na spodní a pravou stranu pole:

box-shadow: 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ý hraniční stín

Jednoduchý barevný stín ohraničení můžete přidat na všechny strany pole pomocí následujícího CSS box-shadow s cílovým prvkem HTML:

box-shadow: 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 krabice

Pomocí následujícího CSS s cílovým prvkem HTML můžete přidat více barevných stínů okrajů do spodní a levé strany pole:

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ýstup:

jak zjistit, zda ram selhává

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

Do spodní čá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 elementem 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ýstup:

12. Přidejte více barevných okrajových stínů do spodní a pravé strany krabice

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

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ýstup:

13. Přidejte světlé stíny na levou a pravou stranu, rozprostřete stín dole

Na levou a pravou stranu můžete přidat světlé stíny a stín šířit do spodní části pole pomocí následujícího CSS box-shadow s cílovým prvkem 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ýstup:

Integrujte CSS se stránkou HTML

Nyní víte, jak pomocí CSS přidat efekty cool box-shadow, můžete je snadno integrovat s prvky HTML několika způsoby.

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

Můžete jej vložit do samotné stránky HTML nebo jej 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 části dokumentu HTML pomocí živel. Můžete vytvořit libovolný počet prvky v dokumentu HTML, ale musí být uzavřeny mezi a tagy. Zde je příklad, který ukazuje, jak používat interní CSS s dokumentem 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 se používá k přidání jedinečných pravidel stylu k prvku HTML. Lze jej použít s elementem HTML prostřednictvím styl atribut. Atribut style obsahuje vlastnosti CSS ve formě 'hodnota majetku' oddělené středníkem ( ; ).

Související: Zjistěte, jak vytvářet dvourozměrné webové stránky pomocí mřížky CSS

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





CSS box-shadow



Style 4





Externí CSS

Externí CSS je nejideálnějším způsobem použití stylů na dokumenty HTML. Externí šablona stylů obsahuje všechna pravidla stylu 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 aplikaci stylů na dokumenty HTML, protože dotčený soubor HTML vyžaduje minimální změny ve znač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:

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

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

jak zobrazit instagram dms na počítači




CSS box-shadow




Style 4





Soubor CSS je propojen s dokumentem HTML pomocí tag a href atribut.

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

Vylepšete svou webovou stránku 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 začít pracovat s několika jednoduchými příkazy a zjistit, kam vás vaše kreativita zavede.

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

Potřebujete pomoc s CSS? Nejprve zkuste tyto základní příklady kódu CSS a poté je použijte na své vlastní webové stránky.

Číst dále Související témata
  • Programování
  • Webový design
  • CSS
O autorovi Yuvraj Chandra(60 článků zveřejněno)

Yuvraj je studentem informatiky na univerzitě v Dillí v Indii. Je nadšený pro webový vývoj Full Stack. Když nepíše, zkoumá hloubku různých technologií.

Více od Yuvraj Chandra

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru