CSS-ստվերը: թե ինչպես անել,

Առանց մթության մեջ լույս չկա առանց ստվերի ոչ ձեւը: Նույնիսկ հիմնական կատարել- up գործիք կանանց համար, որը կոչվում է «ստվերային». Եթե դուք ուզում եք բերել գեղեցկությունը ձեր էջերի, դուք պետք է տեղադրել ճիշտ շեշտադրում - Ավելացնել CSS - ստվեր, որտեղ դա անհրաժեշտ է,

Որ նյութը ներկայացվում է ստորեւ կօգնի ձեզ իմանալ, թե ինչպես պետք է տեղադրել երանգ կամ արգելափակել պատկերներ, օգտագործելով CSS կոդի:

CSS-ստվերը. շարահյուսություն

Իրականում արկղ-ստվերային, որտեղ արկղ մի թաղամաս, եւ ստվերը, - սա ինքնին մի ստվեր.

Կոդը գրված է braces:

{Արկղ-ստվերը: 11px 22px 33px 44px # 333333;}.

Գիծը պատմում է մեզ, որ միավորը սահմանվում է ստանդարտում է ստվերային կարող է անկախ ղեկավարվել շառավղով: Տվյալները decrypted է հետեւյալ կերպ.

• 11px - ստվերային օֆսեթ հարաբերական են բլոկի x առանցքի վրա (դրական արժեք (20px) կլինի տեղափոխել դեպի աջ ստվերի, բացասական (-37px) - ձախ).
• 22px - ի հետ տեղահանումների ստվերային հարաբերական բլոկ Y առանցքի (մի դրական արժեք (5px) տանում են դեպի տեղաշարժը ստվերում ներքեւ, բացասական (-17px) - up);
• 33px - այս նսեմացնել պարամետր, որ բարձր թիվը, այնքան ուժեղ է ազդեցությունը;
• 44px - շառավիղը ստվերից, եւ ուղիղ համեմատական.
• # 333333 - ի գույնի, որը նկարել է ստվերում:

Վերջին երեք պարամետրերից են, ըստ ցանկության, եւ կարող է պարզապես լինել բացակայում է պարանի, այսինքն {արկղ-ստվերը: 10px 13px; } - .. Նման գիծը չէ սխալ (ստվերային գույն նույնական է գույնի տեքստի բլոկի):

Այսպիսով, ստեղծելով ստվերից էջերում Ձեր կայքի ոչ մի դժվարություն, բայց շատ գեղեցիկ էֆեկտներ դուք կարող եք ստեղծել. Դարձրեք Ձեր երեխան եզակի, անկրկնելի, քանի որ ձեւավորում է կարեւոր, յուրաքանչյուր մանրուք, ամեն մանրուք: Այստեղ, կարծես, ոչինչ հատուկ, բայց դա շատ ավելի հետաքրքիր եւ գրավիչ.

Ահա մի քանի պատկերավոր օրինակներ, կարծես մի ստվերային CSS-block, ըստ կոդավորում:

1. {Box-ստվերը: 25px 25px;} - CSS-ստվերային օֆսեթ առանցքներ եւ 25 փիքսել.
2. {Box-ստվերը: 25px 25px 10px;} - CSS-ստվերային օֆսեթ axes 25 փիքսել եւ քողարկման եզրեր 10 փիքսել.
3. {Box-ստվերը: 25px 25px 10px 5px;} - CSS-ստվերային օֆսեթ առանցքներով եւ 25 փիքսել, Բլուր եզրեր 10 փիքսել եւ մի կանխորոշված շառավղով 5 պիքսել
4. {Box-ստվերը: 25px 25px 10px 5px # 9e9e9e;} - CSS-ստվերային օֆսեթ առանցքներով եւ 25 փիքսել, Բլուր եզրեր 10 փիքսել, նշել շառավղով 5 պիքսել եւ գույն.

ընկնող ստվեր

Ստեղծել ավելի գեղեցիկ, էլեգանտ եւ օրիգինալ երանգներ ունեն տարբեր էֆեկտներ. Դուք կարող եք կատարել ներքին ստվեր: Դա բավական կոդը է հստակեցնել պարամետրերը «ներդիր», հետագա նկարագրությունը պարամետրերի կգնա, ինչպես միշտ:

{Box-ստվերը: ներդիր 4 տր 2px 6px # 9e9e9e;}.

Դա հնարավոր է տեղադրել տակ բլոկի մի քանի ստվերները հետ բոլորովին տարբեր պարամետրերի, վարքականոնի, նրանք (ստվեր) թվարկված են առանձնացվել են ստորակետներով:

{Box-ստվերը: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

ստվերային նկարներ

Ի լրումն միավորների կայքում անպայման պետք է պատկերներ, լուսանկարներ, հետին բոլոր այդ տարրերի նաեւ շատ ավելի հետաքրքիր ստվերից: Դուք կարող եք նկարել է նախընտրական պատկերի խմբագիրների եւ տեղադրեք դրանք մի էջի արդեն ստվերից: Բայց, առաջին հերթին, դա միշտ չէ, որ հնարավոր է տարբեր պատճառներով, այդ թվում բացակայության պատճառով հմտությունների հետ աշխատելու գրաֆիկայի, երկրորդը, որեւէ մանիպուլյացիա պատկերով ավելացված է նրան, «քաշի», եւ նման մի նկար, կարող է նաեւ դանդաղեցնել էջը ծանրաբեռնվածությանը. Այս դեպքում, դուք կարող եք կատարել մի CSS-ստվերային պատկերները.

Առավել պարզ եւ syntactically ճիշտ լուծումը այս խնդրին ստեղծումը միավորի, ապա հետին պլանի ձեր պատկերը կլինի Kotormo: Հաջորդ, դուք կատարել անհրաժեշտ երանգ համար միավորի, եւ դրանք ցուցադրվում է background-պատկերով:

• .block1 {արկղ-ստվերը: ներդիր 0 0 11px 9px # 9e9e9e. լայնությունը: 480px; բարձրություն: 360px; ֆոն: URL (images / charlize_theron_2.jpg) 0 0 ոչ-կրկնության}

Այս օրինակում, մենք ստեղծել ներքին ստվերը հետ ոչ օֆսեթ առանցքներից հետ blur շառավղով, սահմանված գույնի, բարձրությունը եւ լայնությունը բլոկի, եւ ֆոնային (ֆոնային) նշանակվել kuartinku: Որպես հետեւանք, մենք ստանում ենք նկարը ներքին ստվերում:

Համաձայնում է ստեղծել ստվերից օգտագործելով CSS կոդ - դա բավականին պարզ է, դեռ հետաքրքիր, եւ որ ամենակարեւորն է `օգտակար վարժություն.