Vnútorné tiene v CSS. Vnútorné tiene v CSS polomer roztiahnutia tieňov

Bežné tiene sa dajú ľahko implementovať pomocou tieňa boxu alebo tieňa textu. Ale čo keď potrebujete urobiť vnútorné tiene? Tento článok popisuje, ako vytvoriť tieto tiene pomocou niekoľkých riadkov kódu.

Syntax

Najprv sa pozrime na dva hlavné spôsoby implementácie tieňov v CSS.

box-shadow

Dizajn box-shadow obsahuje niekoľko rôznych významov:

Horizontálny posun A vertikálny posun- horizontálne a vertikálne posunutie, resp. Tieto hodnoty označujú, ktorým smerom bude objekt vrhať svoj tieň:

Polomer rozmazania A polomer šírenia trochu zložitejšie. Aký je rozdiel? Pozrime sa na príklad s dvoma prvkami, kde hodnoty polomer rozostrenia líšiť sa:

Okraj tieňa je jednoducho rozmazaný. S rôznymi hodnotami polomer šírenia vidíme nasledovné:

V tomto prípade vidíme, že tieň je rozptýlený na veľkej ploche. Ak neuvediete hodnotu polomer rozostrenia A polomer šírenia, potom sa budú rovnať 0.

textový tieň

Syntax je veľmi podobná box-shadow:

Významy sú podobné, ale nie rozprestretý tieň. Príklad použitia:

Vložka v tvare box-shadow

Ak chcete „prevrátiť“ tieň vo vnútri objektu, musíte pridať vložka v CSS:

Keď pochopíte základnú syntax box-shadow, je veľmi ľahké pochopiť, ako implementovať vnútorné tiene. Hodnoty sú stále rovnaké, môžete pridať farbu (RGB v hex):

Farba je vo formáte RGB, hodnota alfa je zodpovedná za priehľadnosť tieňa:

Obrázky s tieňmi

Pridanie vnútorného tieňa k obrázku je o niečo náročnejšie ako pridanie bežného tieňa div. Na začiatok tu je zvyčajný kód obrázka:

Je logické predpokladať, že môžete pridať tieň takto:

Img ( box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )

Ale tieň nie je viditeľný:

Existuje niekoľko spôsobov riešenia tohto problému, z ktorých každý má svoje klady a zápory. Pozrime sa na dva z nich. Prvým je zabaliť obrázok do obyčajného div:

Div ( výška: 200px; šírka: 400px; box-shadow: vložka 0px 0px 10px rgba(0,0,0,0,9); ) img ( výška: 200px; šírka: 400px; pozícia: relatívna; z-index: -2 ;

Všetko funguje, ale musíme pridať trochu viac značiek HTML a CSS. Druhým spôsobom je nastaviť obrázok ako pozadie požadovaného bloku:

Div ( výška: 200px; šírka: 400px; pozadie: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )

Toto sa môže stať pri použití vnútorných tieňov:

Vložiť do tieňa textu

Ak chcete implementovať vnútorný tieň textu, jednoducho ho pridajte do kódu vložka nefunguje:

Ak chcete vyriešiť, najskôr aplikujte na hlavičku h1 Nastavte tmavé pozadie a svetlý tieň:

H1 ( farba pozadia: #565656; farba: priehľadná; tieň textu: 0px 2px 3px rgba(255,255,255,0,5); )

Čo sa stane:

Pridanie tajnej prísady klip na pozadí ktorý odreže všetko, čo presahuje text (na tmavé pozadie):

H1 ( farba pozadia: #565656; farba: transparentná; tieň textu: 0px 2px 3px rgba(255,255,255,0,5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;

Ukázalo sa takmer presne to, čo sme potrebovali. Teraz len trochu stmavíme text (alfa) a výsledok je:

Tieň pod prvkom bloku na stránke sa zvyčajne používa na vytvorenie trojrozmerného efektu, na upútanie pozornosti na prvok alebo ako súčasť dizajnu. Malý tieň pod prvkami tiež dodáva stránke objem a hĺbku.

Ak chcete pridať tieň, použite vlastnosť box-shadow, ktorá má šesť hodnôt, z ktorých sú povinné iba dve. Na obr. Obrázok 1 zobrazuje vlastnosť box-shadow so všetkými možnými hodnotami, ktoré sú očíslované na ich identifikáciu.

Ryža. 1. Hodnoty vlastnosti box-shadow

kľúčové slovo inset nastavuje tieň vo vnútri prvku;
posunúť tieň vodorovne (5px - vpravo, -5px - vľavo);
vertikálny posun (5px - dole, -5px - hore);
polomer rozostrenia tieňa (0 - ostrý tieň);
roztiahnutie tieňa (5px - roztiahnutie, -5px - zmenšenie);
farba tieňa.

Je potrebné špecifikovať iba horizontálny a vertikálny posun, všetky ostatné parametre sa berú štandardne. V tomto prípade bude tieň ostrý bez rozmazania alebo čiernej.

Kombináciou rôznych parametrov a ich hodnôt môžete získať širokú škálu typov tieňov. V tabuľke 1 zobrazuje kód a výsledok, ku ktorému vedie.

Tabuľka 1. Kombinácie parametrov tieňa

kód	Výsledok	Popis
box-shadow: 5px 5px;		Ostrý tieň vpravo a dole.
box-shadow: -5px -5px;		Ostrý tieň vľavo a hore.
box-shadow: 0 0 5px;		Rozmazaný tieň okolo prvku.
box-shadow: 0 0 5px 2px;		Rozšírte tieň o 2 pixely.
box-shadow: 0 0 5px 2px červená;		Červená žiara okolo prvku.
box-shadow: 0,4em 0,4em 5px rgba(122,122,122,0,5);		Priesvitný tieň.
box-shadow: inset 0 0 6px;		Vo vnútri tieň.

Ako je zrejmé z tabuľky, posun tieňa nemusí byť špecifikovaný v pixeloch, aj keď je to výhodné. Farba tieňa môže byť špecifikovaná v akomkoľvek dostupnom formáte, napríklad na získanie priesvitného tieňa je vhodný formát RGBA na akomkoľvek pozadí; Príklad 1 ukazuje, ako to urobiť.

Príklad 1: Tieň v pozadí

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Blok s tieňom

Nechoďte proti nepriateľským zástavám, keď sú v úplnom poriadku; neútočte na nepriateľský tábor, keď je nedobytný; toto je manažment zmien.

Sun Tzu, prekl. Nikolaj Konrád

Výsledok tohto príkladu je znázornený na obr. 2. Tieň sleduje zaoblenie rohov kvádra.

Ryža. 2. Vzhľad tieňa na obrázku v pozadí

Pri pridávaní „širokého“ tieňa si uvedomte, že môže presahovať viditeľné okraje okna prehliadača, čo môže viesť k zobrazeniu vodorovného posúvača.

Tiene môžu byť tiež pridané do pseudo-prvkov, čo je niekedy potrebné pre zložité rozloženie. Na obr. Obrázok 3 zobrazuje blok hlavičky s pridaným tieňom. Aby ste sa vyhli akýmkoľvek čiaram na križovatke, musíte použiť pseudoprvok ::after a pridať k nemu tieň.

Ryža. 3. Blok s tieňom

Príklad 2 ukazuje vytvorenie takéhoto bloku.

Príklad 2. Blok s tieňom

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Blok s tieňom

Smerovanie

Blokovať obsah

Element môže mať viac ako jeden tieň, ale ich parametre sú uvedené oddelené čiarkami v hodnote vlastnosti box-shadow. Príklad 3 ukazuje, ako pridať dvojitý tieň ku všetkým obrázkom.

Príklad 2. Blok s tieňom

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Obrázok

Výsledok tohto príkladu je znázornený na obr. 4.

Ryža. 4. Dvojitý tieňový obraz

Prvý tieň je zobrazený naľavo od obrázka s polomerom rozostrenia 20px, jeho veľkosť je zmenšená o štvrtý parameter (-20px). Parametre druhého tieňa sú uvedené za desatinnou čiarkou; tieň je zobrazený napravo od obrázka a je tiež zmenšený kvôli symetrii.

Syntax

Najprv sa pozrime na dva hlavné spôsoby implementácie tieňov v CSS.

box-shadow

Dizajn box-shadow obsahuje niekoľko rôznych významov:

Horizontálny posun A vertikálny posun- horizontálne a vertikálne posunutie, resp. Tieto hodnoty označujú, ktorým smerom bude objekt vrhať svoj tieň:

Polomer rozmazania A polomer šírenia trochu zložitejšie. Aký je rozdiel? Pozrime sa na príklad s dvoma prvkami, kde hodnoty polomer rozostrenia líšiť sa:

Okraj tieňa je jednoducho rozmazaný. S rôznymi hodnotami polomer šírenia vidíme nasledovné:

V tomto prípade vidíme, že tieň je rozptýlený na veľkej ploche. Ak neuvediete hodnotu polomer rozostrenia A polomer šírenia, potom sa budú rovnať 0.

textový tieň

Syntax je veľmi podobná box-shadow:

Významy sú podobné, ale nie rozprestretý tieň. Príklad použitia:

Vložka v tvare box-shadow

Ak chcete „prevrátiť“ tieň vo vnútri objektu, musíte pridať vložka v CSS:

Keď pochopíte základnú syntax box-shadow, je veľmi ľahké pochopiť, ako implementovať vnútorné tiene. Hodnoty sú stále rovnaké, môžete pridať farbu (RGB v hex):

Farba je vo formáte RGB, hodnota alfa je zodpovedná za priehľadnosť tieňa:

Obrázky s tieňmi

Pridanie vnútorného tieňa k obrázku je o niečo náročnejšie ako pridanie bežného tieňa div. Na začiatok tu je zvyčajný kód obrázka:

Je logické predpokladať, že môžete pridať tieň takto:

Img ( box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )

Ale tieň nie je viditeľný:

Existuje niekoľko spôsobov riešenia tohto problému, z ktorých každý má svoje klady a zápory. Pozrime sa na dva z nich. Prvým je zabaliť obrázok do obyčajného div:

Div ( výška: 200px; šírka: 400px; box-shadow: vložka 0px 0px 10px rgba(0,0,0,0,9); ) img ( výška: 200px; šírka: 400px; pozícia: relatívna; z-index: -2 ;

Všetko funguje, ale musíme pridať trochu viac značiek HTML a CSS. Druhým spôsobom je nastaviť obrázok ako pozadie požadovaného bloku:

Div ( výška: 200px; šírka: 400px; pozadie: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )

Toto sa môže stať pri použití vnútorných tieňov:

Vložiť do tieňa textu

Ak chcete implementovať vnútorný tieň textu, jednoducho ho pridajte do kódu vložka nefunguje:

Ak chcete vyriešiť, najskôr aplikujte na hlavičku h1 Nastavte tmavé pozadie a svetlý tieň:

H1 ( farba pozadia: #565656; farba: priehľadná; tieň textu: 0px 2px 3px rgba(255,255,255,0,5); )

Čo sa stane:

Pridanie tajnej prísady klip na pozadí ktorý odreže všetko, čo presahuje text (na tmavé pozadie):

H1 ( farba pozadia: #565656; farba: transparentná; tieň textu: 0px 2px 3px rgba(255,255,255,0,5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;

Ukázalo sa takmer presne to, čo sme potrebovali. Teraz len trochu stmavíme text (alfa) a výsledok je:

K prvkom môžete pridať tieň a zmeniť jeho vzhľad pomocou vlastnosti CSS box-shadow. Tento štýl vám umožňuje realizovať zaujímavé efekty, napríklad objem a trojrozmernosť bloku. Táto vlastnosť je podporovaná všetkými modernými prehliadačmi. Výnimkou sú IE8 a Opera Mini.

vlastnosť box-shadow: syntax

Tento štýl je napísaný takto:

Box-shadow: inset 4px 4px 8px 5px #333333;

Uvažujme v poradí, za čo sú jednotlivé parametre zodpovedné (zľava doprava):

Kľúčové slovo inset: parameter, ktorý sa nemusí špecifikovať; kreslí tieň vnútri element.
X posun: Určuje mieru, do akej je tieň horizontálne odsadený vzhľadom na prvok. Kladná hodnota znamená posun doprava, záporná doľava. Hodnota 0 znamená, že tieň nie je posunutý.
Y Shift: Určuje veľkosť vertikálneho posunu tieňa. Kladná hodnota znamená posun nadol, záporná hodnota posun nahor. Hodnota 0 je tieň bez posunu.
Polomer rozostrenia: Toto je stupeň rozmazania tieňov. Čím je hodnota vyššia, tým je tieň rozmazanejší. Ak parameter nie je zadaný, predvolená hodnota je 0. V tomto prípade bude tieň dokonale čistý.
Rozšírenie: voliteľný parameter zodpovedný za roztiahnutie tieňa pozdĺž oboch osí; čím vyššia hodnota, tým väčšie roztiahnutie. Rozšírenie funguje iba vtedy, ak je prítomný predchádzajúci parameter. Predvolená hodnota je 0.
Farba tieňa: s týmto parametrom je všetko jasné - nastavuje farbu tieňa prvku. Predvolená farba je čierna.

Poznámka. Prehliadače Android a staršie verzie iPhone Safari vyžadujú predponu -webkit-, aby vlastnosť CSS box-shadow fungovala správne.

Táto vlastnosť môže mať niekoľko skupín hodnôt (vytvoriť niekoľko tieňov súčasne). Aby ste to dosiahli, budete musieť uviesť zoznam týchto skupín parametrov oddelených čiarkami. Napríklad:

Box-shadow: 15px 15px 20px #8b0163, vložka 15px 15px 20px #630046;

Príklady box-shadow

Aby sme vám pomohli lepšie pochopiť silu a krásu vlastnosti CSS box-shadow, ukážeme vám niekoľko príkladov, ktoré môžete pokojne uviesť do praxe. Táto vlastnosť dokáže veľmi premeniť obyčajný blok!

Svetlý tieň

Box-shadow: 0 2px 4px rgba(0, 0, 0, 0,25);

Papierový efekt

Box-shadow: 0 1px 4px rgba(0, 0, 0, 0,3), -23px 0 20px -23px rgba(0, 0, 0, 0,6), 23px 0 20px -23px rgba(0, 0, 0, .6), vložka 0 0 40px rgba(0, 0, 0, .1);

Viaceré vrstvy

Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Trojitý rám

Box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0,6), 0 0 0 21px rgba(118, 46, 177, 0,4);

Rohy

Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Ako vidíte, vlastnosť box-shadow ponecháva veľa priestoru pre fantáziu. Bloky môžete transformovať, ako sa vám páči - hlavnou vecou je mať zmysel pre proporcie! 😉

V ďalšej kapitole preskúmate vlastnosti šírky a výšky, ktoré určujú veľkosť prvkov.

Dnes sa naučíme robiť tiene CSS bez obrázkov. Po dokončení tohto návodu už nebudete potrebovať generátor tieňov CSS.

Hlavnou výhodou tieňov vytvorených pomocou CSS3 je jednoduchosť implementácie a zníženie počtu požiadaviek na server (keďže už nepoužívame obrázky). Na vytvorenie tieňa CSS potrebujeme značku div a vlastnosť box-shadow CSS. Nebudete potrebovať žiadne ďalšie označenie, pretože vytvoríme pseudo prvky :after a :before, ktoré umiestnime za hlavný objekt (div s triedou blokovať).

Pozrite sa na HTML kód, pre ktorý vytvoríme tieň CSS3:

Obsah

Ďalej si môžete pozrieť hotové príklady a kód potrebný na ich implementáciu. Aby sme minimalizovali text na stránke, vynecháme CSS vlastnosti s predponami prehliadača. Celý kód je možné zobraziť kliknutím na odkaz "Príklad" zodpovedajúci príkladu.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px ) .block:before, .block:after ( content:""; position:absolute ; z-index:-2:10px výška:55%; right:10px left:auto;transform:skew(8deg)otočiť(3deg);

Pomocou tieňa môžete poskytnúť blokovú perspektívu. Pozri príklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset ) .block:before, .block:after ( content:""; position:absolútna; z-index:-2; ) .block:before (vľavo:80px; dole:5px) ; sirka:50% vyska:35%;

CSS tieň pre zvýšený blok. Pozri príklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0,5), 0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0) , 0, 0, 0,1) vložka ) .blok:pred, .blok:po (obsah:""; pozícia:absolútna; z-index:-2; )

Príklad tieňa CSS3 pre vertikálne zložený blok. Pozri príklad.

Príklad tieňa CSS3 pre horizontálne zložený blok. Pozri príklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) vložka ) .blok:pred, .blok:po (obsah:""; pozícia:absolútna; z-index:-2; ) .blok:pred (horné:50%; spodné: 0px vľavo: 10px: 0 15px rgba(0,0,0,0,6);

CSS3 tieň pre otočený blok. Pozri príklad.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3) , 0 0 40px rgba(0, 0, 0, 0,1) inset; box-shadow:none; transform:rotate(-3deg .block > :first-child:before (obsah:""; poloha:absolutne; z); -index:-1 vpravo:0px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba (0, 0, 0, 0,1) .blok; :before, .block:after ( content:""; position:absolútna; z-index:-2; bottom:15px; left:10px; width:50% ; height:20%; max-width:300px; box- tieň:0 15px 10px rgba(0, 0, 0, 0,7 transform:rotate(-3deg);