Mreža 

Notranje sence v CSS. Notranje sence v oznakah CSS Html senca okoli slike

Bistveno pomemben je vrstni red snemanja. Prva vrednost je vedno odmik vzdolž osi X, druga - vzdolž osi Y.

Če odmik vzdolž ene od osi ni potreben, ga nastavite na nič:

Class(box-shadow: 0 8px;) – premakni senco samo vzdolž osi Y

Rezultat

Razred (box-shadow: 8px 8px;) – premik po obeh oseh

Rezultat

Negativna vrednost za osi box-shadow

Senca se bo premikala v nasprotno smer:

Class(box-shadow: -8px 8px;) – premakni senco z negativno vrednostjo vzdolž osi X

Rezultat

Polmer zameglitve sence

Tretji parameter lastnosti box-shadow. Če ni podana, je vrednost 0 in velikost sence je enaka velikosti elementa, na katerega je uporabljena.

Razred (box-shadow: 0 48px 0;) – senca podvaja dimenzije elementa, na katerega je uporabljena

Rezultat

Ko je vrednost večja od nič, robovi izgubijo definicijo, senca postane večja in vizualno svetlejša. Zameglitev se uporablja z vseh strani:

Razred (box-shadow: 0 0 8px;) – brez odmika, samo zameglitev

Rezultat

Razred (box-shadow: 0 8px 8px;) – zamik in zameglitev osi Y

Rezultat

Negativna vrednost se šteje za napako in senca sploh ne bo prikazana.

Polmer raztezanja sence

Četrti parameter lastnosti box-shadow. Spremeni velikost sence glede na element. Razteza se v vse smeri:

Razred (box-shadow: 0 0 0 8px;) – brez premika ali zamegljenosti, samo raztezanje

Rezultat

V tem primeru je senca 16 slikovnih pik večja od elementa po širini in višini: 8px levo + 8px desno in 8px zgoraj + 8px spodaj.

Negativna vrednost raztezanja sence v CSS

Senca se ne razteza, ampak se zoži z vseh strani za določeno vrednost:

Razred (box-shadow: 0 16px 0 -8px;) – zmanjša senco z negativno vrednostjo

Rezultat

Barva sence

Privzeto barva sence podvaja barvo pisave: kot v zgornjih primerih.

Barva sence je določena v katerem koli razpoložljivem formatu CSS:

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

Elementu dajte modro senco:

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

Rezultat

Notranja senca

Parameter vložek prikaže senco znotraj bloka.

Za razliko od zgoraj navedenih možnosti ni strogega vrstnega reda pisanja. Obe možnosti bosta dali enak rezultat:

Box-shadow: 0 8px #3a8fe7 inset; box-shadow: vstavljena 0 8px #3a8fe7;

Rezultat

Drugo možnost je lažje razumeti pri branju kode.

Več senc

Več senc je določenih ločenih z vejicami. Vrstni red prikaza od zgoraj navzdol:

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

Rezultat

Če zamenjate mesta, modra senca ne bo vidna:

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

Rezultat

Notranja in zunanja senca se nastavita istočasno:

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

Rezultat

Zaobljena senca

Če je elementu podana lastnost mejni polmer, bo imela senca zaobljene vogale.

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

Rezultat

Z nastavitvijo razteznosti sence povečamo njeno zaokroženost. Na primer, polmer obrobe je 8 slikovnih pik, razteg sence pa 4.

8+4=12px je polmer zaokrožitve sence.

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

Rezultat

Enako načelo velja za krčenje sence, ko je vrednost negativna.

8+(-4)=4px - dobimo dvakrat manjšo zaokroženost sence.

Če je stiskanje sence večje od polmera obrobe, bomo dobili senco s pravimi koti. Na primer, stiskanje je 16px.

8+(-16)=(-8), vendar filet ne more imeti negativne vrednosti in uporabljena bo ničla.

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

Rezultat

Lastnost CSS box-shadow Podpirajo ga vsi priljubljeni brskalniki razen Opera Mini.

