CSS je plné možností na zlepšenie vzhľadu vašich webových stránok; tiene textu a rámčeka sú hlavnými príkladmi. Ponúkajú podobné výsledky ako tiene v softvéri na úpravu obrázkov, ako je Photoshop.

Ako však tiene CSS fungujú? Poďme sa ponoriť.

Ako používať CSS Box Shadow

Môžete použiť tieň poľa CSS s jedným riadkom CSS obsahujúcim rozsah až šiestich hodnôt. Poradie hodnôt je rozhodujúce pre fungovanie tieňa poľa CSS a vyzerá takto:

box-shadow: offset-x offset-y rozostrenie spread color inset;

Poďme sa pozrieť na každú z hodnôt v poradí.

CSS Box Shadow Position

Hodnoty offset-x a offset-y ovládajú polohu tieňa vášho rámčeka. Hodnota offset-x predstavuje horizontálnu polohu tieňa, zatiaľ čo offset-y je vertikálny posun.

 box-shadow: 10px 10px;

Kladné hodnoty majú za následok tieň pod a napravo od prvku.

Pre h-offset a v-offset môžete použiť aj záporné hodnoty:

 box-shadow: -10px -10px;

Záporný h-offset posúva tieň doľava, zatiaľ čo záporný v-offset ho posúva nahor:

Rozmazanie tieňov rámčeka CSS

Ako môžete vidieť, pridanie h-offsetu a v-offsetu k vášmu tieňu vytvorí jednoliaty tieň bez akéhokoľvek prelínania. Hodnota rozostrenia rozmaže tieň vášho poľa CSS a prejaví sa, ak zadáte tretiu hodnotu:

instagram viewer 

box-shadow: 10px 10px 20px;

Čím vyššie číslo pridáte k hodnote rozostrenia, tým viac rozmazaný bude tieň vášho poľa CSS. Táto hodnota nemôže byť záporná.

CSS Box Shadow Spread

Hodnota rozpätia vám umožňuje zmeniť veľkosť tieňa bez zmeny jeho polohy.

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

Kladná hodnota spreadu zväčší tieň vášho poľa CSS, zatiaľ čo záporná hodnota ho zmenší.

Farba tieňa CSS rámčeka

Tiene polí CSS predvolene zodpovedajú farbe textu prvku, ale môžete to prepísať pridaním farby:

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

Farba, ktorú použijete, musí byť v legálnom formáte farieb CSS, ako je hexadecimálny kód, kód RGB alebo preddefinovaná farba. Môžeš dozvedieť sa o hexadecimálnych kódoch a ďalšie legálne farebné možnosti CSS, než začnete s tieňmi.

Vložka CSS Box Shadow

Tiene polí CSS predvolene spadajú mimo ich priradený prvok. Pridaním vložky do vlastnosti box-shadow môžete zobraziť tieň vo vnútri prvku.

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

Toto je preddefinovaná textová hodnota; jednoducho ho pridajte alebo odstráňte, aby ste nastavili hodnotu.

Ako používať tieň textu CSS

Tiene textu CSS sú ako tiene rámčeka, aj keď majú menej hodnôt na úpravu. Syntax tieňa textu CSS vyzerá takto:

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

Ako však tieto hodnoty fungujú?

Poloha tieňa textu CSS

Posuny tieňov textu CSS fungujú veľmi podobne ako tie isté hodnoty tieňov rámčeka:

text-shadow: 10px 10px;

Kladné hodnoty umiestnia tieň pod a napravo od textu.

Záporné hodnoty robia opak a umiestnia tieň nad text a naľavo od neho.

 text-shadow: -10px -10px;

Môžete kombinovať záporné a kladné hodnoty, aby ste dokonale umiestnili tieň textu CSS.

Polomer rozmazania tieňa CSS textu

Polomer rozostrenia tieňa textu CSS vám umožňuje rozmazať tieň za textom.

text-shadow: 10px 10px 10px;

Predvolená hodnota pre túto hodnotu je 0 (bez rozmazania).

Farba tieňa textu CSS

V predvolenom nastavení sa tiene textu CSS zhodujú s farbou textu. Farbu textu môžete zmeniť tak, že ju pridáte na koniec vlastnosti tieňa textu CSS.

textový tieň: 10px 10px 10px #0000ff;

Rovnako ako farby tieňov polí CSS, musíte na to použiť legálnu farbu CSS.

Príklady dizajnu rámčeka CSS a tieňa textu

Keď pochopíte základy, môžete začať experimentovať s používaním rámčeka CSS a tieňov textu. Nižšie uvedené nápady by vás mali inšpirovať, aby ste prišli s vlastnými kreatívnymi spôsobmi využitia týchto vlastností CSS.

Dvojfarebné okraje s dvoma tieňmi rámčeka CSS

Do prvku HTML môžete pridať viac ako jeden tieň rámčeka alebo tieňa textu. Pokiaľ sú medzi nimi čiarky, môžete do jednej vlastnosti pridať nové tiene.

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

Tento dvojfarebný okraj je toho dobrým príkladom. Dva tiene rámčeka CSS s protiľahlými polohami a bez rozmazania/roztiahnutia vytvárajú vynikajúce kreatívne ohraničenie.

Dvojité tiene textu CSS pre dramatický efekt

V podobnom duchu ako vyššie uvedený nápad môžete pridať a umiestniť text do viacerých textových tieňov, aby ste dosiahli zaujímavé výsledky.

text-shadow: 35px 20px 4px tmavošedá, -35px -20px 4px tmavošedá;

Tento príklad zobrazuje riadok textu s tieňom nad a tieňom pod, pričom oba majú hodnoty farieb založené na texte.

Viacfarebné pozadie s vsadenými tieňmi rámčeka CSS

CSS je dostatočne výkonný na vytváranie jedinečných a zaujímavých prvkov bez akýchkoľvek externých súborov. Skvelým príkladom toho je použitie vloženého tieňa CSS boxu ako pozadia.

box-shadow: 20px 10px 10px 40px #000000 vložka, -50px -30px 8px 60px sivá vložka, 30px 20px 6px 90px svetlosivá vložka;

Tento box má biele pozadie spolu s tromi vsadenými tieňmi v rôznych farbách. Tiene sa navzájom prekrývajú a vytvárajú jedinečné pozadie.

Ďalšie zvýšenie tohto efektu je jednoduchá záležitosť pridanie štýlového gradientu pozadia CSS k svojmu živlu.

Tiene CSS rámčekov a tiene textu pre kreatívny webový dizajn

Pole CSS a tiene textu sa ľahko používajú, keď viete, ako s nimi pracovať. Teraz máte nástroje, ktoré potrebujete, aby ste mohli začať pracovať na svojich vlastných návrhoch, ale mali by ste pokračovať v skúmaní CSS, aby ste si zlepšili svoje zručnosti.