CSS Box Shadow-ի գեներատոր
CSS-ում box-shadow հատկությունը հնարավորություն է տալիս ստեղծելու եռաչափության և խորության պատրանք վեբ-էջի տարրերի շուրջ: Այս գործիքը թույլ է տալիս կարգավորել ստվերի տարբեր հատկությունները հատուկ սահիչների միջոցով, համադրել մի քանի շերտեր բարդ տեսողական էֆեկտներ ստանալու համար և անմիջապես պատճենել գեներացված CSS կոդը նախագծերում օգտագործելու համար:
Յուրաքանչյուր ստվեր գեներացվում է Ձեր բրաուզերում: Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo:
Շեղման, աղոտության և տարածման դերը ստվերի դիզայնում
Ստվերի ֆիզիկական տեսքը և դրա ընկալումը կախված են մի քանի հիմնական չափումներից, որոնք գործիքում կառավարվում են իրական ժամանակում թարմացվող սահիչներով: Այս հատկությունների փոփոխությունը թույլ է տալիս ստեղծել ինչպես խիտ ու մոտ, այնպես էլ փափուկ ու լայն ստվերներ:
- Հորիզոնական շեղում: Տեղաշարժում է ստվերը ձախ կամ աջ: Սահիչի տիրույթն է -50px-ից մինչև 50px:
- Ուղղահայաց շեղում: Տեղաշարժում է ստվերը վերև կամ ներքև: Սահիչի տիրույթն է -50px-ից մինչև 50px:
- Աղոտություն (Blur): Փափկեցնում է ստվերի եզրերը: 0px արժեքի դեպքում ստվերն ունենում է կոշտ, հստակ եզրագիծ, իսկ առավելագույն 100px արժեքի դեպքում այն առավելագույնս տարրալուծվում է:
- Տարածում (Spread): Մեծացնում կամ փոքրացնում է ստվերի չափսերը նախքան աղոտացման էֆեկտի կիրառումը: Սահիչի տիրույթն է -50px-ից մինչև 50px: Բացասական տարածումը սեղմում է ստվերը դեպի ներս:
Արտաքին և ներքին ստվերների տարբերությունը
Ստվերի ուղղությունը սկզբունքորեն փոխում է տարրի ընկալումը էջի հարթության վրա: Գործիքն առաջարկում է երկու հիմնական ռեժիմ.
- Արտաքին ստվեր (լռելյայն): Ստվերն ընկնում է տարրի սահմաններից դուրս: Սա ստեղծում է բարձրացված քարտի տպավորություն, որտեղ տարրը կարծես լողում է հետնապատկերի վրա:
- Ներքին ստվեր (Inset): Այս տարբերակի ակտիվացումը շրջում է ստվերը տարրի ներսը: Արդյունքում ստեղծվում է ներս սեղմված, փորված տարրի էֆեկտ, որը հարմար է ներս ընկած մուտքագրման դաշտերի կամ սեղմված կոճակների պատկերման համար:
Խորության ստեղծում բազմաշերտ ստվերների միջոցով
Իրական կյանքում լույսի աղբյուրները հազվադեպ են ստեղծում միայն մեկ կոշտ ստվեր: Իրատեսական խորություն և փափկություն ստանալու համար դիզայներներն ու ծրագրավորողները համադրում են ստվերի մի քանի շերտեր:
Գործիքը նախապես ներկայացնում է հինգ շերտ, որոնցից առաջինն ունի լռելյայն 0 8 24 -4 արժեքները և 18% թափանցիկությամբ սև գույն, իսկ մյուս շերտերը սկզբնապես թաքցված են: Դուք կարող եք օգտագործել հետևյալ կառավարման տարրերը.
- Ավելացնել շերտ: Ստեղծում է նոր ստվերի շերտ լռելյայն արժեքներով:
- Հեռացնել շերտը: Ջնջում է ընտրված ստվերի շերտը:
Երբ առկա են մի քանի շերտեր, գեներացված CSS կոդում դրանք ներկայացվում են ստորակետներով անջատված արժեքների տեսքով: Օրինակ՝ խիտ ու մուգ ստվերը կարող է համադրվել ավելի լայն ու թույլ ստվերի հետ՝ ապահովելով բնական անցումներ:
Ինտերֆեյսի կառավարման տարրեր և ելքային տվյալներ
Գործիքի աշխատանքային տիրույթում յուրաքանչյուր շերտի համար հասանելի են հետևյալ կարգավորումները.
| Կարգավորում | Տիպ / Սահմաններ | Նկարագրություն |
|---|---|---|
| Հորիզոնական շեղում | Սահիչ (-50px-ից 50px) | Շարժում է ստվերը հորիզոնական առանցքով |
| Ուղղահայաց շեղում | Սահիչ (-50px-ից 50px) | Շարժում է ստվերը ուղղահայաց առանցքով |
| Աղոտություն (Blur) | Սահիչ (0px-ից 100px) | Որոշում է եզրերի փափկությունը |
| Տարածում (Spread) | Սահիչ (-50px-ից 50px) | Փոխում է ստվերի սկզբնական չափը |
| Ստվերի գույնը | Color picker | Սահմանում է ստվերի երանգը |
| Անթափանցիկություն | Սահիչ | Կարգավորում է ստվերի թափանցիկության աստիճանը |
| Ներքին ստվեր (Inset) | Փոխանջատիչ | Տեղափոխում է ստվերը տարրի ներս |
Ելքային բաժնում ցուցադրվում է պատրաստի CSS կոդը, որը կարելի է պատճենել մեկ սեղմումով:
Հաճախ տրվող հարցեր (FAQ)
Ի՞նչ են իրականում կառավարում offset-ը, blur-ը և spread-ը?
Շեղումը (offset) տեղաշարժում է ստվերը ձախ/աջ և վերև/ներքև, աղոտությունը (blur) փափկեցնում է դրա եզրերը, իսկ տարածումը (spread) մեծացնում կամ փոքրացնում է այն նախքան աղոտացնելը: Բացասական տարածումը սեղմում է ստվերը դեպի ներս, ինչը օգտակար է խիտ, մոտ ստվերների համար:
Ի՞նչ է անում inset տարբերակը?
Սովորական ստվերն ընկնում է տարրից դուրս՝ ստեղծելով բարձրացված քարտի տպավորություն: «Inset» տարբերակն այն շրջում է դեպի ներս, ինչի շնորհիվ տարրը թվում է ներս սեղմված. սա հարմար է ներս ընկած մուտքագրման դաշտերի կամ սեղմված կոճակների համար:
Ինչո՞ւ համադրել մեկից ավելի ստվերի շերտեր?
Մեկ ստվերը որոշակի չափից հետո տափակ տեսք է ստանում: Իրական խորություն ստանալու համար սովորաբար համադրում են խիտ, մուգ ստվերը ավելի փափուկ ու լայն ստվերի հետ: Ավելացրե՛ք երկրորդ շերտը և կարգավորե՛ք յուրաքանչյուրն առանձին՝ այդ էֆեկտին հասնելու համար: