Net 

Vnútorné tiene v CSS. Vnútorné tiene v CSS Html tagy tieň okolo obrázka

Poradie nahrávania je zásadne dôležité. Prvá hodnota je vždy posun pozdĺž osi X, druhá - pozdĺž osi Y.

Ak nie je potrebný posun pozdĺž jednej z osí, nastavte ho na nulu:

Class(box-shadow: 0 8px;) – posun tieňa iba pozdĺž osi Y

Výsledok

Class(box-shadow: 8px 8px;) – posun pozdĺž oboch osí

Výsledok

Záporná hodnota pre osi box-shadow

Tieň sa bude pohybovať opačným smerom:

Class(box-shadow: -8px 8px;) – posun tieňa so zápornou hodnotou pozdĺž osi X

Výsledok

Polomer rozostrenia tieňov

Tretí parameter vlastnosti box-shadow. Ak nie je zadaný, hodnota je 0 a veľkosť tieňa sa rovná veľkosti prvku, na ktorý sa aplikuje.

Class(box-shadow: 0 48px 0;) – tieň duplikuje rozmery prvku, na ktorý sa aplikuje

Výsledok

Keď je hodnota väčšia ako nula, okraje strácajú jasnosť, tieň sa zväčšuje a je vizuálne ľahší. Blur sa aplikuje zo všetkých strán:

Class(box-shadow: 0 0 8px;) – žiadny posun, iba rozmazanie

Výsledok

Class(box-shadow: 0 8px 8px;) – odsadenie a rozmazanie osi Y

Výsledok

Záporná hodnota sa považuje za chybu a tieň sa vôbec nezobrazí.

Polomer roztiahnutia tieňa

Štvrtý parameter vlastnosti box-shadow. Zmení veľkosť tieňa vzhľadom na prvok. Rozťahuje sa vo všetkých smeroch:

Class(box-shadow: 0 0 0 8px;) – žiadne posunutie alebo rozmazanie, iba roztiahnutie

Výsledok

V tomto prípade je tieň o 16 pixelov väčší ako šírka a výška prvku: 8 pixelov vľavo + 8 pixelov vpravo a 8 pixelov hore + 8 pixelov dole.

Záporná hodnota roztiahnutia tieňa v CSS

Tieň sa neroztiahne, ale zo všetkých strán sa zúži o zadanú hodnotu:

Class(box-shadow: 0 16px 0 -8px;) – zníženie tieňa so zápornou hodnotou

Výsledok

Farba tieňa

V predvolenom nastavení farba tieňa duplikuje farbu písma: ako v príkladoch vyššie.

Farba tieňa je určená v akomkoľvek dostupnom formáte CSS:

  • #ff0009
  • rgb(255; 0; 9)
  • hsl(358, 100 %, 50 %);

Dajte prvku modrý tieň:

Trieda(box-shadow: 0 8px #3a8fe7;)

Výsledok

Vnútorný tieň

Parameter vložka zobrazí tieň vo vnútri bloku.

Na rozdiel od vyššie uvedených možností neexistuje prísne poradie písania. Obe možnosti poskytnú rovnaký výsledok:

Box-shadow: 0 8px #3a8fe7 vložka; box-shadow: inset 0 8px #3a8fe7;

Výsledok

Druhá možnosť je ľahšie pochopiteľná pri čítaní kódu.

Niekoľko tieňov

Viaceré tiene sú oddelené čiarkami. Zobraziť poradie zhora nadol:

Class( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )

Výsledok

Ak vymeníte miesta, modrý tieň nebude viditeľný:

Class( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )

Výsledok

Vnútorný a vonkajší tieň sú nastavené súčasne:

Trieda (box-shadow: 0 16px #3ae7af, vložka 0 8px #3a8fe7; )

Výsledok

Zaoblený tieň

Ak je prvku daná vlastnosť hraničný polomer, tieň bude mať zaoblené rohy.

Class( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )

Výsledok

Nastavením roztiahnutia tieňa zväčšíme jeho zaoblenie. Napríklad polomer okraja je 8 pixelov a roztiahnutie tieňa je 4.

8+4=12px je polomer zaoblenia tieňa.

Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )

Výsledok

Rovnaký princíp platí pre zmenšovanie tieňa, keď je hodnota záporná.

8+(-4)=4px – získame zaoblenie tieňa, ktoré je dvakrát menšie.

Ak je kompresia tieňa väčšia ako border-radius, dostaneme tieň s pravými uhlami. Napríklad kompresia je 16px.

8+(-16)=(-8), ale zaoblenie nemôže mať zápornú hodnotu a použije sa nula.

Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )

Výsledok

Vlastnosť CSS box-shadow Podporované všetkými populárnymi prehliadačmi okrem Opery Mini.

Vlastnosť box-shadow pridáva k prvku jeden alebo viac tieňov. Tieň je kópia prvku posunutá o zadanú vzdialenosť. Tiene môžu byť vonkajšie alebo vnútorné, rozmazané alebo ploché a môžu sledovať obrysy blokov so zaoblenými rohmi. Pomocou kľúčového slova inset sa vo vnútri prvku vytvoria tiene, vďaka čomu je prvok vizuálne objemný alebo depresívny.

Ako vytvoriť tieň boxu pomocou vlastnosti box-shadow

Podpora prehliadača

IE: 9.0
Hrana: 12.0
Firefox: 4,0, 3,5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Prehliadač Android: 4.0, 2.1 -webkit-

1. Syntax vlastnosti box-shadow

Vlastnosť box-shadow pripája jeden alebo viac tieňov k rámčeku. Vlastnosť akceptuje buď hodnotu none , ktorá označuje žiadne tiene, alebo čiarkami oddelený zoznam tieňov zoradených od začiatku do konca.

Každý tieň je samostatný tieň reprezentovaný 2 až 4 dĺžkami, voliteľnou farbou a voliteľným kľúčovým slovom vložky. Povolené dĺžky 0 ; vynechané farby predvolene na hodnotu vlastnosti color.

Nehnuteľnosť sa nededí.

Ryža. 1. Syntax vlastnosti box-shadow
Hodnoty:
x-posun Nastaví horizontálne odsadenie tieňa. Kladná hodnota vykresľuje odsadenie tieňa napravo od textu, záporná dĺžka vykresľuje tieň naľavo.
y-posun Nastaví zvislé odsadenie tieňa. Kladná hodnota posúva tieň nadol, záporná hodnota posúva tieň nahor.
rozmazať Nastavuje polomer rozostrenia. Záporné hodnoty nie sú povolené. Ak je hodnota rozmazania nula, potom je okraj tieňa ostrý. V opačnom prípade platí, že čím je hodnota vyššia, tým je okraj tieňa rozmazanejší.
strečing Nastaví vzdialenosť, o ktorú sa tieň zväčší. Kladné hodnoty spôsobia, že sa tieň roztiahne vo všetkých smeroch o určený polomer. Záporné hodnoty spôsobujú zmenšenie tieňa. Pre vnútorné tiene znamená rozšírenie tieňa stlačenie tvaru obvodu tieňa.
farba Nastavuje tiene. Ak tam nie je žiadna farba, použitá farba sa prevezme z vlastnosti color. Pre Safari musí byť špecifikovaná farba tieňa.
vložka Zmení vrhnutý tieň bloku z vonkajšieho na vnútorný tieň.
žiadny Predvolená hodnota znamená žiadny tieň.
počiatočné Nastaví hodnotu vlastnosti na predvolenú hodnotu.
dediť Zdedí hodnotu vlastnosti z nadradeného prvku.

Efekty tieňov sa aplikujú nasledovne: prvý tieň je navrchu a zvyšok je za ním. Tiene neovplyvňujú rozloženie a môžu prekrývať iné prvky alebo ich tiene. Pokiaľ ide o kontexty skladania a poradie kreslenia, vonkajšie tiene prvku sa kreslia priamo pod pozadie tohto prvku a vnútorné tiene prvku sa kreslia priamo nad pozadím tohto prvku (pod okrajom a obrázkom okraja, ak existuje).

Ak má prvok viacero políčok, všetky dostanú tiene, ale tiene sa vykreslia len tam, kde budú nakreslené aj okraje; viď krabica-dekorácia-prestávka.

Tiene nespôsobujú posúvanie ani nezväčšujú veľkosť posúvateľnej oblasti.

2. Príklady blokových tieňov

2.1. Vnútorný tieň

