CSS-isithunzi: indlela yokwenza

Ngaphandle ebumnyameni kungekho ukukhanya ngaphandle umthunzi ningaboni simo. Ngisho eziyisisekelo ithuluzi ukwenza i-abesifazane ngokuthi "kwethunzi." Uma ufuna ukuletha ubuhle okuya kumakhasi akho, udinga ugcizelele kwesokudla - Engeza i-CSS-isithunzi inkokhelo lapho idingeke khona.

Obekuxoxwa ngezansi kuzokusiza ufunde indlela ukufaka komthunzi noma ukuvimba izithombe usebenzisa CSS-ikhodi.

CSS-isithunzi. -syntax

Empeleni ibhokisi-isithunzi, lapho ibhokisi - block nasethunzini - lokhu kuyisipho isithunzi.

Ikhodi abhalwe besokunxele:

{Ibhokisi-isithunzi: 11px 22px 33px 44px # 333333;}.

Line lisitshela ukuthi iyunithi isethelwe Standard nge engaba isithunzi pixel. Idatha uguqulwa kanje:

• 11px - isithunzi benani block ku-X-eksisi (inani omuhle (20px) ngeke bayeke emthunzini ilungelo, negative (-37px) - kwesobunxele);
• 22px - isithunzi displacements mayelana Y-axis block (inani omuhle (5px) kuyosishintsha shift umthunzi (-17px) phansi negative - phezulu);
• 33px - lokhu ipharamitha ukufiphala, ayanda inombolo, namandla umphumela;
• 44px - engaba ithunzi, futhi ngqo ezilinganiselwe;
• # 333333 - umbala, okuyinto zaveza emthunzini.

Ezintathu zokugcina amapharamitha ongazikhetha futhi ingasho nje engashiywa string, okusho {ibhokisi-isithunzi: 10px 13px; } - .. umugqa okunjalo akukhona ayilungile (umbala isithunzi nsé umbala umbhalo block).

Ngakho, ukudala izithunzi emakhasini kusayithi lakho akuyona nobunzima, kodwa abaningi enhle imiphumela ngifuna ungakha! Yenza ingane yakho ehlukile, inimitable, ngoba design kubalulekile, yonke imininingwane, yonke imininingwane. Lapha, kubonakala, into ekhethekile, kodwa kuyathakazelisa kakhulu futhi ekhangayo.

Cabangela ezinye izibonelo ezichaza kabanzi ezithathwe, kubukeka zinjengethunzi CSS-block ngokuvumelana esephepheni:

1. {Ibhokisi-isithunzi: 25px 25px;} - CSS-isithunzi offset izimbazo 25 pixels.
2. {Ibhokisi-isithunzi: 25px 25px 10px;} - CSS-isithunzi offset izimbazo 25 Amaphikseli futhi ukufiphala imiphetho 10 pixels.
3. {Ibhokisi-isithunzi: 25px 25px 10px 5px;} - CSS-isithunzi offset izimbazo 25 Amaphikseli, ukufiphala imiphetho 10 Amaphikseli futhi engaba kusengaphambili 5 Amaphikseli
4. {Ibhokisi-isithunzi: 25px 25px 10px 5px # 9e9e9e;} - CSS-isithunzi offset izimbazo 25 Amaphikseli, ukufiphala imiphetho 10 Amaphikseli, ucacise engaba 5 Amaphikseli nombala.

ithunzi

Ukudala shades sihle, nenhle futhi yokuqala nemiphumela ehlukile. Ungenza emthunzini kwangaphakathi. Kuyinto ikhodi ngokwanele ukuba ucacise kwemigomo "kwesincane", incazelo eyengeziwe nemingcele ngizoya njengenjwayelo:

{Ibhokisi-isithunzi: kwesincane 4px 2px 6px # 9e9e9e;}.

Kungenzeka ukubeka ngaphansi block a izithunzi ambalwa ngezimiso ezahlukene ngokuphelele ikhodi, bona (ithunzi) ahlelwe kuhlukaniswe ukhefane:

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

isithunzi izithombe

Ngaphezu amayunithi kusayithi ngokuqinisekile kuyoba izithombe, izithombe, izizinda - konke lokhu izakhi futhi zikhanga kakhulu izithunzi. Ungasondela izithombe abahleli zangaphambi isithombe bese uzinamathisela ekhasini kakade izithunzi. Kodwa, okokuqala, akusiyo njalo kungenzeka ngenxa yezizathu ezihlukahlukene, kuhlanganise ngenxa yokuntuleka kwamakhono ukusebenza ihluzo, okwesibili, iyiphi manipulation isithombe sengezwe kuye, "isisindo", futhi isithombe esinjalo singase ukubambezela page imithwalo. Kulokhu, ungenza izithombe CSS-isithunzi.

Isixazululo elula kakhulu futhi olungile elifanele le nkinga - ukudalwa iyunithi, ngemuva sitfombe sakho ngeke Kotormo. Ngokulandelayo, wenze umthunzi ezidingekile iyunithi futhi ziboniswe ngemuva-image:

• .block1 {ibhokisi-isithunzi: kwesincane 0 0 11px 9px # 9e9e9e; ububanzi: 480px; ukuphakama: 360px; ingemuva:-url (izithombe / charlize_theron_2.jpg) 0 0 akukho ukuphinda;}

Kulesi sibonelo, sakha i isithunzi kwangaphakathi kungekho offset we izimbazo, nge ukufiphala engaba, umbala kuchazwa, ukuphakama ububanzi block, futhi ngemuva (isizinda) oqokwe kuartinku. Ngenxa yalokho, sithola isithombe kwethunzi kwangaphakathi.

Vumelana ukudala izithunzi usebenzisa CSS-ikhodi - kungcono lilula, kodwa okujabulisayo, futhi okubaluleke - umsebenzi ewusizo.