Hijet e brendshme në CSS. Inner Shadows në CSS Shadow Stretch Radius

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ë:

Një hije nën një element blloku në një faqe zakonisht përdoret për të krijuar një efekt tredimensional, për të tërhequr vëmendjen te elementi ose si pjesë e një dizajni. Një hije e vogël nën elementë i jep gjithashtu vëllimit dhe thellësisë së faqes.

Për të shtuar një hije, përdorni veçorinë box-shadow, e cila ka gjashtë vlera, nga të cilat kërkohen vetëm dy. Në Fig. Figura 1 tregon veçorinë box-shadow me të gjitha vlerat e mundshme, të numëruara për t'i identifikuar ato.

Oriz. 1. Vlerat e vetive kuti-hije

fjala kyçe e futur vendos hijen brenda elementit;
zhvendosni hijen horizontalisht (5px - djathtas, -5px - majtas);
zhvendosje vertikale (5px - poshtë, -5px - lart);
rrezja e turbullimit të hijes (0 - hije e mprehtë);
shtrirje hije (5px - shtrirje, -5px - tkurrje);
ngjyra e hijes.

Është e nevojshme të specifikoni vetëm zhvendosjen horizontale dhe vertikale; të gjithë parametrat e tjerë do të merren si parazgjedhje. Në këtë rast, hija do të jetë e mprehtë pa turbullim ose të zezë.

Duke kombinuar parametra të ndryshëm dhe vlerat e tyre, mund të merrni një shumëllojshmëri të gjerë të llojeve të hijeve. Në tabelë 1 tregon kodin dhe rezultatin në të cilin ai çon.

Tabela 1. Kombinimet e parametrave të hijes

Kodi	Rezultati	Përshkrim
kuti-hije: 5px 5px;		Hije e mprehtë djathtas dhe poshtë.
kuti-hije: -5px -5px;		Hije e mprehtë në të majtë dhe lart.
kuti-hije: 0 0 5px;		Hije e paqartë rreth një elementi.
kuti-hije: 0 0 5px 2px;		Zgjero hijen me 2 piksel.
kuti-hije: 0 0 5px 2px e kuqe;		Shkëlqim i kuq rreth elementit.
kuti-hije: 0,4em 0,4em 5px rgba(122,122,122,0,5);		Hije e tejdukshme.
kuti-hije: inset 0 0 6px;		Hije brenda.

Siç mund të shihet nga tabela, zhvendosja e hijes nuk duhet të specifikohet në piksel, megjithëse kjo është e përshtatshme. Ngjyra e hijes mund të specifikohet në çdo format të disponueshëm; për shembull, për të marrë një hije të tejdukshme, formati RGBA është i përshtatshëm; një hije e tillë do të duket e mirë në çdo sfond. Shembulli 1 tregon se si ta bëni këtë.

Shembulli 1: Hije në një foto në sfond

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Blloko me hije

Mos shkoni kundër flamujve të armikut kur ato janë në rregull të përsosur; mos e sulmoni kampin e armikut kur është i pathyeshëm; ky është menaxhimi i ndryshimit.

Sun Tzu, përkth. Nikolai Konrad

Rezultati i këtij shembulli është paraqitur në Fig. 2. Hija ndjek rrumbullakimin e qosheve të bllokut.

Oriz. 2. Paraqitja e hijes në foton e sfondit

Kur shtoni një hije "të gjerë", kini parasysh se ajo mund të shtrihet përtej kufijve të dukshëm të dritares së shfletuesit dhe kështu të rezultojë në shfaqjen e një shiriti lëvizës horizontal.

Hijet gjithashtu mund t'u shtohen pseudo-elementeve; kjo ndonjëherë kërkohet për paraqitjet komplekse. Në Fig. Figura 3 tregon një bllok kokë me një hije të shtuar në të. Për të shmangur ndonjë vijë në kryqëzim, duhet të përdorni pseudo-elementin ::after dhe t'i shtoni një hije.

Oriz. 3. Blloko me hije

Shembulli 2 tregon krijimin e një blloku të tillë.

Shembulli 2. Blloko me hije

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Blloko me hije

Drejtimi

Blloko përmbajtjen

Një element mund të ketë më shumë se një hije, por disa në të njëjtën kohë; parametrat e tyre renditen të ndarë me presje në vlerën e vetive box-shadow. Shembulli 3 tregon se si të shtoni një hije të dyfishtë në të gjitha imazhet.

Shembulli 2. Blloko me hije

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Imazhi

Rezultati i këtij shembulli është paraqitur në Fig. 4.

Oriz. 4. Image Double Shadow

Hija e parë shfaqet në të majtë të figurës me një rreze turbullimi prej 20 px, madhësia e saj zvogëlohet me parametrin e katërt (-20 px). Parametrat e hijes së dytë tregohen pas pikës dhjetore; hija shfaqet në të djathtë të figurës dhe gjithashtu zvogëlohet për simetri.

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ë:

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:

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ë:

Ju mund të shtoni një hije në elementë dhe të ndryshoni pamjen e saj duke përdorur veçorinë box-shadow CSS. Ky stil ju lejon të realizoni efekte interesante, për shembull, vëllimin dhe tredimensionalitetin e bllokut. Prona mbështetet nga të gjithë shfletuesit modernë. Përjashtimet janë IE8 dhe Opera Mini.

veti box-hije: sintaksë

Ky stil është shkruar si më poshtë:

Kuti-hije: inset 4px 4px 8px 5px #333333;

Le të shqyrtojmë me radhë se për çfarë është përgjegjës secili parametër (nga e majta në të djathtë):

Fjalë kyçe inset: parametër që nuk duhet të specifikohet; tërheq një hije brenda element.
kompensimi X: Përcakton shkallën në të cilën hija është zhvendosur horizontalisht në lidhje me elementin. Një vlerë pozitive do të thotë zhvendosje në të djathtë, negative - në të majtë. Një vlerë prej 0 do të thotë se hija nuk është e zhvendosur.
Y Shift: Përcakton sasinë e zhvendosjes vertikale të hijes. Një vlerë pozitive do të thotë një zhvendosje poshtë, një vlerë negative do të thotë një zhvendosje lart. Një vlerë prej 0 është një hije pa zhvendosje.
Rrezja e turbullimit: Kjo është shkalla e turbullimit të hijes. Sa më e lartë të jetë vlera, aq më e paqartë është hija. Nëse parametri nuk është specifikuar, vlera e paracaktuar është 0. Në këtë rast, hija do të jetë krejtësisht e qartë.
Zgjerim: parametër opsional përgjegjës për shtrirjen e hijes përgjatë të dy boshteve; sa më e lartë të jetë vlera, aq më e madhe është shtrirja. Zgjatja funksionon vetëm nëse është i pranishëm parametri i mëparshëm. Vlera e paracaktuar është 0.
Ngjyra e hijes: gjithçka është e qartë me këtë parametër - përcakton ngjyrën e hijes së elementit. Ngjyra e paracaktuar është e zeza.

Shënim. Shfletuesit Android dhe versionet më të vjetra të iPhone Safari kërkojnë prefiksin -webkit- që vetia box-shadow CSS të funksionojë siç duhet.

Kjo pronë mund të marrë disa grupe vlerash (të bëjë disa hije në të njëjtën kohë). Për ta bërë këtë, do t'ju duhet të listoni këto grupe parametrash të ndara me presje. Për shembull:

Kuti-hije: 15px 15px 20px #8b0163, futur 15px 15px 20px #630046;

Shembuj kuti-hije

Për t'ju ndihmuar të kuptoni më mirë fuqinë dhe bukurinë e vetive CSS box-shadow, ne do t'ju tregojmë disa shembuj që mund t'i zbatoni në mënyrë të sigurtë. Kjo pronë mund të transformojë shumë një bllok të zakonshëm!

Hije e lehtë

Kuti-hije: 0 2px 4px rgba(0, 0, 0, .25);

Efekt letre

Hije kutie: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .1);

Shtresa të shumta

Kuti-hije: 6px 6px #ccc, 12px 12px #a3a3a3;

Kornizë e trefishtë

Kuti-hije: 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);

Këndet

Kuti-hije: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Siç mund ta shihni, vetia kuti-hije lë shumë hapësirë për imagjinatën. Ju mund t'i transformoni blloqet ashtu siç dëshironi - gjëja kryesore është të keni një ndjenjë proporcioni! 😉

Në kapitullin tjetër, do të eksploroni vetitë e gjerësisë dhe lartësisë, të cilat përcaktojnë madhësinë e elementeve.

Sot do të mësojmë se si të bëjmë hije CSS pa imazhe. Pas përfundimit të këtij tutoriali, nuk do t'ju duhet më një gjenerator i hijeve CSS.

Avantazhi kryesor i hijeve të krijuara me CSS3 është lehtësia e zbatimit dhe zvogëlimi i numrit të kërkesave në server (pasi nuk përdorim më imazhe). Për të bërë një hije CSS, na duhet një etiketë div dhe një pronë CSS box-shadow. Nuk do të keni nevojë për ndonjë shënim shtesë, sepse ne do të krijojmë pseudo elementë :after dhe :bere që do t'i vendosim pas objektit kryesor (një div me klasën bllokoj).

Hidhini një sy kodit HTML për të cilin do të krijojmë një hije CSS3:

përmbajtja

