CSS nabízí mnoho možností, jak vylepšit vzhled vašich webových stránek; text a stíny rámečků jsou ukázkovými příklady. Nabízejí podobné výsledky jako stíny v softwaru pro úpravu obrázků, jako je Photoshop.

Jak ale stíny CSS fungují? Pojďme se rovnou ponořit.

Jak používat CSS Box Shadow

Stín rámečku CSS můžete použít s jedním řádkem CSS obsahujícím rozsah až šesti hodnot. Pořadí hodnot je klíčové pro fungování stínu pole CSS a vypadá takto:

box-shadow: offset-x offset-y rozostření spread color inset;

Podívejme se na každou z hodnot v pořadí.

CSS Box Shadow Position

Hodnoty offset-x a offset-y určují polohu stínu vašeho rámečku. Hodnota offset-x představuje horizontální polohu stínu, zatímco offset-y je vertikální offset.

 box-shadow: 10px 10px;

Kladné hodnoty mají za následek stín pod a vpravo od prvku.

Můžete také použít záporné hodnoty pro h-offset a v-offset:

 box-shadow: -10px -10px;

Záporný h-offset posune stín doleva, zatímco negativní v-offset jej posune nahoru:

CSS Box Shadow Blur

Jak můžete vidět, přidáním h-offsetu a v-offsetu ke stínu vytvoříte plný stín bez jakéhokoli prolnutí. Hodnota rozostření rozmaže stín vašeho pole CSS a projeví se, pokud zadáte třetí hodnotu:

instagram viewer 

box-shadow: 10px 10px 20px;

Čím vyšší číslo přidáte k hodnotě rozostření, tím rozmazanější bude stín vašeho rámečku CSS. Tato hodnota nemůže být záporná.

CSS Box Shadow Spread

Hodnota šíření vám umožňuje změnit velikost stínu, aniž byste změnili jeho polohu.

 box-shadow: 10px 10px 20px 30px;

Kladná hodnota rozpětí způsobí, že stín pole CSS se zvětší, zatímco záporná hodnota jej zmenší.

Barva stínu CSS rámečku

Stíny rámečků CSS jsou výchozí barvou textu prvku, ale můžete to přepsat přidáním barvy:

box-shadow: 10px 10px 20px 10px #0000ff;

Barva, kterou použijete, musí být v zákonném barevném formátu CSS, jako je hexadecimální kód, kód RGB nebo předdefinovaná barva. Můžeš dozvědět se o hexadecimálních kódech a další zákonné barevné možnosti CSS, než začnete se svými stíny.

CSS Box Shadow Inset

Stíny CSS boxů ve výchozím nastavení spadají mimo jejich přiřazený prvek. Přidáním vložky do vlastnosti box-shadow můžete zobrazit stín uvnitř prvku.

box-shadow: 10px 10px 20px 10px #0000ff vložka;

Toto je předdefinovaná textová hodnota; jednoduše jej přidejte nebo odeberte a nastavte hodnotu.

Jak používat stín textu CSS

Stíny textu CSS jsou jako stíny rámečků, i když mají méně hodnot k úpravě. Syntaxe stínu textu CSS vypadá takto:

text-shadow: offset-x offset-y blur-radius color;

Jak ale tyto hodnoty fungují?

Poloha stínu textu CSS

Posuny stínů textu CSS fungují velmi podobně jako stejné hodnoty stínu rámečku:

text-shadow: 10px 10px;

Kladné hodnoty umístí stín pod a napravo od textu.

Záporné hodnoty dělají opak a umístí stín nad text a nalevo od něj.

 text-shadow: -10px -10px;

Můžete kombinovat záporné a kladné hodnoty, abyste dokonale umístili stín textu CSS.

Poloměr rozostření stínu CSS textu

Poloměr rozostření stínu textu CSS umožňuje rozostřit stín za textem.

text-shadow: 10px 10px 10px;

Výchozí pro tuto hodnotu je 0 (bez rozmazání).

Barva stínu textu CSS

Ve výchozím nastavení stíny textu CSS odpovídají barvě textu. Barvu textu můžete změnit tak, že ji přidáte na konec vlastnosti stínu textu CSS.

stín textu: 10px 10px 10px #0000ff;

Stejně jako barvy stínů rámečků CSS k tomu musíte použít povolenou barvu CSS.

Příklady CSS Box a Text Shadow Design

Jakmile pochopíte základy, můžete začít experimentovat s používáním rámečků CSS a stínů textu. Níže uvedené nápady by vás měly inspirovat k vymýšlení vlastních kreativních způsobů využití těchto vlastností CSS.

Dvoubarevné okraje se dvěma stíny rámečků CSS

K prvku HTML můžete přidat více než jeden stín rámečku nebo stínu textu. Dokud jsou mezi nimi čárky, můžete k jedné vlastnosti přidat nové stíny.

box-shadow: 30px 30px#0000ff, -30 pixelů-30 pixelů 0px#00ff00;

Tento dvoubarevný okraj je toho dobrým příkladem. Dva stíny rámečků CSS s protilehlými pozicemi a bez rozmazání/roztažení vytvářejí vynikající kreativní ohraničení.

Duální stíny textu CSS pro dramatický efekt

V podobném duchu jako výše uvedený nápad můžete přidat a umístit text do více stínů textu pro zajímavé výsledky.

stín textu: 35px 20px 4px tmavě šedá, -35px -20px 4px tmavě šedá;

Tento příklad ukazuje řádek textu se stínem nad a stínem pod, přičemž oba mají hodnoty barev založené na textu.

Vícebarevné Pozadí S Vsazenými stíny CSS Box

CSS je dostatečně výkonné, aby vytvářelo jedinečné a zajímavé zdroje bez jakýchkoliv externích souborů. Skvělým příkladem toho je použití vloženého stínu rámečku CSS jako pozadí.

box-shadow: 20px 10px 10px 40px #000000 vložka, -50px -30px 8px 60px šedá vložka, 30px 20px 6px 90px světle šedá vložka;

Tato krabička má bílé pozadí spolu se třemi vsazenými stíny v různých barvách. Stíny se navzájem překrývají a vytvářejí jedinečné pozadí.

Další posílení tohoto efektu je jednoduchá záležitost přidání stylového přechodu pozadí CSS ke svému živlu.

CSS Box Shadows & Text Shadows pro kreativní webový design

Pole CSS a stíny textu se snadno používají, jakmile víte, jak s nimi pracovat. Nyní máte nástroje, které potřebujete, abyste mohli začít pracovat na svých vlastních návrzích, ale měli byste pokračovat ve zkoumání CSS, abyste zlepšili své dovednosti.