HTML je jazyk používaný k poskytování struktury webových stránek a CSS nám umožňuje aplikovat na prvky styly. Na webové stránce jsou nastaveny různé hodnoty vlastností pro použití různých stylů, jako je barva pozadí, velikost písma, ohraničení, poloměr ohraničení a stínování rámečku.

Tento blog bude diskutovat o metodě aplikace stínových efektů na prvky HTML.

Jak vrhnout stínový efekt na prvky HTML pomocí CSS?

' box-shadow ” přidá stín kolem prvku, kde lze dvě nebo více přidaných hodnot efektu oddělit čárkami.

Syntaxe vlastnosti box-shadow je popsána níže.

Syntax

box-shadow : žádný |h-offset v-offset rozostření rozprostřené barvy | vložka | počáteční | dědíte ;

Popis výše uvedené syntaxe je uveden níže:

“ žádný ”: Je to výchozí hodnota vlastnosti box-shadow.
“ h-offset ”: Tato hodnota představuje vodorovnou vzdálenost.
“ v-offset ”: Tato hodnota definuje vertikální vzdálenost.
“ rozmazat “: Třetí hodnota je rozostření. Maximalizace jeho hodnoty maximalizuje efekt rozostření.
“ pomazánka ”: Čtvrtá hodnota představuje rozpětí stínu. Může mít kladné nebo záporné hodnoty, přičemž kladná hodnota spread zvyšuje a záporná hodnota jej snižuje.
“ barva ”: Tato hodnota je volitelná a představuje aktuální barvu.
“ počáteční ”: Tato hodnota nastavuje vlastnost své počáteční hodnoty.
“ dědíte ”: Tato hodnota zdědí vlastnost svého nadřazeného prvku.
“ vložka ”: Vložená hodnota se používá k vytvoření stínů uvnitř rámečku.

Podívejme se, jak vypadá efekt stínu na praktickém příkladu.

Příklad

Do souboru HTML nejprve přidejte „

“. Uvnitř tohoto prvku

přidejte tagy

a
, abyste poskytli obsah webové stránce.

HTML

< div >

< h1 > Box Shadow < / h1 >

< p > box-shadow: 3px 8px < / p >

< / div >

Nyní použijte vlastnosti CSS na přidané prvky HTML.

CSS

div {

box-shadow : 3px 8px ;

}

Prvek div se použije s vlastností „ box-shadow “ s hodnotou “ 3px 8px “, což představuje horizontální a vertikální posun.

Výstup

V další části budou prvky HTML stylizovány s různými vlastnostmi.

CSS

div {

okraj : 5px pevný rgb ( 255 , 111 , 1 ) ;

box-shadow : 3px 8px 9px 4px #f4af1b ;

}

Níže jsou uvedeny další vlastnosti CSS použité na prvek div:

“ okraj Vlastnosti ” je přiřazena hodnota 5px solid rgb(255, 111,1), kde 5px označuje šířku ohraničení, solid představuje styl ohraničení a rgb(255, 111, 1) je barva.
“ box-shadow ” vlastnost s hodnotou 3px 8px 9px 4px #f4af1b představuje h-offset jako 3px, v-offset jako 8px, rozostření jako 9px, spread jako 4px a #f4af1b určuje barvu.

Výše uvedený kód zobrazí prvek div, jak je uvedeno níže:

Nyní v další části vytvořte dva rámečky představující dva prvky div. Každému dáme různé vícenásobné hodnoty box-shadow a pozorujeme výsledky.

HTML

= 'box1' >

> The Box Shadow >

> box-shadow : 3px 8px 9px 4px #f4af1b >

> > >

= 'box2' >

> The Box Shadow >

> box-shadow : 3px 8px 9px 4px #f4af1b >

>

Styl box1 div

#box1 {

šířka : 40 % ;

výška : 140 pixelů ;

okraj : 5px pevný #ff9c83 ;

box-shadow : 8px 10px 15 pixelů 20 pixelů #807f7f ;

}

Tady:

“ #box1 ” se používá pro přístup k div s id box1.
“ šířka ” vlastnost se používá pro nastavení šířky prvku.
“ výška Vlastnost ” nastavuje výšku prvku.
“ okraj ” má hodnotu 5px solid #ff9c83 kde 5px označuje šířku ohraničení, solid představuje styl ohraničení a #ff9c83 je barva.
“ box-shadow ” vlastnost bude nastavena jako “ 8px 10px 15px 20px #807f7f ” kde 8px je horizontální posun, 10px je vertikální posun, 15px je efekt rozostření, 20px je efekt rozprostření a #807f7f je barva stínu.

Styl box2 div

#box2 {

šířka : 40 % ;

výška : 140 pixelů ;

okraj : 5px pevný rgb ( 255 , 111 , 1 ) ;

box-shadow : vložka 4px 8px #f4af1b ;

okraj-levý : 350 pixelů ;

}

Lze pozorovat, že jsme stylovali div box2 se stejnými vlastnostmi:

Bonusový tip: Přidání více stínů do prvku HTML

' box-shadow Vlastnost ” lze použít k přidání více stínových efektů do prvku HTML. To lze provést pomocí čárek mezi každým stínem, jak je znázorněno v níže uvedeném příkladu:

box-shadow : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5px rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;

Jak můžete vidět, bylo úspěšně aplikováno několik stínů:

To bylo vše o použití stínu ohraničení CSS.

Závěr

' box-shadow Vlastnost ” v CSS se používá k aplikaci stínových efektů na prvky HTML. Tato vlastnost se skládá hlavně ze dvou hodnot, které jsou pro vodorovné a svislé odsazení, ale může existovat více hodnot, například pro efekt rozostření, efekt rozprostření, barvu a další. Kromě toho můžete k prvkům také přidat více stínů pomocí čárek mezi každou vlastností box-shadow. Tento článek vysvětluje vlastnost CSS box-shadow na praktických příkladech.

CSS okrajový stín