Më pas, mund të shihni shembuj të gatshëm dhe kodin e kërkuar për t'i zbatuar ato. Për të minimizuar tekstin në faqe, ne do të heqim veçoritë CSS me prefikset e shfletuesit. Kodi i plotë mund të shihet duke klikuar në lidhjen "Shembull" që korrespondon me shembullin.

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; rreze-kufi:4px; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) futur; ) .block:para, .block:after (përmbajtja:""; pozicioni:absolute; z-indeksi:-2; poshtë:15px; majtas:10px ; gjerësia: 50%; lartësia: 20%; gjerësia maksimale: 300 pikselë; hije e kutisë: 0 15 px 10 px rgba(0, 0, 0, 0.7); transformimi: rrotullimi (-3 gradë); ) .blloku: pas (djathtas :10px; majtas:auto; transformim:rrotulloj(3deg); )

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) futur; kufiri: 1px solid #efefef; rreze-kufi:0 0 120px 120px / 0 0 6px 6px; ) .block:para, .block:after (përmbajtja:"; pozicioni:absolute ; indeksi z:-2; poshtë: 12 px; majtas: 10 px; gjerësia: 50%; lartësia: 55%; gjerësia maksimale: 200 px; hije-kuti: 0 8 px 12 px rgba (0, 0, 0, 0.5); transformim:shtresë(-8deg) rrotullim(-3deg); ) .block:after (djathtas:10px; majtas:auto; transformim:shtrirë(8deg) rrotullim(3deg); )

Duke përdorur një hije mund të jepni një perspektivë blloku. Shih shembullin.

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) futur; ) .blloku:përpara, .blloku:pas (përmbajtja:""; pozicioni:absolute; z-indeksi:-2; ) .blloku:përpara ( majtas:80px; poshtë:5px ; gjerësia: 50%; lartësia: 35%; gjerësia maksimale: 200 px; hije e kutisë: -80 px 0 8 px rgba (0, 0, 0, 0,4); transformimi: ankorimi (50 gradë); transformimi-origjina: 0 100% ;) .block:after (ekrani:asnjë;)

Hija CSS për bllokun e ngritur. Shih shembullin.

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) futje; hije e kutisë: 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.1) futur; ) .blloku:përpara, .blloku:pas (përmbajtja:""; pozicioni:absolut; indeksi z:-2; )

Shembull i hijes CSS3 për një bllok të palosur vertikalisht. Shih shembullin.

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) futur; ) .blloku:para, .blloku:pas (përmbajtja:""; pozicioni:absolute; z-indeksi:-2; ) .blloku:përpara (lart:10px; poshtë:10px ; majtas:0; djathtas:50%; kuti-hije:0 0 15px rgba(0,0,0,0,6); rreze-kufi:10px / 100px; )

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) futur; ) .blloku:para, .blloku:pas (përmbajtja:""; pozicioni:absolute; z-indeksi:-2; ) .blloku:përpara (lart:10px; poshtë:10px ; majtas:0; djathtas:0; kuti-hije:0 0 15px rgba(0,0,0,0.6); rreze-kufi:10px / 100px; )

Shembull i hijes CSS3 për një bllok të palosur horizontalisht. Shih shembullin.

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) futur; ) .blloku:përpara, .blloku:pas (përmbajtja:""; pozicioni:absolute; z-indeksi:-2; ) .blloku:para (lart:50%; poshtë: 0px; majtas:10px; djathtas:10px; box-hije:0 0 15px rgba(0,0,0,0.6); rreze-kufi:100px / 10px; )

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) futur; ) .blloku:para, .blloku:pas (përmbajtja:""; pozicioni:absolute; z-indeksi:-2; ) .blloku:para (lart:0px; poshtë:0px ; majtas: 10 pikselë; djathtas: 10 pikselë; hije e kutisë: 0 0 15 pikselë rgba(0,0,0,0,6); rreze kufiri: 100 px / 10 px; )

Hija CSS3 për bllokun e rrotulluar. Shih shembullin.

.blloku ( pozicioni:relativ; gjerësia:40%; mbushja:1em; margjina:2em 10px 4em; sfondi:#fff; rreze-kufi:4px; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:asnjë; transform:rotate(-3deg); ) .block > :first-child:fore ( content:""; position:absolute; z-indeksi:-1; lart: 0px; poshtë:0; majtas:0; djathtas:0px; sfond:#fff; kuti-hije:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) futur; ) .blloku:përpara, .blloku:pas (përmbajtja:""; pozicioni:absolute; z-indeksi:-2; poshtë:15px; majtas:10px; gjerësia:50% ; lartësi: 20%; gjerësi maksimale: 300 px; kuti-hije: 0 15 px 10 px rgba(0, 0, 0, 0.7); transformim: rrotullim (-3 gradë); ) .blloku: pas (djathtas: 10 px; majtas: automatik; transformim: rrotullim (3 gradë); )