Vrhaný tieň iba na jednej strane css. Vnútorné tiene v CSS

Rovnako ako aktualizácia 3, ale s modernými pravidlami css (\u003d menej), takže nie je potrebné žiadne špeciálne umiestnenie na pseudoprvku.

#box (color-color: # 3D6AA2; width: 160px; height: 90px; position: absolute; top: calc (10% - 10px); left: calc (50% - 80px);). box-shadow: after ( obsah: ""; pozícia: absolútna; šírka: 100%; dno: 1px; z-index: -1; transformácia: mierka (.9); tieň políčka: 0px 0px 8px 2px # 000000;)

AKTUALIZÁCIA 3

#box (color-color: # 3D6AA2; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%;) .box- tieň: after (content: ""; šírka: 150px; výška: 1px; okraj hore: 88px; okraj zľava: -75px; displej: blok; pozícia: absolútna; vľavo: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px # 000000; -moz-box-shadow: 0px 0px 8px 2px # 000000; box-shadow: 0px 0px 8px 2px # 000000;)

AKTUALIZÁCIA 2

Zjavne to môžete urobiť iba s extra parametrom značky box css, ako všetci ostatní práve zadali. Tu je ukážka:

Tieň Webkit-box: 0 4px 4px -2px # 000000; -moz-box-shadow: 0 4px 4px -2px # 000000; tieň boxu: 0 4px 4px -2px # 000000;

To by bolo najlepšie riešenie. Pridaný ďalší parameter je opísaný ako:

Štvrtá dĺžka je rozmetaná vzdialenosť. Kladné hodnoty spôsobia, že tvar tieňa rozšíri smer pozdĺž určeného polomeru. Záporné hodnoty spôsobujú, že tvar tieňa súhlasí.

AKTUALIZÁCIA

To, čo som urobil, bolo vytvorenie „tieňového prvku“, ktorý sa skryje za skutočný prvok, ktorý by ste chceli mať v tieni. Šírku „tieňového prvku“ som urobil presne menšiu ako skutočný prvok, čo je 2-násobok určeného tieňa; potom som to zarovnal správne.

# obal (šírka: 84 pixelov; poloha: relatívna;) # prvok (farba pozadia: # 3D668F; výška: 54 pixelov; šírka: 100%; pozícia: relatívna; z-index: 10;) # tieň (farba pozadia: # 3D668F; výška: 8px; šírka: 80px; okraj zľava: -40px; pozícia: absolútne; spodok: 0px; doľava: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px # 000000; - moz-box-shadow: 0px 2px 4px # 000000; box-shadow: 0px 2px 4px # 000000;)

Pôvodná odpoveď

Áno, môžete to urobiť s rovnakou syntaxou, akú ste zadali. Prvá hodnota riadi vodorovné umiestnenie a druhá hodnota riadi vertikálne umiestnenie. Stačí teda nastaviť prvú hodnotu na 0px a druhú na ľubovoľné posunutie, ktoré by ste chceli urobiť takto.

Normálne tiene sa dajú ľahko implementovať pomocou tieňa typu box-shadow alebo text-shadow. Čo však v prípade, že potrebujete urobiť vnútorné tiene? Tento článok popisuje, ako vytvoriť tieto tiene iba pomocou niekoľkých riadkov kódu.

Syntax

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

tieňový box

Dizajn tieňový box obsahuje niekoľko rôznych hodnôt:

Horizontálne odsadenie a zvislé odsadenie - horizontálne a vertikálne posunutie. Tieto hodnoty označujú, ktorým smerom bude objekt vrhať tieň:

Polomer rozostrenia a polomer šírenia trochu komplikovanejšie. Aký je medzi nimi rozdiel? Pozrime sa na príklad s dvoma prvkami, kde sú hodnoty polomer rozmazania líšia sa:

Okraj tieňa je jednoducho rozmazaný. S inou hodnotou polomer šírenia vidíme nasledovné:

V tomto prípade vidíme, že tieň je rozptýlený na veľkej ploche. Ak nezadáte hodnoty polomer rozmazania a polomer šírenia, potom sa budú rovnať 0.

tieňový text

Syntax je veľmi podobná tieňový box:

Hodnoty sú rovnaké, len nie roztiahnutý tieň... Príklad použitia:

Vložený do tieňového poľa

Aby ste „preklopili“ tieň vo vnútri objektu, musíte pridať vložka v CSS:

Keď pochopíte základnú syntax box-tieňa, je veľmi ľahké pochopiť princípy implementácie vnútorných tieňov. Hodnoty sú rovnaké, môžete pridať farbu (RGB až hex):

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

Obrázky s tieňmi

Pridanie vnútorného tieňa k obrázku je o niečo ťažšie ako s obyčajným. div... Na začiatok uvádzame obvyklý kód obrázka:

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

Obrázok (
tieň boxu: vložka 0px 0px 10px rgba (0,0,0,0,5);
}

Tieň však nie je viditeľný:

Existuje niekoľko spôsobov, ako vyriešiť tento problém, z ktorých každý má svoje vlastné výhody a nevýhody. Uvažujme o dvoch z nich. Prvým je zabaliť obrázok do obyčajného div:

Div (
výška: 200px;
šírka: 400px;
}

obrázok (
výška: 200px;
šírka: 400px;
poloha: relatívna;
z-index: -2;
}

Všetko funguje, ale musíte pridať trochu ďalších značiek HTML a CSS. Druhým spôsobom je nastavenie obrázka ako pozadia požadovaného bloku:

Div (
výška: 200px;
šírka: 400px;
pozadie: url (http://lorempixum.com/400/200/transport/2);
tieň boxu: vložka 0px 0px 10px rgba (0,0,0,0,9);
}

Pri používaní vnútorných tieňov môžete získať toto:

Vložené do tieňového textu

Na implementáciu vnútorného tieňa textu stačí jednoduché doplnenie kódu vložka nefunguje:

Ak chcete problém vyriešiť, najskôr sa prihláste k nadpisu h1 nastaviť tmavé pozadie a svetlý tieň:

H1 (
farba pozadia: # 565656;
farba: priehľadná;
}

Stáva sa toto:

Pridanie tajnej prísady klip na pozadiektorý vystrihne všetko mimo textu (na tmavom pozadí):

H1 (
farba pozadia: # 565656;
farba: priehľadná;
textový tieň: 0px 2px 3px rgba (255 255 255,0,5);
-webkit-background-clip: text;
-moz-pozadie-klip: text;
klip na pozadí: text;
}

Ukázalo sa to takmer to, čo potrebujeme. Teraz stačí text trochu stlmiť (alfa) a výsledok.

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

Na pridanie tieňa sa používa vlastnosť box-shadow, ktorá má šesť hodnôt, z ktorých sú potrebné iba dve. Na obr. 1 zobrazuje vlastnosť box-shadow so všetkými možnými hodnotami, sú očíslované, aby ich bolo možné identifikovať.

Obrázok: 1. Hodnoty vlastnosti box-shadow

1. kľúčové slovo inset nastavuje tieň vo vnútri prvku;
2. posuňte tieň vodorovne (5px - doprava, -5px - doľava);
3. vertikálny posun (5px - dole, -5px - hore);
4. polomer rozmazania tieňa (0 - ostrý tieň);
5. natiahnutie tieňa (5px - natiahnutie, -5px - kompresia);
6. tieňová farba.

Nezabudnite uviesť iba horizontálny a vertikálny posun, všetky ostatné parametre budú predvolene akceptované. V takom prípade bude tieň ostrý bez rozmazania a čierny.

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

Tab. 1. Kombinácia parametrov tieňa

Kód	Výsledok	Popis
tieň krabice: 5px 5px;		Prudký tieň vpravo a dole.
tieň boxu: -5px -5px;		Vľavo a hore ostrý tieň.
tieň boxu: 0 0 5px;		Rozmazaný tieň okolo prvku.
tieň boxu: 0 0 5px 2px;		Roztiahnite tieň o 2 pixely.
tieň boxu: 0 0 5px 2px červená;		Červená žiara okolo prvku.
tieň boxu: 0,4em 0,4em 5px rgba (122 122 122,0,5);		Priesvitný tieň.
tieň boxu: vložka 0 0 6px;		Tieň vo vnútri.

Ako vidíte z tabuľky, nie je potrebné nastavovať posun tieňa v pixeloch, aj keď je to pohodlné. Farbu tieňa je možné určiť v ľubovoľnom dostupnom formáte, takže na získanie polopriehľadného tieňa je vhodný formát RGBA, taký tieň bude vyzerať dobre na akomkoľvek pozadí. Ako to urobiť, ukazuje príklad 1.

Príklad 1. Tieň v pozadí

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 2. Tieň opakuje zaoblenie rohov bloku.

Obrázok: 2. Pohľad na tieň na obrázku na pozadí

Pri pridávaní „širokého“ tieňa nezabudnite, že môže presahovať viditeľné okno prehliadača a viesť tak k vzhľadu vodorovného posúvača.

Tieň je možné pridať aj k pseudoprvkom, čo sa niekedy vyžaduje pri zložitých rozloženiach. Na obr. 3 ukazuje rohový blok, ku ktorému bol pridaný tieň. Aby ste sa vyhli akýmkoľvek čiaram na križovatke, musíte použiť :: after element a pridať k nemu tieň.

Obrázok: 3. Blok s tieňom

Príklad 2 ukazuje vytvorenie takého bloku.

Príklad 2. Blok s tieňom

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Element nemusí mať jeden tieň, ale niekoľko naraz, ich parametre sú uvedené oddelené čiarkami v hodnote vlastnosti box-shadow. Príklad 3 ukazuje, ako pridať do všetkých obrázkov dvojitý tieň.

Príklad 2. Blok s tieňom

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Obrázok: 4. Obrázok s dvojitým tieňom

Prvý tieň sa zobrazuje vľavo od obrázka s polomerom rozmazania 20px, jeho veľkosť sa zmenší o štvrtý parameter (-20px). Parametre druhého tieňa sa zadávajú za čiarkou, tieň sa zobrazuje napravo od obrázku a pre symetriu sa tiež zmenšuje.

Tiene v CSS je možné implementovať pomerne rýchlo a ľahko, či už ide o tieň políčka alebo tieň textu. Je však také ľahké uvedomiť si vnútorný tieň? Môžete vytvoriť tieň vloženej škatule? A čo rovnaký problém pri používaní textu?

Dnes vám chceme povedať o veľmi jednoduchom spôsobe implementácie vnútorného tieňa, ktorý obsahuje iba niekoľko riadkov kódu. Povieme vám o tieňoch blokov a textov a tiež vám povieme, ako ich môžete zmeniť tak, aby ste získali vložený tieň.

Páči sa vám tento článok? Nezabudnite sa prihlásiť na odber našich.

Tieňová syntax

Pred prechodom na vložené tiene sa pozrime na základnú syntax pre vytváranie dvoch rôznych typov tieňov CSS. Aj keď ste to už robili predtým, obnovme si len pamäť.

tieňový box

Tiene škatule alebo tieň škatule sú pravdepodobne niektoré z najpopulárnejších tieňov v CSS. Potenciálne metódy implementácie sú tu veľmi odlišné a vývojári často používajú svoje vlastné prístupy a aplikácie. Syntax bloku tieňa je všeobecne dosť zložitá so 6 odlišnými hodnotami. Začneme tým, že sa pozrieme na 5 najbežnejších príkladov implementácie.

Ako vidíte, vyššie uvedený zoznam obsahuje zoznam hodnôt pre vodorovné posunutie, zvislé posunutie, polomer rozostrenia, šírenie tieňov a farbu. Prvé dve hodnoty - horizontálny a vertikálny posun - sú veľmi ľahko pochopiteľné. Kladné hodnoty posunú tieň doprava, respektíve nadol, zatiaľ čo záporné hodnoty posunú tieň doľava a nahor. Pozrime sa na príklad oboch hodnôt:

Posledné dve hodnoty, ktoré sú zodpovedné za polomer rozostrenia a polomer rozloženia, sú trochu komplikovanejšie. Asi sa pýtate, aký je rozdiel? Aby sme na ňu odpovedali, pozrime sa najskôr na jednu z nich, ktorú už pravdepodobne poznáte: polomer rozostrenia.

Ako vidíte, ak nepoužívate polomer rozostrenia, budeme môcť vytvoriť tieň s ostrými hranami a vysoká hodnota poskytne veľmi rozmazané hrany. Je to jednoduché, nie? Ako je to s parametrom polomeru? Aký je tu rozdiel? Výkres vám vysvetlí situáciu lepšie ako tisíc slov:

Ako vidíte, polomer šírenia nám umožňuje zväčšiť alebo zmenšiť oblasť tieňa bez toho, aby to ovplyvnilo úroveň jeho rozmazania. Ak považujete tento parameter za veľkosť tieňa, môžete povedať, že sa nemôžete pokaziť.

Ak nepoužívate rozostrenie a šírenie, tieto predvolené hodnoty zostanú na 0. Ak urobíte malú analýzu príkladov na internete, všimnete si, že väčšina ukážok nepoužíva parameter šírenia. Pamätajte tiež, že -webkit verzia box-shadow sa zvyčajne pridáva, aby sa zabránilo problémom s rôznymi prehliadačmi.

tieňový text

Teraz, keď vieme, na čo presne tieň boxu slúži a čo to je, je čas posunúť sa k učeniu syntaxe iného typu tieňa CSS: text-shadow. Našťastie je tu syntax oveľa jednoduchšia ako pri tieňoch polí.

Ako vidíte, väčšina významov je rovnaká, takže ak pochopíte jeden, budete rozumieť aj druhému. Je zaujímavé, že tu nebudete môcť zmeniť polomer tieňa. Bolo by skvelé, keby sme mali túto príležitosť, ale jednoducho tu nie je.

Vložené tieňové bloky

Teraz sme sa naučili základy a teraz rozumiete syntaxi tieňov CSS. Je čas naučiť sa, ako vytvárať vnútorné a vložené tiene. Aby sme mohli tieň previesť na vložku, stačí pridať slovo vložka.

Preto sme začali jednoduchou syntaxou. Fragment kódu box-shadow vás vo všeobecnosti môže trochu zmiasť, ale ak všetkému rozumiete, bude sa vám zdať jednoduchý.

Tu zvyčajne fungujú všetky hodnoty rovnakým spôsobom, iba tieň je umiestnený vo vnútri poľa. Na tomto obrázku vidíme, ako veľmi môže polomer tieňa ovplyvniť to, ako tieň vyzerá:

Všimnite si, že tentokrát sme namiesto HEX použili RGBa. To je skvelé pre tiene, pretože hodnota krytia umožňuje rýchle a ľahké stmavenie alebo zosvetlenie tieňa.

snímky

Je celkom ľahké aplikovať tieň boxu na prázdny div, ale čo ak chcete z obrázka urobiť tieň? Znie to jednoducho, ale v skutočnosti je to tu dosť komplikované. Pozrime sa na kód a uvidíme, aký výsledok povedie. Začnime jednoduchou starou značkou img.

Teraz to zadáme v našom CSS a pridáme box-shadow. Možno si myslíte, že tu niečo také bude fungovať:

Obrázok (
tieň boxu: vložka 0px 0px 10px rgba (0,0,0,0,5);
}
Toto nás však, bohužiaľ, dovedie k nasledujúcemu výsledku. Obrázok bude fungovať, ale tieň bude neviditeľný!

Ako teda na obrázok aplikujeme vnútorný tieň? Existuje niekoľko spôsobov, ako to implementovať, a všetky majú svoje vlastné výhody a nevýhody. Pozrime sa na dva najobľúbenejšie prístupy.

Prvým riešením je zabaliť obrázok do prvku div, ktorý bude mať rovnakú veľkosť ako obrázok, a potom vrhnúť tieň na samotný prvok div, ktorý na obrázok tiež použije relatívne umiestnenie a z-index. Náš kód bude vyzerať takto:

div (
výška: 200px;
šírka: 400px;
}

obrázok (
výška: 200px;
šírka: 400px;
poloha: relatívna;
z-index: -2;
}

Tento prístup funguje, ale vyžaduje ďalší kód a pomerne veľa ďalších CSS. Prípadne môžete použiť obrázok HTML a vložiť obrázok na pozadí pomocou CSS. Pomocou tohto prístupu sa môžete ubezpečiť, že obrázok nezakrýva tieň, a bude predvolene umiestnený pod neho.

div (
výška: 200px;
šírka: 400px;
pozadie: url (http://lorempixum.com/400/200/transport/2);
tieň boxu: vložka 0px 0px 10px rgba (0,0,0,0,9);
}

Ak spojíme tieto techniky s pomerne silným rozšírením, môžeme dosiahnuť dosť silnú vignetáciu obrazu iba pomocou CSS.

Tieň vloženého textu

Aj keď je implementácia tieňov vloženej škatule zložitá, je dosť ľahké ich pochopiť. Pridajte slovo vložka a váš tieň sa stane vnútorným. Je to jednoduché.

Tiene textu sú bohužiaľ oveľa komplikovanejšie. Vložená hodnota je nekompatibilná s tieňom textu, takže tu nebude nič fungovať:

Namiesto toho ich musíme trochu skombinovať. Implementácia je neobvyklá, preto prácu rozdelíme do dvoch krokov, aby sme lepšie pochopili, čo sa tu deje. Najskôr musíme vyplniť nadpis h1 a použiť nasledujúce štýly:

H1 (
farba pozadia: # 565656;
farba: priehľadná;
}
A tak sme sa už dostali do zvláštnej situácie. Nastavili sme tmavú farbu pozadia, biely tieň textu a priehľadnú farbu výplne. Ak sa vám to zdá čudné, pozrite sa na výsledok:

To nie je vôbec to, čo sme potrebovali. Zaujímavosťou je, že sme späť na úplnom začiatku. Tajnou ingredienciou, vďaka ktorej bude všetko fungovať, je parameter background-clip nastavený na text.

H1 (
farba pozadia: # 565656;
farba: priehľadná;
textový tieň: 0px 2px 3px rgba (255 255 255,0,5);
-webkit-background-clip: text;
-moz-pozadie-klip: text;
klip na pozadí: text;
}
Nastavením parametra klipu na pozadí na text môžeme efektívne vyjadriť všetko, čo sa deje na pozadí (obrázky, gradácie, farby atď.) Pozdĺž obrysu textu. Keď to urobíme s kódom, ktorý sme už vytvorili, výsledok bude nasledovný:

Ako vidíte, je to celkom roztomilý efekt. Rozmazané okraje boli vyrezané a teraz vytvárajú dojem vloženého tieňa. Medzitým nám textový tieň umožňuje nastaviť úroveň svetlosti pozadia a tiež vytvára mierny efekt vydutia na vonkajšej strane textu. Ak zmeníme hodnotu tieňa z 0,5 na 0,3, text bude tmavší.

Podpora prehliadača

Ak chcete použiť prístupy s rôznymi podivnými parametrami, ako je napríklad klip na pozadí, musíte vedieť, kde to bude fungovať a kde nie. Ako obvykle, pokiaľ ide o podporu prehliadačov, obrátime sa na.

Na základe tejto tabuľky vychádza parameter klipu na pozadí vo väčšine prehľadávačov celkom dobre. Podporuje to dokonca aj IE9! Môžete mať problémy s niektorými staršími prehľadávačmi.

Záver

Teraz viete, čo by ste mali vedieť o vložených tieňoch v CSS. Toto je veľmi zaujímavá oblasť na preskúmanie. Je nepravdepodobné, že všetky prístupy budú intuitívne a ich zvládnutie bude nejaký čas trvať. Povedzte nám, čo si myslíte o navrhovaných riešeniach a ktoré z nich používate?

Vlastnosť CSS box-shadow pridáva jeden alebo viac tieňov k prvku. Ak chcete určiť viac tieňov, musíte pridať ďalšie hodnoty tieňov oddelené čiarkami.

Podpora prehliadača

Nehnuteľnosť			Opera		IExplorer	Hrana
tieňový box	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Syntax CSS:

tieň boxu: "žiadny | vložiť h-tieň v-tieň rozostrenie-polomer šírka-polomer farba | počiatočné | zdediť";

Syntax jazyka JavaScript:

Object.style.boxShadow \u003d "10px 5px 5px červená"

Hodnoty nehnuteľností

Hodnota	Popis
žiadny	Nezobrazuje sa žiadny tieň. Toto je predvolené nastavenie.
vložka	Nepovinná hodnota. Ak táto hodnota nie je zadaná (predvolená hodnota), bude tieň na vonkajšej strane prvku a vytvorí na prvku efekt vydutia. Ak je vložená vložená hodnota kľúčového slova (hodnoty), tieň spadne dovnútra prvku a vytvorí efekt depresie. Inými slovami, ide o zmenu z vonkajšieho do vnútorného tieňa.
h-tieň	Požadovaná hodnota. Nastavuje polohu vodorovného tieňa. Záporné hodnoty sú povolené.
v-tieň	Požadovaná hodnota. Nastavuje polohu zvislého tieňa. Záporné hodnoty sú povolené.
polomer rozostrenia	Nepovinná hodnota. Nastavuje polomer rozmazania. Čím vyššia je hodnota, tým viac sa rozmazáva a tieň sa zväčšuje a zosvetľuje. Ak nie je zadaná žiadna hodnota, bude mať hodnotu 0 (ostré výrazné tiene). Záporné hodnoty nie sú povolené.
polomer šírenia	Nepovinná hodnota. Veľkosť tieňa (polomer roztiahnutia tieňa). Kladné hodnoty rozšíria tieň a záporné hodnoty sa zmenšia. Ak nie je zadaná žiadna hodnota, bude mať hodnotu 0 (tieň sa zhoduje s veľkosťou prvku).
farba	Nepovinná hodnota. Určuje farbu tieňa (HEX, RGB, RGBA, HSL, HSLA, „Predefined Colors“). Predvolená hodnota je čierna.
	Nastaví vlastnosť na predvolenú hodnotu.
	Označuje, že hodnota je prevzatá z nadradeného prvku.

Verzia CSS

CSS3

Zdedené

Č.

Animovaný

Áno.

Príklad použitia