.example-shadow-1 ( background: #e6e3df; text-align: center; ) .example-shadow-1 span ( margin: 50px; height: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0,5), 1px 1px 5px rgba(255, 255, 255, 1);

2.2. Plochý tieň na jednej strane

plochý

plochý

.example-shadow-2 ( pozadie: béžová; text-align: center; ) .example-shadow-2 a ( display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; text -dekorácia: žiadna; pozadie: #55acee;

2.3. Materiálové prevedenie tieň

.example-shadow-3 ( background: #e8e8e8; text-align: center; ) .example-shadow-3 span ( background: white; display: inline-block; width: 200px; height: 100px; margin: 50px; box -shadow: 0 14px 28px rgba(0,0,0,0,25), 0 10px 10px rgba(0,0,0,0,22)

vysvetlenia:

  1. , - Vlastnosti jazyka CSS používané na vytváranie tieňov.
  2. , , — parametre vlastnosti tieňa.
  3. , , , — Vlastnosti CSS, zodpovedné za zmenu veľkosti a umiestnenia prvkov.
  4. — tag, zodpovedný za vytváranie odkazov.
  5. Selektory sú akési prepojenia, pomocou ktorých CSS určuje, ktoré prvky majú aplikovať určité štýly.
  6. Hover je volič stavu.
  7. — vlastnosť zmeny animovaného objektu.

Na dosiahnutie trojrozmerného efektu sa často používajú tiene. Umožňujú vám dať textom a blokom jedinečný štýl a v kombinácii so špeciálnymi fontami môžete dosiahnuť skvelý efekt.

CSS nám ponúka toľko priestoru pre fantáziu a experimentovanie, že vám bude trvať roky, kým ich všetky vyskúšate.

V tomto článku sa budeme podrobne venovať vytváraniu tieňov v CSS. Okrem bežných vonkajších tieňov vám ukážeme, ako vytvárať vnútorné a stavové tiene.

CSS - box shadow. vlastnosť box-shadow


html( pozadie: #fff; ) body( šírka: 80 %; okraj: 0 auto; farba pozadia: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 ,0,88) )

html (

pozadie : #fff ;

telo (

šírka: 80 %;

okraj: 0 auto;

box-shadow : -1px 5px 5px 5px rgba (77,63,63,0,88)

Tento nástroj nám umožňuje vytvoriť jeden alebo viac tieňov okolo bloku s ľubovoľnou farbou.

V podstate, čo je tieň? Ide o presnú kópiu plochy prvku, ktorá má špecifickú farbu a umiestnenie. Tieto parametre je možné nastaviť pomocou vlastnosti box-shadow.

Vlastnosti tieňa sa používajú v tomto poradí:

  1. Pohybujte sa vodorovne.
  2. Pohybujte sa vertikálne.
  3. Úroveň neurčitosti.
  4. Strečing.
  5. Farba tieňa.

Toto je poradie, v ktorom by mali byť špecifikované parametre tieňa. Hlavnou vecou nie je zamieňať si hodnotu, pretože prvé 4 sú nastavené rovnakým spôsobom pomocou číselných hodnôt - , , a tak ďalej.

Prvý parameter, ktorý je tzv — posunie tieň horizontálne vzhľadom na blok. Prijíma akékoľvek hodnoty, vrátane záporných.

Záporné hodnoty posúvajú tieň doľava a kladné hodnoty posúvajú tieň doprava. Hodnota parametra sa môže rovnať 0 pri rozmazaní tieňov pozdĺž zvislej osi.

Ďalšia v poradí je nehnuteľnosť . Zodpovedá za vertikálne posúvanie tieňa. Tiež akceptuje akékoľvek hodnoty - pozitívne aj negatívne. Záporné hodnoty posúvajú tieň nahor a kladné hodnoty posúvajú tieň nadol.

Tento parameter je možné nastaviť na 0. Zvyčajne sa používa na horizontálne rozostrenie tieňov.

Pozor! Odporúčame zadať hodnotu v pixeloch. Môžete použiť iné hodnoty - , , % a ďalšie, ale to sa neodporúča. Všetky tieto hodnoty sú dosť veľké na vytváranie tieňov. Ak ich špecifikujete, môžete to preháňať s veľkosťami.

3 hodnota - alebo rozmazať. Túto hodnotu nie je potrebné zadávať bez jej zadania, tiene budú stále fungovať.

Zadaná hodnota určuje polomer, pozdĺž ktorého bude tieň rozmazaný. Záporné hodnoty nie sú uvedené.

Tu je možné použiť aj väčšie hodnoty. Výrazné rozostrenie pomôže vytvoriť farebný efekt, ale len v niektorých situáciách.

Predposledná hodnota, ktorá je zodpovedná za roztiahnutie tieňa. Toto je tiež voliteľné, ale môže vášmu tieňu pridať trochu farby.

Rozšírenie nastáva v dôsledku natiahnutia centrálnej pevnej časti tieňa, ktorá sa nachádza medzi rozmazanými okrajmi.

Tento parameter môže akceptovať akékoľvek hodnoty, kladné aj záporné. Kladné hodnoty rozširujú tieň, zatiaľ čo záporné hodnoty ho zmenšujú.

A posledný parameter - . Nie je tiež potrebné špecifikovať, pretože v predvolenom nastavení má tieň krabice svoju vlastnú farbu - čiernu.

Na zmenu farby je vhodný akýkoľvek farebný systém – aj štandardné farby.

Pozor! Ak chcete, aby vlastnosť fungovala v Safari, potom tento parameter musíte zadať, aj keď používate štandardnú čiernu farbu.

Vnútorný tieň – CSS


html( pozadie: #fff; ) body( šírka: 80 %; okraj: 0 auto; farba pozadia: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 0,88) vložka;

html (

pozadie : #fff ;

telo (

šírka: 80 %;

okraj: 0 auto;

farba pozadia: rgba (150,60,60,0,54)

box-shadow : -1px 5px 5px 5px rgba (77,63,63,0,88 ) inset ;

Pozrime sa teda na prvý príklad použitia tieňov. Tu sa pozrieme na vytvorenie vnútorného tieňa pre blok tela.

Ak chcete začať, otvorte náš HTML dokument a vyplňte ho. Nemusíte zadávať žiadne značky, nevypĺňajte obsah, hlavná vec je vytvoriť značku .

Otvorte náš CSS dokument, napíšte značku , bude to náš hlavný selektor.

Ďalej otvorte zložené zátvorky a napíšte vlastnosť . Nastavte polohu, rozmažte, roztiahnite. Tieto hodnoty už viete nastaviť. Potom sme nastavili farbu tieňa, urobili sme ho bielym, ale môžete si ho nastaviť podľa seba.

Teraz to najdôležitejšie. Ak chcete vytvoriť vnútorný tieň bloku v CSS, musíte zadať hodnotu vloženia. Môžete ho určiť ihneď po definovaní farby.

V dôsledku toho sme skončili s týmto blokom:

HTML/CSS - Textový tieň


html( pozadie: #fff; ) body( šírka: 80 %; okraj: 0 auto; farba pozadia: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 ,0,88) inset; ) div( margin: 150px; box-shadow: -1px 5px 5px 5px rgba(77,63,63,0,88); font-size: 25px; )

html (

pozadie : #fff ;

telo (

šírka: 80 %;

okraj: 0 auto;

farba pozadia: rgba (150,60,60,0,54)

5px rgba(77,63,63,0,88);

veľkosť písma: 25px;

Vytvorené podobným spôsobom, ale namiesto box-shadow pomocou vlastnosti . Parametre vlastnosti sú v nasledujúcom poradí.

  1. Horizontálny posun.
  2. Vertikálny posun.
  3. Polomer rozmazania. Nie je to potrebné.
  4. Farba.

Ako vidíte, v tejto vlastnosti nie je možnosť roztiahnutia. Veľkosť tieňa bude vždy identická s veľkosťou textu, nedá sa to opraviť.

Je veľmi vhodné nanášať tiene na seba. Aby ste to dosiahli, musíte uviesť niekoľko skupín parametrov

Prvý tieň bude umiestnený bližšie k textu a druhý nad ním. Pripomína prácu s vlastnosťami obrysu a okraja, ale tu môžete vytvoriť 2, 3 alebo viac tieňov.

Hover Shadows - CSS

Teraz sa pozrime na vytváranie tieňov pre konkrétny stav. V našom príklade použijeme tlačidlo.

Ak chcete vytvoriť tieň pre tlačidlo, musíte ho najskôr umiestniť. Otvorte značku a, zapíšte si triedu tlačidla a akúkoľvek textovú hodnotu pre lepšie zobrazenie.

Najprv nastavíme umiestnenie pomocou vlastnosti margin a zväčšíme tlačidlo na určitú veľkosť. Ak ju chcete zväčšiť, môžete použiť vlastnosti width a height, alebo použiť vlastnosť padding.

Teraz nastavíme farbu pozadia, text a rám. Naše tlačidlo je pripravené, začnime vytvárať tieň.

Najprv si pomocou box-shadow vytvoríme obyčajný tieň, malej veľkosti. V predvolenom nastavení bude viditeľné bez toho, aby ste na tlačidlo umiestnili kurzor myši.


Urobme najjednoduchší efekt - zväčšiť tieň. Môžete ho rozmazať alebo zmeniť úsek podľa svojho vkusu.

Pre najlepší efekt nastavme vlastnosť prechodu pre bežný odkaz a nastavme čas na 0,5s.

Teraz tu máme skvelé tlačidlo s krásnym tieňom, ktorý sa plynulo roztiahne, keď naň nadviažete.


Záver

V tomto článku sme sa dozvedeli o všetkých základných spôsoboch vytvárania tieňov. Prebrali sme všetky vlastnosti a parametre tieňov.

Všetky prvky, ktoré boli prezentované na snímkach obrazovky, nájdete v zdrojovom priečinku. Ak chcete, môžete ich preskúmať sami a experimentovať s hodnotami. Možno vám to pôjde oveľa lepšie ako nám.

Dobrý deň, milí čitatelia. Dnes budeme robiť s vami krásny tieň pre bloky pomocou CSS. Myslím, že to bude pre vás veľmi užitočné, najmä ak robíte šablóny. A bloky s tieňmi vyzerajú veľmi atraktívne a moderne.

Podpora prehliadača

V podstate všetky moderné prehliadače podporujú efekty tieňov:

  • Internet Explorer 9.0 a vyšší;
  • Firefox 3.5 a vyšší;
  • Chrome 1 a vyššie;
  • Safari 3 a vyššie;
  • Opera 10.5 a vyššia.

Chcel by som tiež spomenúť jeden dôležitý bod: pre niektoré prehliadače budeme používať určité predpony. Používa sa pre Firefox -moz-, pre Chrome a Safari musíte použiť predponu - webkit.

No a teraz prejdime k najzaujímavejšej časti. Pozrime sa na všetky tiene samostatne, bude ich 8 efektov.

Efekt tieňa 1

V tomto príklade je tieň bloku v spodnej časti.

HTML

Účinok 1

CSS

text-align:center; poloha:relatívna; top:80px; ) .box (šírka:70%; výška:200px; pozadie:#FFF; okraj:40px automaticky; ) /*========================= ========== * Účinok 1 * ====================================== ===========*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777;

Efekt tieňa 2

V tomto príklade ide tieň z bloku doľava a doprava, ale v strede nie je žiadny. Ukazuje sa to ako veľmi zaujímavý efekt.

HTML

Účinok 2

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinok 2 * == ==================================== =========================*/ .efekt2 ( pozícia: relatívna; .efekt2:predtým, .efekt2:po (index z: -1) ; pozícia: absolútny obsah: 15 pixelov: 10 pixelov; max.: 300 pixelov; 777; -moz-box-shadow: 0 15px 10px #777 : otočiť (-3deg); -ms-transform: otočiť (-3deg); -transform: rotácia(3deg) -o-transform: rotácia(3deg) ; : auto)

Efekt tieňa 3

Tu je tieň z bloku iba naľavo.

HTML

Účinok 3

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinok 3 * == ==================================== =========================*/ .efekt3 ( pozícia: relatívna; .efekt3:pred (z-index: -1; pozícia: absolútna); obsah: "" dole: 10px; šírka: 80%; pozadie: #777 -moz-; box-shadow: 0 15px 10px #777 -webkit-transform: otočiť (-3deg) ; -moz-transform: otočiť (-3deg);

Efekt tieňa 4

Tieň na pravej strane.

HTML

Účinok 4

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinok 4 * == ==================================== =========================*/ .efekt4 ( pozícia: relatívna; .efekt4: po ( z-index: -1; pozícia: absolútna; obsah: ""; vpravo: 10 pixelov; šírka: 80%; pozadie: #777; ; -moz-box-shadow: 0 15px 10px #777; -moz-transform: rotovat(3deg);

Efekt tieňa 5

V tomto prípade sa tieň na oboch stranách posunul smerom nadol výraznejšie.

HTML

Účinok 5

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinok 5 * == ==================================== =========================*/ .efekt5 ( pozícia: relatívna; .efekt5:predtým, .efekt5:po (index z: -1) ; pozícia: absolútny obsah: 25 pixelov: 50 %; šírka: 300 pixelov; 777; -moz-box-shadow: 0 35px 20px #777 : otočiť (-8 stupňov); -ms-transform: otočiť (-8 stupňov); -transform: rotovat(8deg) -o-transform:otočit(8deg) ; : auto)

Efekt tieňa 6

Tu je efekt zakrivených tieňov v spodnej časti bloku.

HTML

Účinok 6

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 6 * == ==================================== =========================*/ .effect6 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložka rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložka; 0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset ) .effect6:before, .effect6:after ( content:""; position:absolute; z; -index:-1 -webkit-box-shadow:0 0 20px rgba(0, 0,0,0,8); -moz-box-shadow:0 0 20px rgba(0,0,0,0,8); shadow:0 0 20px rgba(0,0,0,0.8); vľavo:10px; webkit-transform :skew(8deg) Rotation(3deg); -moz-transform:skew(8deg) Rotation(3deg); -o-transformácia: skosenie (8 stupňov) otočenie (3 stupňov); transform:skew(8deg) rotation(3deg); )

Efekt tieňa 7

Rovnaký efekt len ​​s tieňom pod a nad blokom.

HTML

Účinok 7

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 7 * == ==================================== =========================*/ .effect7 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložka rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložka; 0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset ) .effect7:before, .effect7:after ( content:""; position:absolute; z; -index:-1 -webkit-box-shadow:0 0 20px rgba(0, 0,0,0,8); -moz-box-shadow:0 0 20px rgba(0,0,0,0,8); shadow:0 0 20px rgba(0,0,0,0.8); vľavo:10px; -moz-border-radius:100px / 10px (vpravo:10px; zľava:); auto -webkit-transform: skew(8deg) rotovat(3deg); -moz-transform:skew(8deg) rotovat(3deg); -o-transform: zošikmenie (8 stupňov) otočenie (3 stupne); transform:skew(8deg) rotation(3deg); )

Efekt tieňa 8

Efekt zakrivených tieňov po stranách bloku.

HTML

Účinok 8

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 8 * == ==================================== =========================*/ .effect8 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložka rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložka; 0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0 , 0, 0, 0,1) inset ) .effect8:before, .effect8:after ( content:""; position:absolute; z; -index:-1 -webkit-box-shadow:0 0 20px rgba(0, 0,0,0,8); -moz-box-shadow:0 0 20px rgba(0,0,0,0,8); shadow:0 0 20px rgba(0,0,0,0.8 left:0 right:0; -moz-border-radius:100px / 10px ) .efekt8:; after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotation(3deg); -moz-transform:skew(8deg) rotation(3deg); -ms-transform:skew(8deg) rotation(3deg) ); -o-transformácia: skosenie (8 stupňov) otočenie (3 stupňov); transform:skew(8deg) rotation(3deg); )

To je všetko, milí priatelia. Ak niečomu nerozumiete, určite sa opýtajte v komentároch. Do skorého videnia.

Rovnaké ako aktualizácia 3, ale s modernými pravidlami css (=menej), takže sa nevyžaduje špeciálne umiestnenie na pseudoprvku.

#box ( background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); ) .box-shadow:after ( obsah:""; z-index:-1; 0px 8px 2px #000000;

AKTUALIZÁCIA 3

#box ( background-color: #3D6AA2; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; ) .box- shadow:after ( content: ""; šírka: 150px; výška: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 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

Zrejme to môžete urobiť iba s voliteľnou možnosťou značky CSS box, ako to práve špecifikovali všetci ostatní. Tu je demo:

Webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;

Toto by bolo najlepšie riešenie. Dodatočný parameter, ktorý sa pridáva, je opísaný takto:

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

AKTUALIZOVAŤ

To, čo som urobil, bolo vytvoriť „tieňový prvok“, ktorý by sa skrýval za skutočným prvkom, ktorý by ste chceli mať v tieni. Urobil som šírku „prvku tieňa“ presne menšiu ako skutočný prvok, 2-násobok špecifikovaného tieňa; potom som to zarovnal správne.

#wrapper ( šírka: 84px; pozícia: relatívna; ) #element ( farba pozadia: #3D668F; výška: 54px; šírka: 100 %; pozícia: relatívna; z-index: 10; ) #shadow ( farba pozadia: # 3D668F; výška okraja: -40px; z-index: 0px 2px 4px #000000;

Pôvodná odpoveď

Áno, môžete to urobiť s rovnakou syntaxou, ktorú ste poskytli. Prvá hodnota riadi horizontálne umiestnenie a druhá hodnota ovláda vertikálne umiestnenie. Stačí teda nastaviť prvú hodnotu na 0px a druhú na akýkoľvek posun, ktorý by ste chceli urobiť nasledovne.