Njësoj si përditësimi 3, por me rregullat moderne css (=më pak) në mënyrë që të mos kërkohet pozicionim i veçantë në pseudo-element.
#box (ngjyra e sfondit: #3D6AA2; gjerësia: 160 px; lartësia: 90 px; pozicioni: absolute; sipër: llogaritur (10% - 10 px); majtas: llogaritja (50% - 80 px); ) .box-shadow:after ( përmbajtja:""; pozicioni:absolute; gjerësia:100%; fundi:1px; indeksi z:-1; transformimi:shkalla(.9); hije-kuti: 0px 0px 8px 2px #000000; )
PËRDITËSIM 3
#kuti (ngjyra e sfondit: #3D6AA2; gjerësia: 160 px; lartësia: 90 px; margjina-lart: -45 px; margjina majtas: -80 px; pozicioni: absolute; lart: 50%; majtas: 50%; ) .box- shadow:after (përmbajtja: ""; gjerësia: 150 px; lartësia: 1 px; margjina në krye: 88 px; margjina majtas: -75 px; ekrani: bllok; pozicioni: absolut; majtas: 50%; indeksi z: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000;
PËRDITËSIM 2
Me sa duket ju mund ta bëni këtë vetëm me opsionin opsional të etiketës së kutisë CSS, siç sapo specifikuan të gjithë të tjerët. Këtu është demonstrimi:
Webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-hije: 0 4px 4px -2px #000000; kuti-hije: 0 4px 4px -2px #000000;
Kjo do të ishte zgjidhja më e mirë. Parametri shtesë që shtohet përshkruhet si:
Gjatësia e katërt është distanca e përhapjes. Vlerat pozitive bëjnë që forma e hijes të zgjerohet në drejtim përgjatë rrezes së specifikuar. Vlerat negative bëjnë që forma e hijes të pajtohet.
PËRDITËSOJE
Ajo që bëra ishte të krijoja një "element hije" që do të fshihej pas elementit aktual që do të dëshironit të kishit në hije. E bëra gjerësinë e "elementit të hijes" saktësisht më pak të gjerë se elementi aktual, 2 herë më shumë se hija e specifikuar; atëherë e radhita saktë.
#wrapper ( gjerësia: 84 px; pozicioni: relative; ) #element (ngjyra e sfondit: #3D668F; lartësia: 54 px; gjerësia: 100%; pozicioni: relative; z-indeksi: 10; ) #hije (ngjyra e sfondit: # 3D668F; lartësia: 8 px; gjerësia: 80 px; margjina majtas: -40 px; pozicioni: absolute; poshtë: 0 px; majtas: 50%; z-indeksi: 5; -webkit-box-shadow: 0px 2px 4px #000000; - moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000;)
Përgjigje origjinale
Po, mund ta bëni këtë me të njëjtën sintaksë që keni dhënë. Vlera e parë kontrollon pozicionimin horizontal dhe vlera e dytë kontrollon pozicionimin vertikal. Pra, thjesht vendosni vlerën e parë në 0px dhe të dytën në çfarëdo kompensimi që dëshironi të bëni si më poshtë.
Hijet e rregullta janë të lehta për t'u zbatuar duke përdorur hijen e kutisë ose hijen e tekstit. Por, çka nëse keni nevojë të bëni hije të brendshme? Ky artikull përshkruan se si të bëhen këto hije me vetëm disa rreshta kodi.
Sintaksë
Së pari, le të shohim dy mënyrat kryesore për të zbatuar hijet në CSS.kuti-hije
Dizajn kuti-hije përmban disa kuptime të ndryshme:
Kompensimi horizontal Dhe kompensim vertikal- zhvendosja horizontale dhe vertikale, përkatësisht. Këto vlera tregojnë se në cilin drejtim objekti do të hedhë hijen e tij:
Rrezja e turbullimit Dhe rreze e përhapjes pak më e komplikuar. Cili është ndryshimi? Le të shohim një shembull me dy elementë, ku vlerat rrezja e turbullimit ndryshojnë:
Skaji i hijes është thjesht i paqartë. Me vlera të ndryshme rreze e përhapjes ne shohim si më poshtë:
Në këtë rast, ne shohim se hija është e shpërndarë në një zonë të madhe. Nëse nuk specifikoni një vlerë rrezja e turbullimit Dhe rreze e përhapjes, atëherë ato do të jenë të barabarta me 0.
tekst-hije
Sintaksa është shumë e ngjashme me kuti-hije:
Kuptimet janë të ngjashme, por jo përhap-hije. Shembull përdorimi:
Futur në kuti-hije
Për të "rrokullisur" hijen brenda objektit, duhet të shtoni futur në CSS:
Pasi të kuptoni sintaksën bazë të hijes së kutisë, është shumë e lehtë të kuptosh se si të zbatosh hijet e brendshme. Vlerat janë ende të njëjta, mund të shtoni ngjyrë (RGB në hex):
Ngjyra është në formatin RGB, vlera alfa është përgjegjëse për transparencën e hijes:
Imazhe me hije
Shtimi i një hije të brendshme në një imazh është pak më e vështirë sesa shtimi i një hije të rregullt div. Për të filluar, këtu është kodi i zakonshëm i imazhit: 
Është logjike të supozohet se mund të shtoni një hije si kjo:
Img (hije kutie: futur 0px 0px 10px rgba(0,0,0,0,5); )
Por hija nuk është e dukshme:
Ka disa mënyra për të zgjidhur këtë problem, secila prej të cilave ka të mirat dhe të këqijat e veta. Le të shohim dy prej tyre. E para është të mbështillni imazhin në një formë të rregullt div:
Div (lartësia: 200 px; gjerësia: 400 px; hije e kutisë: futur 0px 0px 10px rgba(0,0,0,0.9); ) img (lartësia: 200px; gjerësia: 400px; pozicioni: relative; z-indeksi: -2 ;)
Gjithçka funksionon, por ne duhet të shtojmë një shënim shtesë HTML dhe CSS. Mënyra e dytë është të vendosni imazhin si sfond të bllokut të dëshiruar:
Div (lartësia: 200px; gjerësia: 400px; sfondi: url(http://lorempixum.com/400/200/transport/2); kuti-hije: inset 0px 0px 10px rgba(0,0,0,0.9); )
Kjo është ajo që mund të ndodhë kur përdorni hijet e brendshme:
Futet në tekst-hije
Për të zbatuar një hije të brendshme të tekstit, thjesht shtoni kodit futur nuk punon:
Për të zgjidhur, së pari aplikoni në kokë h1 Vendosni një sfond të errët dhe një hije të lehtë:
H1 (ngjyra e sfondit: #565656; ngjyra: transparente; hije teksti: 0px 2px 3px rgba(255,255,255,0.5); )
Ja çfarë ndodh:
Shtimi i një përbërësi sekret sfond-klip i cili ndërpret çdo gjë që shtrihet përtej tekstit (në një sfond të errët):
H1 (ngjyra e sfondit: #565656; ngjyra: transparente; teksti-hije: 0px 2px 3px rgba(255,255,255,0.5); -kit-web-background-clip: tekst; -moz-background-clip: tekst; sfond-klipi: tekst ;)
Doli pothuajse saktësisht ajo që na duhej. Tani thjesht e errësojmë pak tekstin (alfa), dhe rezultati është:
informacion të shkurtër
Versionet CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Përshkrim
Shton një hije në një element. Është e mundur të përdoren disa hije, duke treguar parametrat e tyre të ndarë me presje; kur aplikoni hijet, hija e parë në listë do të jetë më e lartë, e fundit më e ulët. Nëse një rreze rrumbullakimi specifikohet për një element nëpërmjet veçorisë kufi-radius, atëherë hija do të ketë gjithashtu qoshe të rrumbullakosura. Shtimi i një hije rrit gjerësinë e elementit, kështu që një shirit lëvizës horizontal mund të shfaqet në shfletues.
Sintaksë
kuti-hije: asnjë |<тень> [,<тень>]*
Ku<тень>:
futur<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
Vlerat
asnjë Anulon shtimin e një hije. inset Hija vizatohet brenda elementit. Parametër opsional. x offset Kompensimi horizontal i hijes në lidhje me elementin. Një vlerë pozitive e këtij parametri e zhvendos hijen në të djathtë, një vlerë negative e zhvendos atë në të majtë. Parametri i kërkuar. y offset Kompensimi vertikal i hijes në lidhje me elementin. Një vlerë pozitive e zhvendos hijen poshtë, një vlerë negative e zhvendos atë lart. Parametri i kërkuar. blur Vendos rrezen e turbullimit të hijes. Sa më e lartë kjo vlerë, aq më shumë hija zbutet, duke u bërë më e gjerë dhe më e lehtë. Nëse ky parametër nuk specifikohet, parazgjedhja vendoset në 0, gjë që do ta bëjë hijen të mprehtë dhe jo të paqartë. shtrirje Një vlerë pozitive shtrin hijen, një vlerë negative, përkundrazi, e ngjesh atë. Nëse ky parametër nuk specifikohet, parazgjedhja është 0, gjë që do të bëjë që hije të ketë të njëjtën madhësi me elementin. ngjyra Ngjyra e hijes në çdo format të disponueshëm CSS, hija e parazgjedhur është e zezë. Parametër opsional.Është e mundur të specifikohen disa hije, duke i ndarë parametrat e tyre me presje. Rendi i mëposhtëm merret parasysh: hija e parë në listë vendoset në krye, e fundit në listë është në fund.
HTML5 CSS3 IE Cr Op Sa Fx
Rezultati i shembullit është paraqitur në Fig. 1.
Oriz. 1. Pamja hije në shfletuesin Safari
Shfletuesit
Safari përpara versionit 5.1, Chrome përpara versionit 10.0, Android përpara versionit 4.0 dhe iOS Safari përpara versionit 5.0 mbështesin veçorinë -webkit-box-shadow.
Firefox para versionit 4.0 mbështet veçorinë -moz-box-shadow.
Internet Explorer para versionit 9.0 nuk e mbështet veçorinë box-shadow; në vend të kësaj, mund të përdorni veçorinë jo standarde të filtrit:
Filtri: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Këtu: offX - zhvendosja horizontale e hijes; offY - zhvendosje vertikale e hijes; ngjyra - ngjyra e hijes.
Aplikimi i filtrit të hijes prodhon një hije të qartë dhe të mprehtë, kështu që mund të përdorni filtrin e hijes për një efekt turbullimi.
Filtri: progid:DXImageTransform.Microsoft.shadow(drejtimi=120, ngjyra=#000000, forca=10);
Këtu: drejtimi — këndi i drejtimit të hijes nga 0 në 360°; ngjyra - ngjyra e hijes; forca - zhvendosja e hijes në piksel.
Vetia CSS box-shadow ju lejon të vendosni një hije për një element html. Përdoret mjaft shpesh nga dizajnerët e faqeve të internetit për të dekoruar dhe theksuar disi kornizat me tekst, imazhe dhe për ta bërë përmbajtjen më të lexueshme.
Sintaksa CSS kuti-hije
... kuti-hije : X Y R1 R2 ngjyra ; ...
- X - zhvendosja përgjatë boshtit X (horizontal)
- Y - zhvendosja përgjatë boshtit Y (vertikal)
- R1 - turbullim (sa më e lartë të jetë vlera, aq më i butë është tranzicioni)
- R2 - rrezja e shtrirjes (nëse është pozitive, ajo shtrihet, negative, ajo ngjesh)
- ngjyra - ngjyra (mund të specifikohet në çdo format: #RGB, emri i ngjyrës)
- inset - nëse kjo vlerë është e pranishme, hija do të vendoset brenda bllokut (elementit)
Shembull 1. Kornizë HTML me kuti-hije pa offset
Më poshtë është mënyra më e thjeshtë për të përdorur një hije duke përdorur veçorinë CSS box-shadow në një faqe html, kur ajo mbështillet në mënyrë të barabartë rreth të gjithë kornizës pa zhvendosje.
Shembulli nr. 1. Kornizë me hije
Shembulli nr. 1. Kornizë me hije
Shembulli 2. Korniza HTML me kuti hijesh offset
Pothuajse i njëjti shembull si i pari, por vetëm me kornizën e zhvendosur.
Shembulli nr. 2. Kornizë me hije të kompensuar
Faqja konvertohet në sa vijon
Shembulli nr. 2. Kornizë me hije të kompensuar
Shembulli nr. 3. Korniza e shkëlqimit html
Zbatimi i një hije si një shkëlqim
Shembulli nr. 3. Shkëlqim
Faqja konvertohet në sa vijon
Shembulli nr. 3. Shkëlqim
Shembulli 4. Shkëlqimi i brendshëm i kufirit HTML
Një shkëlqim që drejtohet brenda bllokut dhe nuk i kalon kufijtë e tij. Efekti krijohet duke përdorur atributin inset.
Shembulli nr. 4. Shkelqim i Brendshem
Faqja konvertohet në sa vijon
Shembulli nr. 4. Shkelqim i Brendshem
Shembulli 5. Kombinimi i hijeve në html
Efekti i hijes mund të kombinohet i ndarë me presje. Në këtë rast, formohen rezultate shumë interesante. Për shembull, mund të bëni një kornizë me shumë ngjyra në stilin 3D.
Shembulli nr. 5. Kombinimi i hijeve
Faqja konvertohet në sa vijon
Shembulli nr. 5. Kombinimi i hijeve
Shënim: shfletuesit më të vjetërVersionet IE më të hershme se 9 nuk mbështesin box-shadow. Prefikset e shfletuesit për box-shadow
- -webkit-box-shadow - për Chrome deri në 10, Safari deri në 5.1, Android deri në 4 dhe iOS deri në 5
- -moz-box-shadow - për Firefox deri në versionin 4.0
Hijet e rregullta janë të lehta për t'u zbatuar duke përdorur hijen e kutisë ose hijen e tekstit. Por, çka nëse keni nevojë të bëni hije të brendshme? Ky artikull përshkruan se si të bëhen këto hije me vetëm disa rreshta kodi.
Sintaksë
Së pari, le të shohim dy mënyrat kryesore për të zbatuar hijet në CSS.kuti-hije
Dizajn kuti-hije përmban disa kuptime të ndryshme:
Kompensimi horizontal Dhe kompensim vertikal- zhvendosja horizontale dhe vertikale, përkatësisht. Këto vlera tregojnë se në cilin drejtim objekti do të hedhë hijen e tij:
Rrezja e turbullimit Dhe rreze e përhapjes pak më e komplikuar. Cili është ndryshimi? Le të shohim një shembull me dy elementë, ku vlerat rrezja e turbullimit ndryshojnë:
Skaji i hijes është thjesht i paqartë. Me vlera të ndryshme rreze e përhapjes ne shohim si më poshtë:
Në këtë rast, ne shohim se hija është e shpërndarë në një zonë të madhe. Nëse nuk specifikoni një vlerë rrezja e turbullimit Dhe rreze e përhapjes, atëherë ato do të jenë të barabarta me 0.
tekst-hije
Sintaksa është shumë e ngjashme me kuti-hije:
Kuptimet janë të ngjashme, por jo përhap-hije. Shembull përdorimi:
Futur në kuti-hije
Për të "rrokullisur" hijen brenda objektit, duhet të shtoni futur në CSS:
Pasi të kuptoni sintaksën bazë të hijes së kutisë, është shumë e lehtë të kuptosh se si të zbatosh hijet e brendshme. Vlerat janë ende të njëjta, mund të shtoni ngjyrë (RGB në hex):
Ngjyra është në formatin RGB, vlera alfa është përgjegjëse për transparencën e hijes:
Imazhe me hije
Shtimi i një hije të brendshme në një imazh është pak më e vështirë sesa shtimi i një hije të rregullt div. Për të filluar, këtu është kodi i zakonshëm i imazhit:
Është logjike të supozohet se mund të shtoni një hije si kjo:
Img (hije kutie: futur 0px 0px 10px rgba(0,0,0,0,5); )
Por hija nuk është e dukshme:
Ka disa mënyra për të zgjidhur këtë problem, secila prej të cilave ka të mirat dhe të këqijat e veta. Le të shohim dy prej tyre. E para është të mbështillni imazhin në një formë të rregullt div:
Div (lartësia: 200 px; gjerësia: 400 px; hije e kutisë: futur 0px 0px 10px rgba(0,0,0,0.9); ) img (lartësia: 200px; gjerësia: 400px; pozicioni: relative; z-indeksi: -2 ;)
Gjithçka funksionon, por ne duhet të shtojmë një shënim shtesë HTML dhe CSS. Mënyra e dytë është të vendosni imazhin si sfond të bllokut të dëshiruar:
Div (lartësia: 200px; gjerësia: 400px; sfondi: url(http://lorempixum.com/400/200/transport/2); kuti-hije: inset 0px 0px 10px rgba(0,0,0,0.9); )
Kjo është ajo që mund të ndodhë kur përdorni hijet e brendshme:
Futet në tekst-hije
Për të zbatuar një hije të brendshme të tekstit, thjesht shtoni kodit futur nuk punon:
Për të zgjidhur, së pari aplikoni në kokë h1 Vendosni një sfond të errët dhe një hije të lehtë:
H1 (ngjyra e sfondit: #565656; ngjyra: transparente; hije teksti: 0px 2px 3px rgba(255,255,255,0.5); )
Ja çfarë ndodh:
Shtimi i një përbërësi sekret sfond-klip i cili ndërpret çdo gjë që shtrihet përtej tekstit (në një sfond të errët):
H1 (ngjyra e sfondit: #565656; ngjyra: transparente; teksti-hije: 0px 2px 3px rgba(255,255,255,0.5); -kit-web-background-clip: tekst; -moz-background-clip: tekst; sfond-klipi: tekst ;)
Doli pothuajse saktësisht ajo që na duhej. Tani thjesht e errësojmë pak tekstin (alfa), dhe rezultati është:
