Ինչպես ստեղծել CSS linear և radial gradient-ի կոդ

Մուտքագրեք gradient-ի տեսակը, ուղղությունը և գույների ցանկը, ապա գործարկեք գեներացումը՝ CSS կոդ ստանալու համար։ linear տեսակը պահպանում է նշված ուղղությունը, իսկ դրանից տարբեր տեսակի տեքստը տալիս է circle ձևով radial արդյունք։

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

CSS Gradient Generator-ը CSS-ի համար gradient-ի կոդ պատրաստելու գործիք է։ Այն ստեղծում է երկու արդյունքի ձև՝ linear gradient և radial gradient՝ circle ձևով։ Գործիքը օգտակար է, երբ վեբ էջի ֆոնի համար ցանկանում եք արագ կազմել CSS հայտարարություն՝ ընտրելով անցման տեսակը, ուղղությունը և գույները։ Այս մոտեցմամբ նախապես տեսնում եք այն տեքստային կառուցվածքը, որը կարող եք ուսումնասիրել և հարմարեցնել ձեր ոճերի մեջ օգտագործելուց առաջ։

Երեք մուտքերը լրացնելու պարտադիր պահանջ չկա։ Եթե տեսակի, ուղղության կամ գույների դաշտերը չփոխեք, կիրառվում են նախնական արժեքներ՝ համապատասխանաբար linear, to right և #ff7e5f, #feb47b։ Դրանք կարող են ծառայել որպես մեկնարկային տարբերակ, իսկ ձեր դիզայնի համար անհրաժեշտ գույները և ուղղությունը կարող եք նշել առանձին։

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

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

1. Բացեք գործիքը և գտեք gradient-ի տեսակի, ուղղության ու գույների համար նախատեսված տեքստային մուտքերը։ Եթե դեռ չունեք վերջնական դիզայնի արժեքներ, կարող եք սկսել նախնական տվյալներից և հետո փոխել միայն անհրաժեշտ դաշտերը։

2. Գծային տարբերակ ստանալու համար տեսակի դաշտում գրեք հենց linear։ Ուղղության դաշտում նշեք այն տեքստը, որը ցանկանում եք տեսնել գծային CSS-ի մեջ, օրինակ՝ to right, to bottom կամ մեկ այլ ուղղության արտահայտություն։ Երբ տեսակը ճիշտ linear է, գործիքը այդ ուղղության տեքստը ներառում է ստեղծվող linear gradient-ի կոդում։

3. Գույների դաշտում գրեք գույների ցանկը՝ դրանք բաժանելով ստորակետերով։ Օրինակ կարող եք մուտքագրել #6a11cb, #2575fc։ Եթե ցանկում ստորակետերի կողքին բացատներ կան, գործիքը յուրաքանչյուր ստացված մասի շուրջ եղած բացատները հեռացնում է, ապա գույները միացնում է ստորակետով և մեկ բացատով։ Այս մշակումը փոխում է բաժանման ձևը, բայց չի նշանակում, որ մուտքագրված գունային գրառումները ստուգվում են։

4. Շրջանաձև radial արդյունք ստանալու համար տեսակի դաշտում գրեք linear-ից տարբեր արժեք կամ օգտագործեք այդպիսի արժեքի համար նախատեսված մուտքագրում։ Այդ դեպքում ստեղծվող gradient-ը radial է և ունի circle ձև։ Ուղղության տեքստը այս ճյուղում չի գործում որպես linear gradient-ի ուղղություն, ուստի radial տարբերակ ընտրելիս գնահատեք տեսակը և գույների հաջորդականությունը, ոչ թե սպասեք գծային ուղղության կիրառմանը։

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

Ելքի կառուցվածքի ընթերցում և կիրառման սահմաններ

Ստացված կոդը ներկայացնում է CSS gradient, որի կառուցվածքը ցույց է տալիս ընտրված ճյուղը։ Եթե տեսակը linear է, կոդում պետք է փնտրել ձեր նշած ուղղության տեքստը։ Եթե տեսակի արժեքը դրանից տարբեր է, ելքը պետք է մեկնաբանել որպես circle ձևով radial gradient, նույնիսկ եթե մուտքագրած բառը նկարագրում էր մեկ այլ ցանկություն։

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

Դատարկ թողած դաշտերը կարդացեք նախնական արժեքների համատեքստում։ Եթե միայն գույների դաշտն եք փոխել, տեսակը շարունակում է լինել linear, իսկ ուղղությունը՝ to right։ Եթե փոխում եք տեսակը մեկ այլ բառով, այդ բառը պետք չէ ընկալել որպես radial-ի լրացուցիչ ռեժիմ, քանի որ linear-ից տարբեր արժեքների համար կիրառվում է նույն circle ձևով radial վարքը։

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

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

Վեբ էջի վերնագրի համար ցանկանում եք մանուշակագույնից կապույտ անցում, որը վերևից շարժվում է դեպի ներքև։

Վերնագրի ֆոնի համար տեսակի մուտքում գրեք linear, ուղղության դաշտում մուտքագրեք to bottom, գույների դաշտում նշեք #6a11cb, #2575fc, ապա գործարկեք գեներացումը։

Ելքում պետք է երևա linear gradient-ի CSS կոդ, որտեղ ուղղության հատվածը համապատասխանում է to bottom արժեքին, իսկ գույների հատվածում պահպանվում է #6a11cb, #2575fc հերթականությունը՝ ստորակետից հետո մեկ բացատով։

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

• Ելքի տեսակը որոշվում է տեսակի դաշտի տեքստով, ուղղությունը կիրառվում է միայն linear ճյուղում, իսկ գույների գրառումները մշակվում են բաժանման ու բացատների հեռացման կանոնով՝ առանց դրանց շարահյուսությունը կամ գունային անունները ստուգելու։

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

• Եթե գծային անցում եք ակնկալում, բայց տեսակի դաշտում գրել եք linear-ից տարբեր արժեք, գործիքը կստեղծի circle ձևով radial gradient։ Ուղղումը պարզ է՝ տեսակի մուտքում օգտագործեք հենց linear, իսկ ուղղությունը գրեք առանձին դաշտում։

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

Ի՞նչ կստացվի, եթե մուտքերը չփոխեմ։

Դաշտերը դատարկ թողնելու դեպքում գործիքը կիրառում է իր նախնական տվյալները՝ linear տեսակը, to right ուղղությունը և #ff7e5f, #feb47b գույները։ Այդ արժեքները կարող եք փոխարինել ձեր մուտքերով՝ առանց երեք դաշտերը միաժամանակ լրացնելու։

Ինչպե՞ս սահմանել linear gradient-ի ուղղությունը։

Ուղղություն նշել կարելի է այն դեպքում, երբ տեսակի մուտքում գրված է հենց linear։ Այդ պայմանով ձեր ուղղության տեքստը ներառվում է գծային gradient-ի ստեղծվող CSS կոդում։

Ինչպե՞ս ստանալ radial gradient-ի շրջանաձև տարբերակը։

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