Ինչպես ստեղծել CSS text-shadow ստվեր

Լրացրեք չորս մուտքերը և ստացեք CSS text-shadow հայտարարություն՝ շեղումների, աղոտացման ու գույնի նշված արժեքներով։ Դատարկ դաշտերի դեպքում գործիքը օգտագործում է սահմանված նախնական արժեքները։

CSS ստվերի հայտարարության նպատակն ու մուտքերը

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

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

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

Դաշտերից մինչև պատրաստ CSS տող

1. Բացեք CSS տեքստային ստվերի ստեղծման գործիքը և գտեք հորիզոնական շեղման, ուղղահայաց շեղման, աղոտացման ու գույնի դաշտերը։ Նախքան մուտքագրելը որոշեք, թե որ տեքստային տարրի համար եք պատրաստում հայտարարությունը, որպեսզի յուրաքանչյուր թիվ կապեք դրա ցանկալի տեսքի հետ։

2. Հորիզոնական շեղման դաշտում գրեք թվային արժեք։ Դրական կամ բացասական թիվը օգտագործեք հորիզոնական ուղղությունը նշելու համար, իսկ եթե ցանկանում եք ստուգել առանց հորիզոնական տեղաշարժի տարբերակը, մուտքագրեք զրո։ Զրոն այս դաշտում ընդունվում է հաջող հաշվարկի ժամանակ։

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

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

5. Գույնի դաշտում գրեք գույնի տեքստային արժեքը։ Դրա կողքին մի գրեք շեղման կամ աղոտացման թիվ, քանի որ գույնի մուտքը առանձին տեքստային դաշտ է։ Եթե այս դաշտը չլրացնեք, կիրառվում է #00000033 նախնական արժեքը։

6. Մուտքերը լրացնելուց հետո գործարկեք հաշվարկը և ուսումնասիրեք ստացված հայտարարությունը։ Գործիքը կազմում է CSS text-shadow հայտարարություն՝ ձեր նշած հորիզոնական շեղմամբ, ուղղահայաց շեղմամբ, աղոտացման արժեքով և գույնով։

7. Ստուգեք ստացված տողի ձևաչափը նախքան այն ձեր ոճաթերթում օգտագործելը։ Հորիզոնական շեղումը, ուղղահայաց շեղումը և աղոտացումը պետք է գրված լինեն px միավորներով, իսկ հայտարարության վերջում պետք է լինի կետ-ստորակետ։ Եթե որևէ դաշտ դատարկ է մնացել, տվյալ դիրքում պետք է հաշվի առնել համապատասխան նախնական թիվը կամ գույնը, այլ ոչ թե ենթադրել, որ պահպանվել է նախորդ կարգավորումը։

Արդյունքի կառուցվածքի ստուգում

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

Թվերի կողքին px նշումը նշանակում է, որ գործիքը տվյալ արժեքները ներկայացրել է պիքսելային միավորներով։ Կետ-ստորակետը հայտարարության ավարտի նշանն է, ուստի այն նույնպես ստուգեք, երբ արդյունքը տեղափոխում եք CSS կանոնի մեջ։ Եթե այդ երկու ձևաչափային հատկանիշները առկա են, տողը համապատասխանում է գործիքի կողմից նկարագրված ելքի կառուցվածքին, սակայն դա ինքնին չի որոշում ձեր էջում ստվերի ցանկալի տեսքը։

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

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

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

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

Դիզայները վերնագրի համար ընտրում է աջ և ներքև ուղղված մուգ ստվերի մուտքեր։

Դիզայները հորիզոնական շեղման համար մուտքագրում է 4, ուղղահայացի համար՝ 3, աղոտացման համար՝ 6, գույնի համար՝ #333333, ապա գործարկում է հաշվարկը։

Ստացվում է text-shadow հայտարարություն, որի չորս բաղադրիչները համապատասխանում են մուտքերին, երեք թվային արժեքներն ունեն px միավորներ, իսկ տողի վերջում կա կետ-ստորակետ։

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

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

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

• Սխալ է առաջանում, երբ գույնի դաշտում տեղադրվում է թվային շեղում կամ արդյունքի մեջ անտեսվում են px միավորները։ Ուղղեք դա՝ յուրաքանչյուր արժեք մուտքագրելով իր համապատասխան դաշտում և ստուգելով պատրաստ տողի երեք թվային բաղադրիչների ձևաչափը։

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

Ի՞նչ արժեքներ են կիրառվում դատարկ դաշտերի դեպքում։

Դատարկ հորիզոնական և ուղղահայաց դաշտերի համար օգտագործվում է 1, աղոտացման դաշտի համար՝ 2, իսկ գույնի դաշտի համար՝ #00000033։

Թույլատրելի՞ է զրո գրել շեղման կամ աղոտացման համար։

Այո, հաջող հաշվարկի ժամանակ զրո կարելի է մուտքագրել երկու շեղումների և աղոտացման դաշտերում։

Ինչպիսի՞ կառուցվածք ունի արդյունքը։

Ստացվում է CSS text-shadow հայտարարություն, որտեղ երեք թվային արժեքները գրված են px միավորներով, իսկ տողը ավարտվում է կետ-ստորակետով։