Lastnost box-shadow elementu doda eno ali več senc. Senca je kopija elementa, zamaknjena za določeno razdaljo. Sence so lahko zunanje ali notranje, zamegljene ali ravne in lahko sledijo obrisom blokov z zaobljenimi vogali. Z uporabo ključne besede inset se znotraj elementa ustvarijo sence, zaradi česar je element vizualno voluminozen ali depresiven.

Kako narediti senco škatle z lastnostjo box-shadow

Podpora za brskalnik

IE: 9.0
Rob: 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-
Brskalnik za Android: 4.0, 2.1 -webkit-

1. Sintaksa lastnosti box-shadow

Lastnost box-shadow pripne eno ali več senc polju. Lastnost sprejme bodisi vrednost none , ki označuje, da ni senc, ali z vejicami ločen seznam senc, razvrščenih od začetka do konca.

Vsaka senca je ločena senca, ki jo predstavljajo 2 do 4 dolžine, izbirna barva in izbirna vstavljena ključna beseda. Dovoljene dolžine 0 ; izpuščene barve so privzete vrednosti lastnosti barve.

Nepremičnina se ne deduje.

riž. 1. Sintaksa lastnosti box-shadow
Vrednote:
x-odmik Nastavi vodoravni odmik sence. Pozitivna vrednost nariše zamik sence na desno od besedila, negativna dolžina nariše senco na levo.
y-odmik Nastavi navpični odmik sence. Pozitivna vrednost premakne senco navzdol, negativna vrednost premakne senco navzgor.
zamegljenost Nastavi polmer zameglitve. Negativne vrednosti niso dovoljene. Če je vrednost zameglitve enaka nič, je rob sence oster. V nasprotnem primeru, višja kot je vrednost, bolj je zamegljen rob sence.
raztezanje Nastavi razdaljo, za katero se senca poveča. Pozitivne vrednosti povzročijo, da se senca razširi v vse smeri za določen radij. Negativne vrednosti povzročijo krčenje sence. Pri notranjih sencah razširitev sence pomeni stiskanje oblike oboda sence.
barva Nastavi sence. Če barve ni, se uporabljena barva vzame iz lastnosti barve. Za Safari je treba določiti barvo sence.
vložek Spremeni senco bloka iz zunanje sence v notranjo senco.
nič Privzeta vrednost pomeni, da ni sence.
začetnica Nastavi vrednost lastnosti na privzeto vrednost.
dedovati Podeduje vrednost lastnosti od nadrejenega elementa.

Učinki sence se uporabijo na naslednji način: prva senca je na vrhu, ostale pa zadaj. Sence ne vplivajo na postavitev in lahko prekrivajo druge elemente ali njihove sence. Kar zadeva kontekste zlaganja in vrstni red risanja, so zunanje sence elementa narisane neposredno pod ozadjem tega elementa, notranje sence elementa pa so narisane neposredno nad ozadjem tega elementa (pod obrobo in sliko obrobe, če obstaja).

Če ima element več polj, vsi prejmejo sence, vendar se sence narišejo samo tam, kjer bodo narisane tudi meje; glej box-decoration-break.

Sence ne povzročijo drsenja ali povečajo velikosti drsljivega območja.

2. Primeri senc blokov

2.1. Notranja senca

