Ինչպես ստեղծել CSS box-shadow ստվերի կոդ

Լրացրեք ստվերի շեղման, աղոտացման, տարածման ու գույնի մուտքերը, անհրաժեշտության դեպքում միացրեք ներքին տարբերակը, ապա ստացեք CSS box-shadow հայտարարությունը։

CSS ստվերի կազմման գաղափարը

CSS box-shadow հատկությունը թույլ է տալիս վեբէջի տարրի շուրջ ստեղծել տեսանելի ստվերային էֆեկտ։ Այս գործիքը դրա համար կազմում է պատրաստ CSS հայտարարություն՝ միավորելով դիրքի, փափկության, տարածման և գույնի ընտրված արժեքները։ Այն կարող է հարմար լինել քարտի, կոճակի, վահանակի կամ այլ տարրի ձևավորումը փորձարկելիս, երբ ցանկանում եք տարբեր համադրություններ ստանալ առանց հայտարարության կառուցվածքը ձեռքով դասավորելու։

Կարգավորումների իմաստը կարելի է դիտարկել առանձին։ Հորիզոնական շեղումը որոշում է ստվերի տեղափոխումը առաջին ուղղությամբ, իսկ ուղղահայաց շեղումը՝ երկրորդ ուղղությամբ։ Աղոտացումը կապված է ստվերի փափկության հետ, իսկ տարածումը փոխում է դրա տարածվող չափը։ Գույնի տեքստային մուտքը թույլ է տալիս արդյունքի մեջ ներառել ձեր ընտրած գունային արժեքը։ Ներքին ստվերի ընտրանքը նախատեսված է այն տարբերակի համար, երբ ստվերը պետք է նշվի որպես տարրի ներսում գտնվող էֆեկտ։

Այս մոտեցումը օգտակար է նաև այն դեպքում, երբ նախ ուզում եք ստանալ CSS-ի մեկ հայտարարություն, ապա այն հարմարեցնել ձեր ոճավորման կանոնի համատեքստում։ Գեներացված արդյունքը ինքնուրույն էջի ամբողջական ոճավորում չէ, այլ box-shadow հայտարարություն է՝ ընտրված ստվերային պարամետրերով։

Կարգավորումների կիրառման հերթականությունը

1. Գործիքի կառավարման հատվածում գտեք հորիզոնական շեղման, ուղղահայաց շեղման, աղոտացման և տարածման թվային դաշտերը։ Նույն հատվածում փնտրեք գույնի տեքստային դաշտը և ներքին ստվերի ընտրանքը։ Թվային չորս դաշտերի նախադրված արժեքներն են համապատասխանաբար 2, 2, 5 և 0, գույնի նախադրված արժեքը՝ #00000033, իսկ ներքին ստվերի տարբերակը սկզբում անջատված է։ Եթե նախնական տեսքը համապատասխանում է ձեր նպատակին, կարող եք այդ արժեքները թողնել անփոփոխ։

2. Որոշեք, թե ինչ տեսք եք ցանկանում ստանալ, և փոխեք միայն դրա համար անհրաժեշտ մուտքերը։ Հորիզոնական կամ ուղղահայաց շեղման արժեքը փոխելիս փոխվում է ստվերի դիրքի համապատասխան բաղադրիչը։ Աղոտացման արժեքը ընտրելիս հաշվի առեք, որ այն արդյունքի մեջ ներկայացվում է որպես երրորդ թվային դիրք, իսկ տարածման արժեքը՝ որպես չորրորդ։ Այս բաժանումը օգնում է հասկանալ, թե հայտարարության որ հատվածն է արտացոլում ձեր կատարած փոփոխությունը։

3. Գույնի դաշտում գրեք այն տեքստային գունային արժեքը, որը ցանկանում եք տեսնել ստացված հայտարարության մեջ։ Մի փոխեք մյուս դաշտերը, եթե դրանց ներկայիս արժեքները բավարար են ձեր փորձարկման համար։ Գործիքը նախատեսված է գույնի մուտքը մյուս ստվերային կարգավորումների հետ նույն հայտարարության մեջ ներառելու համար։

4. Եթե պահանջվում է տարրի ներսի ստվեր, միացրեք համապատասխան ընտրանքը։ Անջատված վիճակում արդյունքը չի ստանում ներքին տարբերակը նշող inset բառը, իսկ միացված վիճակում այդ նշումը ավելացվում է հայտարարությանը։ Այդ ընտրությունը կատարելուց հետո ստուգեք, որ մյուս դաշտերում պահպանվել են ձեր նախատեսած արժեքները։

5. Գործարկեք հաշվարկի կամ ստեղծման գործողությունը և դիտեք ներկայացված CSS հայտարարությունը։ Ստացված տողը համեմատեք ձեր ընտրած թվերի ու գույնի հետ, որպեսզի տեսնեք՝ վերջին փոփոխությունները ներառվա՞ծ են։ Եթե որևէ մուտք նորից փոխեք, գործողությունը կրկին գործարկեք, քանի որ նոր հայտարարությունը պետք է կազմվի թարմացված կարգավորումներից։

