Ինչպես ստեղծել CSS գրադիենտ երկու գույնից

Նշեք երկու գույն, անհրաժեշտության դեպքում ավելացրեք անկյունն ու տեսակը, ապա ստացեք դրանց հիման վրա կազմված CSS գրադիենտի տեքստը։ linear և radial արժեքները համապատասխանում են գծային և շրջանաձև ճառագայթային ձևաչափերին։

Գործիքի նպատակը և մուտքային արժեքները

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

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

Եթե դաշտերից որևէ մեկը չլրացնեք, կիրառվում են նախապես սահմանված արժեքներ։ Առաջին գույնի համար դա #ff6b6b է, երկրորդի համար՝ #4ecdc4, անկյան համար՝ 45 աստիճան, իսկ տեսակի համար՝ linear։ Այդ արժեքները կարող են օգտակար լինել արագ փորձարկման ժամանակ, երբ դեռ չեք որոշել վերջնական գունային համադրությունը կամ ուղղությունը։

Մուտքերի լրացում և CSS տեքստի ստացում

1. Առաջին դաշտում գրեք առաջին գունային արժեքը, օրինակ՝ #3366ff։ Երկրորդ դաշտում ավելացրեք մյուս գույնը, օրինակ՝ #ffcc00։ Այս արժեքները գործիքը տեղադրում է ստեղծվող CSS տեքստում, ուստի մուտքագրելուց առաջ ստուգեք դրանց գրությունը ձեր օգտագործման նպատակին համապատասխան ձևով։

2. Եթե ընտրում եք գծային գրադիենտ, նշեք ցանկալի անկյունը աստիճաններով։ Դրական կամ բացասական թվային արժեքը մշակվում է նախքան CSS տեքստում օգտագործվելը։ Եթե անկյունը չտրամադրեք, կգործի 45 աստիճանի նախնական արժեքը։

3. Նշեք գրադիենտի տեսակը։ linear արժեքը նախատեսված է գծային ձևաչափի համար, իսկ հենց radial արժեքը ստեղծում է շրջանաձև ճառագայթային ձևաչափ։ Եթե տեսակի դաշտը դատարկ մնա, կկիրառվի linear նախնական տարբերակը։

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

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

Արդյունքի ձևաչափի ստուգում

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

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

Տեսակի համար միայն linear և radial արժեքներն ունեն այստեղ նկարագրված առանձին նշանակություն։ Դրանցից տարբերվող արժեքը չի ստեղծում նոր գրադիենտային ձևաչափ, այլ օգտագործում է գծային ձևաչափը, մինչդեռ տրամադրված տեսակի արժեքը շարունակում է ներառված մնալ վերադարձված տվյալների մեջ։

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

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

Դիզայները ցանկանում է կոճակի համար ստանալ կապույտից դեղին անցնող գծային CSS գրադիենտ։

Մուտքագրեք #3366ff և #ffcc00, ընտրեք linear, նշեք 120 աստիճան և գործարկեք ստեղծման գործողությունը։

Ստացված CSS տեքստը կունենա գծային գրադիենտի ձև՝ 120 աստիճանի անկյունով և նշված երկու գույներով։

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

• Գունային արժեքների համար առանձին վավերացման քայլ չկա, ուստի CSS տեքստի կիրառելիությունը կախված է մուտքագրված գույների ձևից։

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

• Եթե շրջանաձև արդյունք եք ակնկալում, բայց տեսակի դաշտում գրում եք radial-ից տարբեր արժեք, գործիքը կօգտագործի գծային ձևաչափը։ Ստուգեք տեսակի դաշտը և գրեք հենց radial։

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

Ի՞նչ կլինի, եթե տեսակը կամ անկյունը չնշեմ։

Երբ տեսակի դաշտը դատարկ է, գործիքը ընտրում է linear, իսկ անկյան բացակայության դեպքում օգտագործում է 45 աստիճան։ Եթե ցանկանում եք այլ արդյունք, լրացրեք այդ դաշտերը նախքան ստեղծման գործողությունը։

Գործիքը ստուգո՞ւմ է, որ գույները CSS-ի վավեր գույներ են։

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

Ինչպե՞ս ստանալ շրջանաձև ճառագայթային գրադիենտ։

Շրջանաձև ճառագայթային ձևաչափ ստանալու համար տեսակի դաշտում օգտագործեք հենց radial արժեքը։ linear-ից և radial-ից տարբեր արժեքները առանձին ճառագայթային ձևաչափ չեն ստեղծում, այլ հանգեցնում են գծային ձևաչափի։