.example-shadow-1 (ozadje: #e6e3df; text-align: center;) .example-shadow-1 span ( rob: 50px; višina: 100px; širina: 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. Ravna senca na eni strani

stanovanje

stanovanje

.example-shadow-2 ( ozadje: bež; text-align: center; ) .example-shadow-2 a ( display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; text -dekoracija: brez; ozadje: #55acee; ​​​​box-shadow: 0 .example-shadow-2 a:hover (ozadje: #6FC6FF;)

2.3. Material design senca

.example-shadow-3 (ozadje: #e8e8e8; text-align: center;) .example-shadow-3 span (ozadje: belo; display: inline-block; width: 200px; height: 100px; margin: 50px; box -senca: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)

Pojasnila:

  1. , - Lastnosti jezika CSS, ki se uporabljajo za ustvarjanje senc.
  2. , , — parametri lastnosti sence.
  3. , , , — Lastnosti CSS, odgovorne za spreminjanje velikosti in lokacije elementov.
  4. — oznaka, odgovorna za ustvarjanje povezav.
  5. Selektorji so nekakšne povezave, s pomočjo katerih CSS določa, kateri elementi naj uporabijo določene sloge.
  6. Hover je izbirnik stanja.
  7. — lastnost spremembe animiranega predmeta.

Za doseganje tridimenzionalnega učinka se pogosto uporabljajo sence. Omogočajo vam, da besedilom in blokom daste edinstven slog, v kombinaciji s posebnimi pisavami pa lahko dosežete odličen učinek.

CSS nam ponuja toliko prostora za domišljijo in eksperimentiranje, da boste potrebovali leta, da jih preizkusite vse.

V tem članku bomo šli v podrobnosti o ustvarjanju senc v CSS. Poleg navadnih zunanjih senc vam bomo pokazali, kako ustvariti notranje in državne sence.

CSS - box shadow. lastnost box-shadow


html( ozadje: #fff; ) telo (širina: 80 %; rob: 0 samodejno; barva ozadja: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0,88) )

html (

ozadje : #fff ;

telo (

širina: 80 %;

rob: 0 samodejno;

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

Orodje nam omogoča, da okoli bloka ustvarimo eno ali več senc s poljubno barvo.

V bistvu, kaj je senca? To je natančna kopija območja elementa, ki ima določeno barvo in lokacijo. Te parametre lahko nastavite z lastnostjo box-shadow.

Lastnosti sence se uporabljajo v tem vrstnem redu:

  1. Premaknite se vodoravno.
  2. Premakni se navpično.
  3. Stopnja nejasnosti.
  4. Raztezanje.
  5. Barva sence.

To je vrstni red, v katerem je treba določiti parametre sence. Glavna stvar je, da ne zamenjate vrednosti, saj so prve 4 nastavljene na enak način z uporabo številskih vrednosti - , , in tako naprej.

Prvi parameter, ki se imenuje — premakne senco vodoravno glede na blok. Sprejema vse vrednosti, vključno z negativnimi.

Negativne vrednosti premaknejo senco v levo, pozitivne vrednosti pa premaknejo senco v desno. Vrednost parametra je lahko enaka 0 pri zameglitvi senc vzdolž navpične osi.

Naslednja po vrsti je nepremičnina . Odgovoren za navpično premikanje sence. Sprejema tudi vse vrednosti - pozitivne in negativne. Negativne vrednosti premaknejo senco navzgor, pozitivne vrednosti pa navzdol.

Ta parameter je mogoče nastaviti na 0. Običajno se uporablja za vodoravno zameglitev senc.

Pozor! Priporočamo, da vrednost navedete v slikovnih pikah. Uporabite lahko druge vrednosti - , , % in drugi, vendar to ni priporočljivo. Vse te vrednosti so precej velike za ustvarjanje senc. Če jih določite, lahko pretiravate z velikostmi.

3 vrednost - ali zameglitev. Te vrednosti ni treba vnesti, ne da bi jo navedli, sence bodo še vedno delovale.

Navedena vrednost določa polmer, po katerem bo senca zamegljena. Negativne vrednosti niso navedene.

Tukaj lahko uporabite tudi večje vrednosti. Močna zameglitev bo pomagala ustvariti barvit učinek, vendar le v nekaterih situacijah.

Predzadnja vrednost, ki je odgovorna za raztezanje sence. Tudi to ni obvezno, vendar lahko vaši senci doda nekaj barve.

Razširitev nastane zaradi raztezanja osrednjega trdnega dela sence, ki se nahaja med zamegljenimi robovi.

Ta parameter lahko sprejme vse vrednosti, tako pozitivne kot negativne. Pozitivne vrednosti senco raztegnejo, negativne pa skrčijo.

In zadnji parameter - . Prav tako ga ni treba določiti, saj ima senca polja privzeto svojo barvo - črno.

Za spremembo barve je primeren kateri koli barvni sistem - kot tudi standardne barve.

Pozor! Če želite, da lastnost deluje v Safariju, morate ta parameter določiti, tudi če uporabljate standardno črno barvo.

Notranja senca - CSS


html( ozadje: #fff; ) telo (širina: 80 %; rob: 0 samodejno; barva ozadja: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0,88) vstavek;

html (

ozadje : #fff ;

telo (

širina: 80 %;

rob: 0 samodejno;

barva ozadja: rgba (150,60,60,0.54)

box-shadow: -1px 5px 5px 5px rgba (77,63,63,0.88) vstavljeno;

Pa si poglejmo prvi primer uporabe senc. Tukaj si bomo ogledali ustvarjanje notranje sence za blok telesa.

Za začetek odprite naš dokument HTML in ga izpolnite. Ni vam treba določiti nobenih oznak, ne izpolnite vsebine, glavna stvar je ustvariti oznako .

Odprite naš dokument CSS in napišite oznako , to bo naš glavni selektor.

Nato odprite zavite oklepaje in napišite lastnost . Nastavite lokacijo, zameglite, raztegnite. Te vrednosti že veste, kako nastaviti. Za tem smo določili barvo sence, naredili smo jo belo, lahko pa jo nastavite po svojih željah.

Zdaj pa najpomembnejše. Če želite ustvariti notranjo senco bloka v CSS, morate določiti vstavljeno vrednost. Določite jo lahko takoj po določitvi barve.

Kot rezultat, smo končali s tem blokom:

HTML/CSS – senca besedila


html( ozadje: #fff; ) telo (širina: 80 %; rob: 0 samodejno; barva ozadja: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0.88) vložek; ) div( margin: 150px; box-shadow: -1px 5px 5px rgba(77,63,63,0.88); font-size: 25px; )

html (

ozadje : #fff ;

telo (

širina: 80 %;

rob: 0 samodejno;

barva ozadja: rgba (150,60,60,0.54)

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

velikost pisave: 25px;

Ustvarjeno na podoben način, vendar namesto box-shadow z uporabo lastnosti . Parametri lastnosti so v naslednjem vrstnem redu.

  1. Horizontalni premik.
  2. Navpični premik.
  3. Radij zameglitve. Ni potrebno.
  4. barva.

Kot lahko vidite, v tej nepremičnini ni možnosti raztezanja. Velikost sence bo vedno enaka velikosti besedila; tega ni mogoče popraviti.

Zelo priročno je nanašati sence eno na drugo. Če želite to narediti, morate navesti več skupin parametrov

Prva senca bo bližje besedilu, druga pa nad njim. Spominja na delo z lastnostmi orisov in obrob, vendar tukaj lahko ustvarite 2, 3 ali več senc.

Hover Shadows - CSS

Zdaj pa poglejmo ustvarjanje senc za določeno stanje. V našem primeru bomo uporabili gumb.

Če želite ustvariti senco za gumb, ga morate najprej postaviti. Odprite oznako a, zapišite razred gumba zanj in poljubno besedilno vrednost za boljši prikaz.

Najprej nastavimo umestitev z lastnostjo roba in povečajmo gumb na določeno velikost. Če ga želite povečati, lahko uporabite lastnosti širine in višine ali uporabite lastnost oblazinjenja.

Sedaj nastavimo barvo ozadja, besedilo in okvir. Naš gumb je pripravljen, začnimo ustvarjati senco.

Najprej ustvarimo običajno senco, majhne velikosti, z uporabo box-shadow. Privzeto bo viden, brez premikanja miške nad gumb.


Naredimo najpreprostejši učinek - povečamo senco. Lahko ga naredite zamegljenega ali spremenite raztegljivost po svojem okusu.

Za najboljši učinek nastavimo lastnost prehoda za običajno povezavo in nastavimo čas na 0,5 s.

Zdaj imamo odličen gumb s čudovito senco, ki se bo ob lebdenju gladko razširila.


Zaključek

V tem članku smo spoznali vse osnovne načine ustvarjanja senc. Razpravljali smo o vseh lastnostih in parametrih senc.

Vse elemente, ki so bili predstavljeni na posnetkih zaslona, ​​najdete v izvorni mapi. Če želite, jih lahko sami raziskujete in eksperimentirate z vrednostmi. Morda vam bo šlo veliko bolje kot nam.

Pozdravljeni, dragi bralci. Danes bomo naredili z vami čudovita senca za bloke z uporabo CSS. Mislim, da vam bo to zelo koristilo, še posebej, če izdelujete predloge. In bloki s sencami so videti zelo privlačni in moderni.

Podpora za brskalnik

V bistvu vsi sodobni brskalniki podpirajo senčne učinke:

  • Internet Explorer 9.0 in novejši;
  • Firefox 3.5 in novejši;
  • Chrome 1 in višje;
  • Safari 3 in novejši;
  • Opera 10.5 in višje.

Rad bi omenil tudi eno pomembno točko: za nekatere brskalnike bomo uporabljali določene predpone. Uporablja se za Firefox -moz-, za Chrome in Safari morate uporabiti predpono -webkit.

No, zdaj pa preidimo na najbolj zanimiv del. Poglejmo vse sence posebej, učinkov bo 8.

Učinek sence 1

V tem primeru je senca bloka na dnu.

HTML

Učinek 1

CSS

poravnava besedila: sredina; položaj:relativni; zgoraj:80px; ) .box ( širina:70%; višina:200px; ozadje:#FFF; rob:40px samodejno; ) /*========= ================ ========== * Učinek 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;

Učinek sence 2

V tem primeru gre senca od bloka levo in desno, v sredini pa je ni. Izkazalo se je, da je zelo zanimiv učinek.

HTML

Učinek 2

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinek 2 * == ===================================== =========================*/ .effect2 ( položaj: relativno; .effect2:prej, .effect2:potem ( z-indeks: -1 ; položaj: ""; levo: 50%; največja širina: #777; 777;moz-box-shadow: 0 10px : rotate(-3deg); -moz-transform: rotate(-3deg); -transformacija: zasukaj (3deg); -o-transformiraj: zasukaj (3deg); desno: 10px : avto)

Učinek sence 3

Tukaj je senca od bloka samo na levi strani.

HTML

Učinek 3

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinek 3 * == ===================================== =========================*/ .effect3 ( položaj: relativno; .effect3:pred ( z-index: -1; položaj: absolutno; vsebina: 15px; širina: 80%; ozadje: 0 10px -moz; box-shadow: 0 15px 10px #777; -moz-transform: rotate(-3deg);

Učinek sence 4

Senca na desni.

HTML

Učinek 4

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinek 4 * == ===================================== =========================*/ .effect4 ( položaj: relativno; .effect4:after ( z-indeks: -1; položaj: absolutno; vsebina: 15px; levo: 50%; ozadje: 15px #777 -moz-box-shadow: 0 15px rotate(3deg); -moz-transform: rotate(3deg);

Učinek sence 5

V tem primeru se je senca na obeh straneh močneje pomaknila navzdol.

HTML

Učinek 5

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinek 5 * == ===================================== =========================*/ .effect5 ( položaj: relativno; .effect5:prej, .effect5:potem ( z-indeks: -1 ; položaj: ""; levo: 50%; največja širina: #777; 777;moz-box-shadow: 0 35px : rotate(-8deg); -moz-transform: rotate(-8deg); -transformacija: vrtenje (8deg); -transformacija: vrtenje (8deg); desno: 10px : avto)

Učinek sence 6

Tukaj je učinek ukrivljenih senc na dnu bloka.

HTML

Učinek 6

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinek 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žek rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložek polja: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) vstavljeno; -index:-1; 0 20px rgba(0,0,0,8); -moz-box-shadow:0,0,0,0,8; shadow:0 20px rgba(0,0,0,0.8); bottom:10px; -moz-border-radius:after6:right:auto; - webkit-transform :skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform: poševno (8deg) zasukaj (3deg); transformacija: poševnost (8 stopinj) vrtenje (3 stopinj); )

Učinek sence 7

Isti učinek le s senco pod in nad blokom.

HTML

Učinek 7

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinek 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žek rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložek polja: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; .effect7:before, .effect7:after (vsebina:""; položaj:absolutno; z -index:-1; 0 20px rgba(0,0,0,8); -moz-box-shadow:0,0,0,0,8; shadow:0 20px rgba(0,0,0,0,8); bottom:10px; -moz-border-radius:100px/10px; ) zasukaj (3deg); -moz-transform:skew(8deg) zasukaj(3deg); -o-transform: poševno (8deg) zasukaj (3deg); transformacija: poševnost (8 stopinj) vrtenje (3 stopinj); )

Učinek sence 8

Učinek ukrivljenih senc na straneh bloka.

HTML

Učinek 8

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinek 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žek rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) vložek polja: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; .effect8:before, .effect8:after (vsebina:""; položaj:absolutno; z -index:-1; 0 20px rgba(0,0,0,8); -moz-box-shadow:0,0,0,0,8; shadow:0 20px rgba(0,0,0,0.8); bottom:right:0; -moz-border-radius:100px / 10px .effect8: po (right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg) ); -o-transform: poševno (8deg) zasukaj (3deg); transformacija: poševnost (8 stopinj) vrtenje (3 stopinj); )

To je vse, dragi prijatelji. Če ničesar ne razumete, vprašajte v komentarjih. Se vidiva kmalu.

Enako kot posodobitev 3, vendar s sodobnimi pravili css (=less), tako da posebno pozicioniranje na psevdoelementu ni potrebno.

#box (barva ozadja: #3D6AA2; širina: 160px; višina: 90px; položaj: absolutno; zgoraj: calc(10% - 10px); levo: calc(50% - 80px); ) .box-shadow:after ( vsebina:""; širina:100%; z-indeks:-1; 0px 8px 2px #000000;

POSODOBITEV 3

#box (barva ozadja: #3D6AA2; širina: 160px; višina: 90px; margin-top: -45px; margin-left: -80px; položaj: absolutno; zgoraj: 50%; levo: 50%; ) .box- shadow:after (vsebina: ""; širina: 150px; višina: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000;

POSODOBITEV 2

Očitno lahko to storite samo z izbirno možnostjo oznake polja CSS, kot so pravkar določili vsi ostali. Tukaj 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;

To bi bila najboljša rešitev. Dodatni parameter, ki je dodan, je opisan kot:

Četrta dolžina je razdalja širjenja. Pozitivne vrednosti povzročijo, da se oblika sence razširi v smeri vzdolž določenega radija. Negativne vrednosti povzročijo, da se oblika sence strinja.

NADGRADNJA

Ustvaril sem "senčni element", ki bi se skril za dejanskim elementom, ki bi ga želeli imeti v senci. Širina "senčnega elementa" sem naredila natanko manjšo od dejanskega elementa, 2-kratno navedeno senco; potem sem ga pravilno poravnal.

#wrapper (širina: 84 slikovnih pik; položaj: relativni; ) #element (barva ozadja: #3D668F; višina: 54 slikovnih pik; širina: 100 %; položaj: relativni; z-indeks: 10; ) #senca (barva ozadja: # 3D668; višina: 40 pikslov; z-indeks: 0 slikovnih pik 4 slikovnih pik #000000;

Izvirni odgovor

Da, to lahko storite z isto sintakso, ki ste jo navedli. Prva vrednost nadzoruje vodoravni položaj, druga vrednost pa navpični položaj. Torej preprosto nastavite prvo vrednost na 0px in drugo na poljubni odmik, ki ga želite narediti, kot sledi.