Kivuli chini ya kipengee cha kuzuia kwenye ukurasa kawaida hutumiwa kuunda athari ya pande tatu, kuvutia umakini wa kitu hicho, au kama sehemu ya muundo. Kivuli kidogo chini ya vipengele pia hutoa kiasi cha ukurasa na kina.

Ili kuongeza kivuli, tumia mali ya sanduku-kivuli, ambayo ina maadili sita, ambayo ni mbili tu zinazohitajika. Katika Mtini. Mchoro wa 1 unaonyesha sifa ya kivuli-kisanduku na thamani zote zinazowezekana, zilizohesabiwa ili kuzitambua.

Mchele. 1. Maadili ya mali ya sanduku-kivuli

1. neno kuu la kuingiza huweka kivuli ndani ya kipengele;
2. kuhama kivuli kwa usawa (5px - kulia, -5px - kushoto);
3. kuhama kwa wima (5px - chini, -5px - juu);
4. kivuli blur radius (0 - kivuli mkali);
5. kunyoosha kivuli (5px - kunyoosha, -5px - kupungua);
6. rangi ya kivuli.

Ni muhimu kutaja tu mabadiliko ya usawa na wima yatachukuliwa kwa default. Katika kesi hii, kivuli kitakuwa mkali bila blur au nyeusi.

Kutokana na mchanganyiko vigezo tofauti na maana zao, aina mbalimbali za aina za kivuli zinaweza kupatikana. Katika meza 1 inaonyesha msimbo na matokeo ambayo inaongoza.

Jedwali 1. Mchanganyiko wa vigezo vya kivuli

Kanuni	Matokeo	Maelezo
sanduku-kivuli: 5px 5px;		Kivuli chenye ncha kali kulia na chini.
sanduku-kivuli: -5px -5px;		Kivuli kikali upande wa kushoto na juu.
sanduku-kivuli: 0 0 5px;		Kivuli kilichotiwa ukungu karibu na kipengele.
sanduku-kivuli: 0 0 5px 2px;		Panua kivuli kwa pikseli 2.
sanduku-kivuli: 0 0 5px 2px nyekundu;		Mwanga mwekundu kuzunguka kipengele.
sanduku-kivuli: 0.4em 0.4em 5px rgba(122,122,122,0.5);		Kivuli cha uwazi.
sanduku-kivuli: inset 0 0 6px;		Kivuli ndani.

Kama inavyoonekana kutoka kwa jedwali, mabadiliko ya kivuli sio lazima yaainishwe kwa saizi, ingawa hii ni rahisi. Rangi ya kivuli inaweza kutajwa katika yoyote umbizo linaloweza kufikiwa, hivyo, yanafaa kwa ajili ya kupata kivuli cha translucent Muundo wa RGBA, kivuli vile kitaonekana vizuri dhidi ya historia yoyote. Mfano 1 unaonyesha jinsi ya kufanya hivyo.

Mfano 1: Kivuli kwenye picha ya usuli

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Matokeo mfano huu inavyoonyeshwa kwenye Mtini. 2. Kivuli kinafuata kuzunguka kwa pembe za block.

Mchele. 2. Kuonekana kwa kivuli kwenye picha ya nyuma

Wakati wa kuongeza kivuli "pana", fahamu kwamba inaweza kupanua zaidi ya dirisha la kivinjari kinachoonekana na hivyo kusababisha kuonekana. mstari wa usawa tembeza.

Vivuli vinaweza pia kuongezwa kwa vipengele vya pseudo; Katika Mtini. Mchoro wa 3 unaonyesha kizuizi cha kichwa na kivuli kilichoongezwa kwake. Ili kuzuia mistari yoyote kwenye makutano, lazima utumie ::baada ya kipengee cha uwongo na uongeze kivuli kwake.

Mchele. 3. Zuia na kivuli

Mfano wa 2 unaonyesha uundaji wa kizuizi kama hicho.

Mfano 2. Kuzuia na kivuli

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Kipengele kinaweza kuwa na zaidi ya kivuli kimoja, lakini vigezo vyao kadhaa vimeorodheshwa vikitenganishwa na koma kwa thamani ya sifa ya kivuli-kisanduku. Mfano wa 3 unaonyesha jinsi ya kuongeza kivuli mara mbili kwa picha zote.

Mfano 2. Kuzuia na kivuli

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Matokeo ya mfano huu yanaonyeshwa kwenye Mtini. 4.

Mchele. 4. Picha ya Kivuli Mbili

Kivuli cha kwanza kinaonyeshwa upande wa kushoto wa picha na radius ya ukungu ya 20px, ukubwa wake umepunguzwa na parameta ya nne (-20px). Vigezo vya kivuli cha pili vinaonyeshwa baada ya hatua ya decimal; kivuli kinaonyeshwa kwa haki ya picha na pia hupunguzwa kwa ulinganifu.

Sawa na Sasisha 3, lakini na sheria za kisasa css (= chini) ili hakuna nafasi maalum inayohitajika kwenye kipengele cha uwongo.

#box ( rangi ya usuli: #3D6AA2; upana: 160px; urefu: 90px; nafasi: kabisa; juu: calc(10% - 10px); kushoto: calc(50% - 80px); ) .sanduku-kivuli:baada ya ( maudhui:""; upana: 100% index:-1; 0px 8px

SASISHA 3

#box ( rangi ya usuli: #3D6AA2; upana: 160px; urefu: 90px; ukingo-juu: -45px; ukingo-kushoto: -80px; nafasi: kabisa; juu: 50%; kushoto: 50%; ) .box- kivuli:baada ya ( maudhui: ""; upana: 150px; urefu: 1px; ukingo-juu: 88px; ukingo-kushoto: -75px; onyesho: kizuizi; nafasi: kabisa; kushoto: 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 #0000;

SASISHA 2

Inavyoonekana unaweza kufanya hivi kwa chaguo la hiari la lebo ya kisanduku cha CSS, kama kila mtu mwingine amebainishwa. Hii hapa onyesho:

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

Ingekuwa suluhisho bora. Parameta ya ziada ambayo imeongezwa inaelezewa kama:

Urefu wa nne ni umbali wa kuenea. Thamani chanya husababisha umbo la kivuli kupanuka kwa mwelekeo kando ya radius maalum. Maadili hasi husababisha umbo la kivuli kukubaliana.

UPDATE

Nilichofanya ni kuunda "kipengele cha kivuli" ambacho kingejificha nyuma ya kitu halisi ambacho ungependa kuwa nacho kwenye kivuli. Nilifanya upana wa "kipengele cha kivuli" hasa chini ya upana kuliko kipengele halisi, mara 2 kivuli kilichowekwa; kisha niliiweka sawa.

#wrapper ( upana: 84px; nafasi: jamaa; ) #kipengele ( rangi ya usuli: #3D668F; urefu: 54px; upana: 100%; nafasi: jamaa; z-index: 10; ) #kivuli ( rangi ya usuli: # 3D668F urefu: 8px-kushoto: 0px z-index: 0px 2px 4px #000000;

Jibu asili

Ndio, unaweza kufanya hivi kwa syntax sawa uliyotoa. Thamani ya kwanza inadhibiti uwekaji mlalo, na thamani ya pili inadhibiti uwekaji wima. Kwa hivyo weka tu dhamana ya kwanza kuwa 0px na ya pili kwa usawa wowote ungependa kufanya kama ifuatavyo.

Vivuli vya kawaida ni rahisi kutekeleza kwa kutumia sanduku-kivuli au kivuli cha maandishi. Lakini ni nini ikiwa unahitaji kufanya vivuli vya ndani? Nakala hii inaelezea jinsi ya kutengeneza vivuli hivi kwa mistari michache tu ya nambari.

Sintaksia

Kwanza, hebu tuangalie njia kuu mbili za kutekeleza vivuli katika CSS.

sanduku-kivuli

Kubuni sanduku-kivuli ina maana kadhaa tofauti:

Kukabiliana kwa mlalo Na wima kukabiliana- uhamisho wa usawa na wima, kwa mtiririko huo. Maadili haya yanaonyesha mwelekeo ambao kitu kitaweka kivuli chake:

Radi ya ukungu Na kuenea kwa radius ngumu zaidi kidogo. Tofauti ni ipi? Hebu tuangalie mfano na vipengele viwili, ambapo maadili radius ya ukungu tofauti:

Ukingo wa kivuli umefifia tu. Na maadili tofauti kuenea kwa radius tunaona yafuatayo:

Katika kesi hii, tunaona kwamba kivuli kinatawanyika juu ya eneo kubwa. Ikiwa hutabainisha thamani radius ya ukungu Na kuenea kwa radius, basi zitakuwa sawa na 0.

maandishi-kivuli

Sintaksia inafanana sana na sanduku-kivuli:

Maana ni sawa, lakini sivyo kuenea-kivuli. Mfano wa matumizi:

Imewekwa kwenye kivuli cha sanduku

Ili "kupindua" kivuli ndani ya kitu, unahitaji kuongeza ndani katika CSS:

Mara tu unapoelewa syntax ya msingi ya kivuli-sanduku, ni rahisi sana kuelewa jinsi ya kutekeleza vivuli vya ndani. Maadili bado ni sawa, unaweza kuongeza rangi (RGB katika hex):

Weka rangi ndani Muundo wa RGB, thamani ya alpha inawajibika kwa uwazi wa kivuli:

Picha zilizo na vivuli

Ongeza kivuli cha ndani picha ni ngumu kidogo kuliko ile ya kawaida div. Kuanza, hapa kuna nambari ya kawaida ya picha:

Ni busara kudhani kuwa unaweza kuongeza kivuli kama hiki:

Img (kivuli-kisanduku: kipengee 0px 0px 10px rgba(0,0,0,0.5);)

Lakini kivuli hakionekani:

Kuna njia kadhaa za kutatua tatizo hili, ambayo kila mmoja ina faida na hasara zake. Hebu tuangalie mawili kati yao. Ya kwanza ni kuifunga picha kwa kawaida div:

Div ( urefu: 200px; upana: 400px; sanduku-kivuli: weka 0px 0px 10px rgba(0,0,0,0.9);) img ( urefu: 200px; upana: 400px; nafasi: jamaa; z-index: -2 ;)

Kila kitu hufanya kazi, lakini lazima uongeze ziada kidogo Alama ya HTML na CSS. Njia ya pili ni kuweka picha kama mandharinyuma block inayotaka:

Div ( urefu: 200px; upana: 400px; usuli: url(http://lorempixum.com/400/200/transport/2); sanduku-kivuli: kipengee 0px 0px 10px rgba(0,0,0,0.9); )

Hii ndio inaweza kutokea wakati wa kutumia vivuli vya ndani:

Imewekwa kwa kivuli cha maandishi

Ili kutekeleza kivuli cha maandishi ya ndani, ongeza tu kwenye msimbo ndani haifanyi kazi:

Ili kutatua, tumia kwanza kwenye kichwa h1 sakinisha mandharinyuma meusi na kivuli nyepesi:

H1 ( rangi ya usuli: #565656; rangi: uwazi; kivuli cha maandishi: 0px 2px 3px rgba(255,255,255,0.5);)

Hiki ndicho kinachotokea:

Kuongeza kiungo cha siri klipu ya usuli ambayo hukata kitu chochote kinachoenea zaidi ya maandishi (hadi mandharinyuma meusi):

H1 ( rangi ya usuli: #565656; rangi: uwazi; kivuli cha maandishi: 0px 2px 3px rgba(255,255,255,0.5); -klipu ya usuli-msingi-webkit: maandishi; -moz-chini-chini-klipu: maandishi; klipu ya usuli: maandishi ;)

Ilibadilika karibu kile tulichohitaji. Sasa tunatia giza maandishi kidogo (alpha), na matokeo yake ni:

Mali ya kivuli cha sanduku la CSS hukuruhusu kuweka kivuli kipengele cha html. Inatumiwa mara nyingi na wabunifu wa tovuti kwa namna fulani kupamba na kuangazia fremu kwa maandishi, picha, na kufanya maudhui kusomeka zaidi.

Sintaksia ya kivuli-kisanduku cha CSS

... sanduku-kivuli: X Y R1 R2 rangi; ...

• X - kukabiliana na mhimili wa X (usawa)
• Y - kukabiliana na mhimili wa Y (wima)
• R1 - blur (thamani ya juu, mpito ni laini)
• R2 - radius ya upanuzi (ikiwa ni chanya, inyoosha, hasi, inabana)
• rangi - rangi (inaweza kubainishwa katika umbizo lolote: #RGB, jina la rangi)
• inset - ikiwa thamani hii iko, kivuli kitakuwa ndani ya kizuizi (kipengele)

Mfano 1. HTML frame na box-shadow bila kukabiliana

Chini ni njia rahisi zaidi ya kutumia kivuli Mali ya CSS sanduku-kivuli juu ukurasa wa html wakati inapita sawasawa kuzunguka sura nzima bila kuhamishwa.

Mfano Nambari 1. Sura yenye kivuli

Mfano Nambari 1. Sura yenye kivuli

Mfano 2. HTML frame na offset kivuli sanduku-kivuli

Karibu mfano sawa na wa kwanza, lakini tu na sura iliyobadilishwa.

Mfano Nambari 2. Sura yenye kivuli cha kukabiliana

Ukurasa unabadilika kuwa ufuatao

Mfano Nambari 2. Sura yenye kivuli cha kukabiliana

Mfano Nambari 3. html ya fremu ya mwanga

Utekelezaji wa kivuli kama mwanga

Mfano Nambari 3. Mwangaza

Ukurasa unabadilika kuwa ufuatao

Mfano Nambari 3. Mwangaza

Mfano 4. Mwangaza wa ndani wa mpaka wa HTML

Mwangaza unaoelekezwa ndani ya kizuizi na hauendi zaidi ya mipaka yake. Athari huundwa kwa kutumia sifa iliyoingizwa.

Mfano Nambari 4. Mwangaza wa ndani

Ukurasa unabadilika kuwa ufuatao

Mfano Nambari 4. Mwangaza wa ndani

Mfano 5. Kuchanganya vivuli katika html

Athari ya kivuli inaweza kuunganishwa ikitenganishwa na koma. Katika kesi hii, matokeo ya kuvutia sana yanaundwa. Kwa mfano, unaweza kufanya sura ya rangi nyingi katika mtindo wa 3D.

Mfano Nambari 5. Kuchanganya vivuli

Ukurasa unabadilika kuwa ufuatao

Mfano Nambari 5. Kuchanganya vivuli

Kumbuka: vivinjari vya zamani

Matoleo ya IE mapema zaidi ya 9 hayatumii kivuli-kisanduku. Viambishi awali vya kivinjari vya kivuli-kisanduku

• -webkit-box-shadow - kwa Chrome hadi 10, Safari hadi 5.1, Android hadi 4 na iOS hadi 5
• -moz-box-shadow - kwa Firefox hadi toleo la 4.0

Vivuli vya kawaida ni rahisi kutekeleza kwa kutumia sanduku-kivuli au kivuli cha maandishi. Lakini ni nini ikiwa unahitaji kufanya vivuli vya ndani? Nakala hii inaelezea jinsi ya kutengeneza vivuli hivi kwa mistari michache tu ya nambari.

Sintaksia

Kwanza, hebu tuangalie njia kuu mbili za kutekeleza vivuli katika CSS.

sanduku-kivuli

Kubuni sanduku-kivuli ina maana kadhaa tofauti:

Kukabiliana kwa mlalo Na wima kukabiliana- uhamisho wa usawa na wima, kwa mtiririko huo. Maadili haya yanaonyesha mwelekeo ambao kitu kitaweka kivuli chake:

Radi ya ukungu Na kuenea kwa radius ngumu zaidi kidogo. Tofauti ni ipi? Hebu tuangalie mfano na vipengele viwili, ambapo maadili radius ya ukungu tofauti:

Ukingo wa kivuli umefifia tu. Na maadili tofauti kuenea kwa radius tunaona yafuatayo:

Katika kesi hii, tunaona kwamba kivuli kinatawanyika juu ya eneo kubwa. Ikiwa hutabainisha thamani radius ya ukungu Na kuenea kwa radius, basi zitakuwa sawa na 0.

maandishi-kivuli

Sintaksia inafanana sana na sanduku-kivuli:

Maana ni sawa, lakini sivyo kuenea-kivuli. Mfano wa matumizi:

Imewekwa kwenye kivuli cha sanduku

Ili "kupindua" kivuli ndani ya kitu, unahitaji kuongeza ndani katika CSS:

Mara tu unapoelewa syntax ya msingi ya kivuli-sanduku, ni rahisi sana kuelewa jinsi ya kutekeleza vivuli vya ndani. Maadili bado ni sawa, unaweza kuongeza rangi (RGB katika hex):

Rangi iko katika umbizo la RGB, thamani ya alfa inawajibika kwa uwazi wa kivuli:

Picha zilizo na vivuli

Kuongeza kivuli cha ndani kwa picha ni ngumu kidogo kuliko kuongeza kivuli cha kawaida div. Kuanza, hapa kuna nambari ya kawaida ya picha:

Ni busara kudhani kuwa unaweza kuongeza kivuli kama hiki:

Img (
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

Lakini kivuli hakionekani:

Kuna njia kadhaa za kutatua tatizo hili, ambayo kila mmoja ina faida na hasara zake. Hebu tuangalie mawili kati yao. Ya kwanza ni kuifunga picha kwa kawaida div:

Div (
urefu: 200px;
upana: 400px;
}

img(
urefu: 200px;
upana: 400px;
nafasi: jamaa;
z-index: -2;
}

Kila kitu kinafanya kazi, lakini lazima tuongeze alama ya ziada ya HTML na CSS. Njia ya pili ni kuweka picha kama msingi wa kizuizi unachotaka:

Div (
urefu: 200px;
upana: 400px;
mandharinyuma: url(http://lorempixum.com/400/200/transport/2);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}

Hii ndio inaweza kutokea wakati wa kutumia vivuli vya ndani:

Imewekwa kwa kivuli cha maandishi

Ili kutekeleza kivuli cha maandishi ya ndani, ongeza tu kwenye msimbo ndani haifanyi kazi:

Ili kutatua, tumia kwanza kwenye kichwa h1 Weka mandharinyuma meusi na kivuli chepesi:

H1 (
rangi ya asili: #565656;
rangi: uwazi;
}

Hiki ndicho kinachotokea:

Kuongeza kiungo cha siri klipu ya usuli ambayo hukata kitu chochote kinachoenea zaidi ya maandishi (hadi mandharinyuma meusi):

H1 (
rangi ya asili: #565656;
rangi: uwazi;
maandishi-kivuli: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: maandishi;
-moz-background-clip: maandishi;
background-clip: maandishi;
}

Ilibadilika karibu kile tulichohitaji. Sasa tunatia giza maandishi kidogo (alpha), na ndivyo hivyo.