6. Երբ արդյունքի կառուցվածքը համապատասխանում է ձեր նպատակին, հայտարարությունը տեղադրեք այն CSS կանոնի մեջ, որտեղ ցանկանում եք ձևավորել համապատասխան տարրը։ Տեղադրումից հետո դիտեք տարրի տեսքը և անհրաժեշտության դեպքում վերադառնաք գործիքի կարգավորումներին՝ դիրքը, փափկությունը, տարածումը կամ գույնը վերանայելու համար։ Նույն ընթացակարգը կարելի է կիրառել արտաքին և ներքին ստվերի տարբերակները համեմատելու համար՝ փոխելով միայն ներքին ընտրանքի վիճակը։

Օրինակային փորձարկման համար կարելի է սկսել նախադրված արժեքներից, ապա փոփոխել միայն ուղղահայաց շեղումը և աղոտացումը։ Այդ եղանակը պահպանում է մյուս բաղադրիչները նույն վիճակում և հեշտացնում է ստացված տարբերությունների նկատումը։ Եթե ցանկանում եք ստուգել զրոյական արժեքներով տարբերակը, հորիզոնական շեղման, ուղղահայաց շեղման, աղոտացման և տարածման դաշտերում մուտքագրեք 0, ապա գործարկեք հաշվարկը։

Հայտարարության կառուցվածքի մեկնաբանությունը

Ստացված CSS հայտարարության մեջ չորս թվային արժեքները դասավորվում են նույն հերթականությամբ, որով box-shadow ձևաչափում ներկայացվում են հորիզոնական շեղումը, ուղղահայաց շեղումը, աղոտացումը և տարածումը։ Գործիքը այդ թվերից յուրաքանչյուրին ավելացնում է px, ուստի արդյունքը ցույց է տալիս ոչ միայն մուտքագրված թիվը, այլև դրա պիքսելային միավորը։ Ընտրված գունային տեքստը տեղադրվում է նույն հայտարարության մեջ՝ թվային բաղադրիչների կողքին։

Ներքին ընտրանքի միացված լինելը կարելի է ստուգել արդյունքի կառուցվածքով։ Այդ վիճակում հայտարարության մեջ հայտնվում է inset նշումը, որը տարբերակում է ներքին ստվերի տարբերակը։ Եթե նշումը չկա, արդյունքը չի արտացոլում միացված ներքին տարբերակ, և պետք է ստուգել ընտրանքի վիճակն ու կրկնել ստեղծման գործողությունը։

Զրո արժեքների համադրությունը նույնպես կարող է օգտագործվել որպես պարզ ստուգման օրինակ։ Փորձարկված հաշվարկի դեպքում հորիզոնական շեղման, ուղղահայաց շեղման, աղոտացման և տարածման համար զրոների ընդունումը հաղորդում է հաջող արդյունք։ Այդ դիտարկումը վերաբերում է նշված փորձարկված համադրությանը և չի սահմանում մյուս թվերի թույլատրելի միջակայքերը։

Գործիքի հաստատված հնարավորությունների նկարագրության մեջ նշված չեն թվային սահմանները, գունային շարահյուսության վավերացման պայմանները, կլորացման եղանակը կամ սխալների մշակման մանրամասները։ Այդ պատճառով արդյունքը գնահատելիս կենտրոնացեք ստացված հայտարարության կառուցվածքի վրա և ձեր էջում առանձին ստուգեք այն տեսքը, որը ցանկանում եք ստանալ։

Գործնական օրինակ

Քարտի ներսում մեղմ ստվեր ստանալու համար ընտրված է փոքր ուղղահայաց շեղում և ավելի մեծ աղոտացման արժեք։

Քարտի ներքին ստվերի համար սահմանեք հորիզոնական շեղումը 0, ուղղահայաց շեղումը 4, աղոտացումը 10, տարածումը 0, պահպանեք #00000033 գույնը և միացրեք ներքին ընտրանքը, ապա գործարկեք ստեղծումը։

Արդյունքի ձևը կլինի box-shadow: 0px 4px 10px 0px #00000033 inset;՝ չորս թվային արժեքով, գույնով և inset նշումով։

Սահմանափակումներ

• Ստուգված հնարավորությունը վերաբերում է CSS box-shadow հայտարարության կազմմանը և թվային կարգավորումների ու գույնի փոխանցմանը, սակայն հայտնի տեղեկությունը չի սահմանում թվային միջակայքեր, գունային շարահյուսության կանոններ, կլորացում կամ արդյունքի սահմանաչափ։

Հաճախակի սխալներ

• Եթե ներքին ստվեր եք ակնկալում, բայց ստացված տողում inset նշումը չկա, ստուգեք ներքին ստվերի ընտրանքը, միացրեք այն և կրկին գործարկեք ստեղծման գործողությունը։

Հաճախ տրվող հարցեր

Ի՞նչ կարգավորումներ կարելի է փոխել։

Գործիքը թույլ է տալիս փոփոխել հորիզոնական ու ուղղահայաց շեղումները, աղոտացման և տարածման թվերը, գույնի տեքստային արժեքը, ինչպես նաև ներքին ստվերի ընտրանքի վիճակը։

Թվային արժեքները ներկայացվո՞ւմ են px միավորով։

Արդյունքի մեջ յուրաքանչյուր թվային ստվերային արժեք գրվում է px հավելումով, ներառյալ չորս կարգավորվող թվերի դիրքերը։

Ինչպե՞ս ստանալ տարրի ներսի ստվեր։

Ներքին տարբերակ ստանալու համար միացրեք ներքին ստվերի ընտրանքը, ինչից հետո գեներացված հայտարարության մեջ ներառվում է inset նշումը։