CSS-ojiji: bi o si ṣe

Lai òkunkun kò si imọlẹ lai iboji ko si fọọmu. Ani awọn ipilẹ ṣe-soke ọpa fun awon obirin a npe ni "ojiji." Ti o ba fẹ lati mu ẹwa si rẹ ojúewé, o nilo lati gbe awọn ọtun tcnu - Fi CSS-ojiji ibi ti o ti wa ni ti nilo.

Awọn ohun elo ti gbekalẹ ni isalẹ yoo ran o ko bi lati fi sori ẹrọ ni iboji tabi lati dènà images lilo CSS-koodu.

CSS-ojiji. sintasi

Kosi apoti-ojiji, ibi ti awọn apoti - kan Àkọsílẹ ati ojiji - yi ni ara kan ojiji.

Koodu ti kọ ninu àmúró:

{Apoti-ojiji: 11px 22px 33px 44px # 333333;}.

Line sọ fún wa pé kuro ti ṣeto si Standard pẹlu kan ojiji ẹbun rediosi. Awọn data ti wa ni decrypted bi wọnyi:

• 11px - ojiji aiṣedeede ojulumo si Àkọsílẹ lori X ipo (rere iye (20px) yoo yi lọ yi bọ si ọtun ojiji, odi (-37px) - si osi);
• 22px - ojiji isini-pẹlu ọwọ si awọn Y-ipo ti awọn Àkọsílẹ (rere iye (5px) asiwaju lati kan naficula ti awọn iboji isalẹ odi (-17px) - soke);
• 33px - yi blur paramita, awọn ti o ga awọn nọmba, awọn ni okun awọn ipa;
• 44px - awọn rediosi ti awọn Shadows, ati ki o jẹ taara iwon;
• # 333333 - awọn awọ, eyi ti o ti ya ninu iboji.

Awọn ti o kẹhin meta sile ni o wa ko je ati ki o le nìkan wa ni ti own ninu awọn okun, ie {apoti-ojiji: 10px 13px; } - .. Iru a ila ni ko ti ko tọ (ojiji awọ jẹ aami si awọn awọ ti awọn ọrọ ninu awọn Àkọsílẹ).

Bayi, ṣiṣẹda ojiji lori awọn ojúewé ti rẹ sii ni ko kan isoro, sugbon opolopo dara nwa ipa ti o le ṣẹda! Ṣe ọmọ rẹ a oto, inimitable, nitori awọn oniru jẹ pataki, gbogbo apejuwe awọn, gbogbo apejuwe. Nibi, o dabi, ohunkohun pataki, sugbon o jẹ Elo diẹ awon ati ki o wuni.

Ro diẹ ninu awọn illustrative àpẹẹrẹ, o wulẹ bi a ojiji CSS-Àkọsílẹ ni ibamu si awọn ifaminsi:

1. {Box-ojiji: 25px 25px;} - CSS-ojiji aiṣedeede àáké 25 awọn piksẹli.
2. {Box-ojiji: 25px 25px 10px;} - CSS-ojiji aiṣedeede aake 25 awọn piksẹli ati losile egbegbe 10 awọn piksẹli.
3. {Box-ojiji: 25px 25px 10px 5px;} - CSS-ojiji aiṣedeede àáké 25 awọn piksẹli, blur egbegbe 10 awọn piksẹli ati ki o kan predetermined rediosi ti 5 awọn piksẹli
4. {Box-ojiji: 25px 25px 10px 5px # 9e9e9e;} - CSS-ojiji aiṣedeede àáké 25 awọn piksẹli, blur egbegbe 10 awọn piksẹli, pato kan rediosi ti 5 awọn piksẹli ati awọ.

ju ojiji

Lati ṣẹda kan diẹ lẹwa, yangan ati atilẹba shades ni orisirisi awọn ipa. O le ṣe awọn akojọpọ ojiji. O ni to koodu to pato awọn sile ti "inset", siwaju apejuwe ti awọn sile yoo lọ bi ibùgbé:

{Box-ojiji: inset 4px 2px 6px # 9e9e9e;}.

O ti wa ni ṣee ṣe lati fi labẹ awọn Àkọsílẹ kan diẹ Shadows pẹlu patapata ti o yatọ sile ni awọn koodu, nwọn (awọn Shadows) ti wa ni akojọ niya nipa aami idẹsẹ:

{Box-ojiji: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

ojiji awọn aworan

Ni afikun si awọn sipo lori ojula yoo esan jẹ awọn aworan, awọn fọto, backgrounds - gbogbo awọn ti awọn wọnyi eroja tun wo Elo diẹ awon pẹlu ojiji. O le fa awọn aworan ninu awọn aso-image olootu ati ki o lẹẹmọ wọn lori a iwe tẹlẹ pẹlu ojiji. Ṣugbọn, Ni ibere, o jẹ ko nigbagbogbo ṣee ṣe fun orisirisi idi, pẹlu nitori ti aini ti ogbon ni ṣiṣẹ pẹlu eya aworan, keji, eyikeyi ifọwọyi ti awọn aworan ti wa ni afikun fun u pe, "àdánù", ati iru awọn aworan le daradara fa fifalẹ iwe èyà. Ni idi eyi, o le ṣe kan CSS-ojiji images.

Awọn julọ rọrun ki o si syntactically ti o tọ ojutu si isoro yi - awọn ẹda ti awọn kuro, lẹhin ninu rẹ aworan yoo Kotormo. Next, ti o ṣe awọn pataki iboji fun awọn kuro ati awọn ti wọn ti wa ni han lori lẹhin-aworan:

• .block1 {apoti-ojiji: inset 0 0 11px 9px # 9e9e9e; iwọn: 480px; iga: 360px; lẹhin: url (images / charlize_theron_2.jpg) 0 0 ko si-tun;}

Ni yi apẹẹrẹ, a ṣẹda ohun akojọpọ ojiji pẹlu ko si aiṣedeede ti ãke, pẹlu blur rediosi, telẹ awọ, iga ati iwọn ti awọn Àkọsílẹ, ati awọn lẹhin (lẹhin) yàn kuartinku. Bi awọn kan abajade, a gba aworan kan ti awọn akojọpọ ojiji.

Gba lati ṣẹda ojiji lilo CSS-koodu - o lẹwa o rọrun, sibẹsibẹ moriwu, ati pataki julọ - wulo idaraya.