Ներքին ստվերները CSS-ում. Ներքին ստվերներ CSS Shadow Stretch Radius-ում

Սովորական ստվերները հեշտ է իրականացնել՝ օգտագործելով տուփ-ստվեր կամ տեքստ-ստվեր: Բայց ինչ անել, եթե ձեզ անհրաժեշտ է ներքին ստվերներ ստեղծել: Այս հոդվածը նկարագրում է, թե ինչպես կարելի է նման ստվերներ ստեղծել ընդամենը մի քանի տող կոդով:

Շարահյուսություն

Նախ, եկեք տեսնենք CSS-ում ստվերներ իրականացնելու երկու հիմնական եղանակները:

տուփ-ստվեր

Դիզայն տուփ-ստվերպարունակում է մի քանի տարբեր իմաստներ.

Հորիզոնական օֆսեթԵվ ուղղահայաց օֆսեթ- համապատասխանաբար հորիզոնական և ուղղահայաց տեղաշարժ: Այս արժեքները ցույց են տալիս, թե որ ուղղությամբ է օբյեկտը գցելու իր ստվերը.

Լղոզման շառավիղԵվ տարածման շառավիղըմի քիչ ավելի բարդ: Որն է տարբերությունը? Դիտարկենք երկու տարրերով օրինակ, որտեղ արժեքները պղտորման շառավիղըտարբերվում են:

Ստվերի եզրը պարզապես լղոզված է: Տարբեր արժեքներով տարածման շառավիղըմենք տեսնում ենք հետևյալը.

Այս դեպքում մենք տեսնում ենք, որ ստվերը ցրված է մեծ տարածքի վրա: Եթե ​​դուք արժեք չեք նշում պղտորման շառավիղըԵվ տարածման շառավիղը, ապա դրանք հավասար կլինեն 0-ի։

տեքստ-ստվեր

Շարահյուսությունը շատ նման է տուփ-ստվեր:

Իմաստները նման են, բայց ոչ տարածում-ստվեր. Օգտագործման օրինակ.

Ներդիր տուփ-ստվերում

Օբյեկտի ներսում ստվերը «շրջելու» համար անհրաժեշտ է ավելացնել ներդիր CSS-ում:

Երբ հասկանում եք հիմնական տուփ-ստվերային շարահյուսությունը, շատ հեշտ է հասկանալ, թե ինչպես իրականացնել ներքին ստվերները: Արժեքները դեռ նույնն են, կարող եք գույն ավելացնել (RGB վեցանկյունով).

Գույնը RGB ձևաչափով է, ալֆա արժեքը պատասխանատու է ստվերի թափանցիկության համար.

Պատկերներ ստվերներով

Պատկերին ներքին ստվեր ավելացնելը մի փոքր ավելի դժվար է, քան սովորական ստվեր ավելացնելը դիվ. Սկսելու համար, ահա սովորական պատկերի կոդը.

Տրամաբանական է ենթադրել, որ կարող եք նման ստվեր ավելացնել.

Img ( տուփ-ստվեր. ներդիր 0px 0px 10px rgba(0,0,0,0.5); )

Բայց ստվերը չի երևում.

Այս խնդիրը լուծելու մի քանի եղանակ կա, որոնցից յուրաքանչյուրն ունի իր դրական և բացասական կողմերը: Դիտարկենք դրանցից երկուսը։ Առաջինը պատկերը սովորականի մեջ փաթաթելն է դիվ:

Div ( բարձրությունը՝ 200px; լայնությունը՝ 400px; տուփ-ստվեր՝ ներդիր 0px 0px 10px rgba(0,0,0,0.9); ;)

Ամեն ինչ աշխատում է, բայց մենք պետք է ավելացնենք մի փոքր լրացուցիչ HTML և CSS նշում: Երկրորդ ճանապարհը պատկերը որպես ցանկալի բլոկի ֆոն դնելն է.

Div ( բարձրությունը՝ 200px; լայնությունը՝ 400px; ֆոն՝ url(http://lorempixum.com/400/200/transport/2); box-shadow՝ inset 0px 0px 10px rgba(0,0,0,0.9); )

Ահա թե ինչ կարող է պատահել ներքին ստվերներ օգտագործելիս.

Ներդիր տեքստի ստվերում

Ներքին տեքստի ստվեր իրականացնելու համար պարզապես ավելացրեք կոդը ներդիրչի աշխատում:

Լուծելու համար նախ կիրառեք վերնագրի վրա հ1Սահմանեք մուգ ֆոն և բաց ստվեր.

H1 (ֆոնի գույնը՝ #565656; գույնը՝ թափանցիկ; տեքստային ստվերը՝ 0px 2px 3px rgba(255,255,255,0.5); )

Ահա թե ինչ է տեղի ունենում.

Գաղտնի բաղադրիչի ավելացում ֆոնային հոլովակորը կտրում է այն ամենը, ինչ դուրս է գալիս տեքստից (մինչև մուգ ֆոն).

H1 (ֆոնի գույնը՝ #565656; գույնը՝ թափանցիկ; տեքստի ստվերը՝ 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip՝ text; -moz-background-clip՝ text; ֆոնային հոլովակ՝ տեքստ ;)

Պարզվեց գրեթե ճիշտ այն, ինչ մեզ պետք էր։ Այժմ մենք պարզապես մի փոքր մգացնում ենք տեքստը (ալֆա), և արդյունքը հետևյալն է.

Էջի բլոկի տարրի տակ գտնվող ստվերը սովորաբար օգտագործվում է եռաչափ էֆեկտ ստեղծելու, տարրի վրա ուշադրություն հրավիրելու կամ որպես դիզայնի մաս: Տարրերի տակ գտնվող փոքր ստվերը նաև էջի ծավալ և խորություն է հաղորդում:

Ստվեր ավելացնելու համար օգտագործեք box-shadow հատկությունը, որն ունի վեց արժեք, որոնցից միայն երկուսն են պահանջվում: Նկ. Նկար 1-ը ցույց է տալիս տուփ-ստվերային հատկությունը բոլոր հնարավոր արժեքներով, որոնք համարակալված են դրանք նույնականացնելու համար:

Բրինձ. 1. Box-shadow գույքի արժեքները

1. ներդիր հիմնաբառը սահմանում է ստվերը տարրի ներսում.
2. տեղափոխեք ստվերը հորիզոնական (5px - աջ, -5px - ձախ);
3. ուղղահայաց տեղաշարժ (5px - ներքև, -5px - վեր);
4. ստվերի լղոզման շառավիղ (0 - սուր ստվեր);
5. ստվերային ձգում (5px - ձգում, -5px - նեղանալ);
6. ստվերի գույնը.

Անհրաժեշտ է նշել միայն հորիզոնական և ուղղահայաց տեղաշարժը: Այս դեպքում ստվերը կտրուկ կլինի առանց մշուշման կամ սևի:

Միավորելով տարբեր պարամետրերը և դրանց արժեքները, դուք կարող եք ստանալ ստվերների լայն տեսականի: Աղյուսակում 1-ը ցույց է տալիս կոդը և այն արդյունքը, որին այն հանգեցնում է:

Աղյուսակ 1. Ստվերային պարամետրերի համակցություններ

Կոդ	Արդյունք	Նկարագրություն
տուփ-ստվեր՝ 5px 5px;		Կտրուկ ստվեր աջ և ներքևում:
տուփ-ստվեր՝ -5px -5px;		Կտրուկ ստվեր ձախ և վերևում:
տուփ-ստվեր՝ 0 0 5px;		Մշուշոտ ստվեր տարրի շուրջ:
տուփ-ստվեր՝ 0 0 5px 2px;		Ընդարձակեք ստվերը 2 պիքսելով:
տուփ-ստվեր՝ 0 0 5px 2px կարմիր;		Կարմիր փայլը տարրի շուրջ:
տուփ-ստվեր՝ 0.4em 0.4em 5px rgba(122,122,122,0.5);		Թափանցիկ ստվեր.
տուփ-ստվեր՝ ներդիր 0 0 6px;		Ստվեր ներսում.

Ինչպես երևում է աղյուսակից, ստվերի տեղաշարժը պարտադիր չէ, որ նշվի պիքսելներով, թեև դա հարմար է: Ստվերի գույնը կարող է նշվել ցանկացած հասանելի ձևաչափով, օրինակ, կիսաթափանցիկ ստվեր ստանալու համար, նման ստվերը հարմար է ցանկացած ֆոնի վրա. Օրինակ 1-ը ցույց է տալիս, թե ինչպես դա անել:

Օրինակ 1. Ստվեր ֆոնային նկարի վրա

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Այս օրինակի արդյունքը ներկայացված է Նկ. 2. Ստվերը հետեւում է բլոկի անկյունների կլորացմանը։

Բրինձ. 2. Ֆոնային նկարի վրա ստվերի տեսք

«Լայն» ստվեր ավելացնելիս նկատեք, որ այն կարող է դուրս գալ դիտարկիչի պատուհանի տեսանելի սահմաններից և այդպիսով հանգեցնել հորիզոնական ոլորման տողի հայտնվելուն:

Ստվերները կարող են ավելացվել նաև կեղծ տարրերին, դա երբեմն պահանջվում է բարդ դասավորության համար: Նկ. Նկար 3-ը ցույց է տալիս վերնագրի բլոկը, որի վրա ավելացված է ստվեր: Հանգույցում որևէ գծերից խուսափելու համար պետք է օգտագործել ::after կեղծ տարրը և դրան ավելացնել ստվեր:

Բրինձ. 3. Արգելափակել ստվերով

Օրինակ 2-ը ցույց է տալիս նման բլոկի ստեղծումը:

Օրինակ 2. Արգելափակել ստվերով

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Տարրը կարող է ունենալ մեկից ավելի ստվեր, դրանց պարամետրերը նշված են ստորակետերով՝ տուփ-ստվերային հատկության արժեքում: Օրինակ 3-ը ցույց է տալիս, թե ինչպես կարելի է կրկնակի ստվեր ավելացնել բոլոր պատկերներին:

Օրինակ 2. Արգելափակել ստվերով

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Այս օրինակի արդյունքը ներկայացված է Նկ. 4.

Բրինձ. 4. Կրկնակի ստվերային պատկեր

Առաջին ստվերը ցուցադրվում է պատկերի ձախ կողմում՝ 20px մշուշման շառավղով, որի չափը կրճատվում է չորրորդ պարամետրով (-20px): Երկրորդ ստվերի պարամետրերը նշվում են տասնորդական կետից հետո ստվերը ցուցադրվում է նկարի աջ կողմում և կրճատվում է նաև համաչափության համար:

Սովորական ստվերները հեշտ է իրականացնել՝ օգտագործելով տուփ-ստվեր կամ տեքստ-ստվեր: Բայց ինչ անել, եթե ձեզ անհրաժեշտ է ներքին ստվերներ ստեղծել: Այս հոդվածը նկարագրում է, թե ինչպես կարելի է նման ստվերներ ստեղծել ընդամենը մի քանի տող կոդով:

Շարահյուսություն

Նախ, եկեք տեսնենք CSS-ում ստվերներ իրականացնելու երկու հիմնական եղանակները:

տուփ-ստվեր

Դիզայն տուփ-ստվերպարունակում է մի քանի տարբեր իմաստներ.

Հորիզոնական օֆսեթԵվ ուղղահայաց օֆսեթ- համապատասխանաբար հորիզոնական և ուղղահայաց տեղաշարժ: Այս արժեքները ցույց են տալիս, թե որ ուղղությամբ է օբյեկտը գցելու իր ստվերը.

Լղոզման շառավիղԵվ տարածման շառավիղըմի քիչ ավելի բարդ: Որն է տարբերությունը? Դիտարկենք երկու տարրերով օրինակ, որտեղ արժեքները պղտորման շառավիղըտարբերվում են:

Ստվերի եզրը պարզապես լղոզված է: Տարբեր արժեքներով տարածման շառավիղըմենք տեսնում ենք հետևյալը.

Այս դեպքում մենք տեսնում ենք, որ ստվերը ցրված է մեծ տարածքի վրա: Եթե ​​դուք արժեք չեք նշում պղտորման շառավիղըԵվ տարածման շառավիղը, ապա դրանք հավասար կլինեն 0-ի։

տեքստ-ստվեր

Շարահյուսությունը շատ նման է տուփ-ստվեր:

Իմաստները նման են, բայց ոչ տարածում-ստվեր. Օգտագործման օրինակ.

Ներդիր տուփ-ստվերում

Օբյեկտի ներսում ստվերը «շրջելու» համար անհրաժեշտ է ավելացնել ներդիր CSS-ում:

Երբ հասկանում եք հիմնական տուփ-ստվերային շարահյուսությունը, շատ հեշտ է հասկանալ, թե ինչպես իրականացնել ներքին ստվերները: Արժեքները դեռ նույնն են, կարող եք գույն ավելացնել (RGB վեցանկյունով).

Գույնը RGB ձևաչափով է, ալֆա արժեքը պատասխանատու է ստվերի թափանցիկության համար.

Պատկերներ ստվերներով

Պատկերին ներքին ստվեր ավելացնելը մի փոքր ավելի դժվար է, քան սովորական ստվեր ավելացնելը դիվ. Սկսելու համար, ահա սովորական պատկերի կոդը.

Տրամաբանական է ենթադրել, որ կարող եք նման ստվեր ավելացնել.

Img ( տուփ-ստվեր. ներդիր 0px 0px 10px rgba(0,0,0,0.5); )

Բայց ստվերը չի երևում.

Այս խնդիրը լուծելու մի քանի եղանակ կա, որոնցից յուրաքանչյուրն ունի իր դրական և բացասական կողմերը: Դիտարկենք դրանցից երկուսը։ Առաջինը պատկերը սովորականի մեջ փաթաթելն է դիվ:

Div ( բարձրությունը՝ 200px; լայնությունը՝ 400px; տուփ-ստվեր՝ ներդիր 0px 0px 10px rgba(0,0,0,0.9); ;)

Ամեն ինչ աշխատում է, բայց մենք պետք է ավելացնենք մի փոքր լրացուցիչ HTML և CSS նշում: Երկրորդ ճանապարհը պատկերը որպես ցանկալի բլոկի ֆոն դնելն է.

Div ( բարձրությունը՝ 200px; լայնությունը՝ 400px; ֆոն՝ url(http://lorempixum.com/400/200/transport/2); box-shadow՝ inset 0px 0px 10px rgba(0,0,0,0.9); )

Ահա թե ինչ կարող է պատահել ներքին ստվերներ օգտագործելիս.

Ներդիր տեքստի ստվերում

Ներքին տեքստի ստվեր իրականացնելու համար պարզապես ավելացրեք կոդը ներդիրչի աշխատում:

Լուծելու համար նախ կիրառեք վերնագրի վրա հ1Սահմանեք մուգ ֆոն և բաց ստվեր.

H1 (ֆոնի գույնը՝ #565656; գույնը՝ թափանցիկ; տեքստային ստվերը՝ 0px 2px 3px rgba(255,255,255,0.5); )

Ահա թե ինչ է տեղի ունենում.

Գաղտնի բաղադրիչի ավելացում ֆոնային հոլովակորը կտրում է այն ամենը, ինչ դուրս է գալիս տեքստից (մինչև մուգ ֆոն).

H1 (ֆոնի գույնը՝ #565656; գույնը՝ թափանցիկ; տեքստի ստվերը՝ 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip՝ text; -moz-background-clip՝ text; ֆոնային հոլովակ՝ տեքստ ;)

Պարզվեց գրեթե ճիշտ այն, ինչ մեզ պետք էր։ Այժմ մենք պարզապես մի փոքր մգացնում ենք տեքստը (ալֆա), և արդյունքը հետևյալն է.

Դուք կարող եք ստվեր ավելացնել տարրերին և փոխել դրա տեսքը՝ օգտագործելով box-shadow CSS հատկությունը: Այս ոճը թույլ է տալիս իրականացնել հետաքրքիր էֆեկտներ, օրինակ՝ բլոկի ծավալը և եռաչափությունը։ Գույքը աջակցվում է բոլոր ժամանակակից բրաուզերների կողմից: Բացառություն են կազմում IE8-ը և Opera Mini-ն:

տուփ-ստվերային հատկություն՝ շարահյուսություն

Այս ոճը գրված է հետևյալ կերպ.

Տուփ-ստվեր՝ ներդիր 4px 4px 8px 5px #333333;

Եկեք հերթականությամբ դիտարկենք, թե ինչի համար է պատասխանատու յուրաքանչյուր պարամետր (ձախից աջ).

• Հիմնաբառներդիր. պարամետր, որը պետք չէ նշել. ստվեր է նկարում ներսումտարր.
• X օֆսեթՀատկանշում է, թե ինչ աստիճանի է ստվերը տարրի համեմատ հորիզոնական դիրքով: Դրական արժեքը նշանակում է տեղաշարժ դեպի աջ, բացասական՝ ձախ: 0 արժեքը նշանակում է, որ ստվերը չի շեղվում:
• Y ShiftՆշում է ստվերի ուղղահայաց տեղաշարժի չափը: Դրական արժեքը նշանակում է դեպի ներքև տեղաշարժ, բացասական արժեքը նշանակում է դեպի վեր: 0-ի արժեքը ստվեր է՝ առանց տեղաշարժի:
• Լղոզման շառավիղՍա ստվերի մշուշման աստիճանն է: Որքան բարձր է արժեքը, այնքան ավելի մշուշոտ է ստվերը: Եթե ​​պարամետրը նշված չէ, ապա լռելյայն արժեքը 0 է: Այս դեպքում ստվերը միանգամայն պարզ կլինի։
• Ընդլայնումըկամընտիր պարամետր, որը պատասխանատու է երկու առանցքների երկայնքով ստվերը ձգելու համար. որքան բարձր է արժեքը, այնքան մեծ է ձգումը: Ընդլայնումը գործում է միայն այն դեպքում, եթե առկա է նախորդ պարամետրը: Նախնական արժեքը 0 է:
• Ստվերային գույնԱյս պարամետրով ամեն ինչ պարզ է. այն սահմանում է տարրի ստվերի գույնը: Նախնական գույնը սևն է:

Նշում. Android բրաուզերները և iPhone Safari-ի ավելի հին տարբերակները պահանջում են -webkit- նախածանցը, որպեսզի box-shadow CSS հատկությունը ճիշտ աշխատի:

Այս հատկությունը կարող է վերցնել արժեքների մի քանի խմբեր (միաժամանակ մի քանի ստվերներ անել): Դա անելու համար ձեզ հարկավոր է թվարկել պարամետրերի այս խմբերը, որոնք բաժանված են ստորակետերով: Օրինակ:

Տուփ-ստվեր՝ 15px 15px 20px #8b0163, ներդիր 15px 15px 20px #630046;

Տուփ-ստվերային օրինակներ

Որպեսզի օգնենք ձեզ ավելի լավ հասկանալ CSS box-shadow հատկության ուժն ու գեղեցկությունը, մենք ձեզ ցույց կտանք մի քանի օրինակներ, որոնք դուք կարող եք ապահով կերպով կիրառել գործնականում: Այս հատկությունը կարող է մեծապես փոխակերպել սովորական բլոկը:

Թեթև ստվեր

Տուփ-ստվեր՝ 0 2px 4px rgba(0, 0, 0, .25);

Թղթի էֆեկտ

Տուփ-ստվեր՝ 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), ներդիր 0 0 40px rgba (0, 0, 0, .1);

Բազմաթիվ շերտեր

Տուփ-ստվեր՝ 6px 6px #cccc, 12px 12px #a3a3a3;

Եռակի շրջանակ

Տուփ-ստվեր՝ 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);

Անկյուններ

Տուփ-ստվեր՝ -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Ինչպես տեսնում եք, տուփ-ստվերային հատկությունը երևակայության համար շատ տեղ է թողնում: Դուք կարող եք վերափոխել բլոկները այնպես, ինչպես ցանկանում եք, գլխավորը չափի զգացում ունենալն է: 😉

Հաջորդ գլխում դուք կուսումնասիրեք լայնության և բարձրության հատկությունները, որոնք որոշում են տարրերի չափերը:

Այսօր մենք կսովորենք, թե ինչպես ստեղծել CSS ստվերներ առանց պատկերների: Այս ձեռնարկն ավարտելուց հետո ձեզ այլևս պետք չի լինի CSS ստվերային գեներատոր:

CSS3-ով ստեղծված ստվերների հիմնական առավելությունը իրականացման հեշտությունն է և սերվերին ուղղված հարցումների քանակի նվազումը (քանի որ մենք այլևս չենք օգտագործում պատկերներ)։ CSS ստվեր ստեղծելու համար մեզ անհրաժեշտ է div թեգ և CSS box-shadow հատկություն։ Ձեզ անհրաժեշտ չի լինի որևէ լրացուցիչ նշագրում, քանի որ մենք կստեղծենք :after և :before կեղծ տարրեր, որոնք կտեղադրենք հիմնական օբյեկտի հետևում (դիվ դասի հետ արգելափակել).

Նայեք HTML կոդը, որի համար մենք կստեղծենք CSS3 ստվեր.

Հաջորդը, դուք կարող եք տեսնել պատրաստի օրինակներ և դրանց իրականացման համար անհրաժեշտ ծածկագիրը: Էջի տեքստը նվազագույնի հասցնելու համար մենք բաց կթողնենք CSS հատկությունները բրաուզերի նախածանցներով: Ամբողջական կոդը կարելի է տեսնել՝ սեղմելով օրինակին համապատասխան «Օրինակ» հղմանը։

.block (դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; եզրագիծ՝ 4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) ներդիր ) .block:before, .block:after (բովանդակություն:""; դիրք:բացարձակ; z-index:-2; ներքևում:15px; ձախ:10px; Լայնություն:50% բարձրություն: արկղ-ստվեր:0 10px rgba(0,0,0,0.7);ձախ:auto;

.block ( դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ներդիր: 1px կոշտ #efefef:0 0 120px 120px / 0 0 6px 6px .block:before, .block:after (բովանդակություն:"; z-index:-2, height:55% box-shadow:0 8px rgba(0,0,0.5) rotate(-3deg); աջ:10px:auto transformation:saw(8deg) rotate(3deg);

Օգտագործելով ստվեր, դուք կարող եք տալ բլոկի հեռանկար: Տես օրինակ.

.block ( դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ներդիր; լայնություն:50% բարձրություն:-80px rgba(0, 0, 0.4) .block:after;

CSS ստվեր բարձրացված բլոկի համար: Տես օրինակ.

.block ( դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ներդիր տուփ-ստվեր. , 0, 0, 0.1) ներդիր ) .block:before, .block:after (բովանդակությունը:""; position:absolute; z-index:-2;)

Օրինակ CSS3 ստվեր ուղղահայաց ծալված բլոկի համար: Տես օրինակ.

.block ( դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ներդիր; ձախ: 50% արկղ-ստվեր: 0 15px rgba(0,0,0,0.6);

.block ( դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ներդիր; ձախ: 0, տուփ-ստվեր: 0 15px rgba(0,0,0,0,6);

CSS3 ստվերի օրինակ՝ հորիզոնական ծալված բլոկի համար: Տես օրինակ.

.block ( դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ներդիր; 0px:10px box-shadow:0 0 15px rgba(0,0,0,0.6);

.block ( դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ներդիր; ձախ: 10px: 10px rgba (0,0,0,0,6);

CSS3 ստվեր պտտվող բլոկի համար: Տես օրինակ.

.block (դիրք՝ հարաբերական; լայնություն՝ 40%, լիցք՝ 1em; լուսանցք՝ 2em 10px 4em; ֆոն՝ #fff; եզրագիծ՝ 4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) ներդիր տուփ-ստվերում:none: -ինդեքս:-1; աջ: 0px 1px rgba(0, 0, 0, 0.3), 0, 0, 0, 0.1 .block; :before, .block:after ( բովանդակություն:""; դիրք:բացարձակ; z-ինդեքս:-2; ներքևում:15px; ձախ:10px; լայնություն:50%; բարձրություն:20%; առավելագույն լայնություն:300px; տուփ- shadow:0 15px rgba(0, 0, 0, 0.7);