CSS գրադիենտների գեներատոր
Ստեղծեք գծային և շառավղային CSS գրադիենտների պատրաստի կոդ: Կարգավորեք տեսակը, ուղղությունը և գույները:
Գործարկել գործիքը
Այս օնլայն գործիքը ստեղծում է CSS գրադիենտի պատրաստի կոդ վեբ էջերի և ինտերֆեյսների ոճավորման համար: Դուք կարող եք ընտրել գրադիենտի տեսակը, ուղղությունը և գունային անցումները: Գործիքն ունի երեք տեքստային դաշտ՝ գրադիենտի տեսակ, ուղղություն և գույների ցանկ: Երբ տեսակի դաշտում նշված է գծային, ծրագիրը ստեղծում է համապատասխան CSS կանոն նշված ուղղությամբ, օրինակ՝ «to bottom» կամ «45deg»: Եթե մուտքագրված տեսակը տարբերվում է գծայինից, համակարգը ձևավորում է շրջանաձև շառավղային կառուցվածք: Գույների դաշտում արժեքները բաժանվում են ստորակետերով: Ծրագիրը հեռացնում է ավելորդ բացատները յուրաքանչյուր գույնի մոտից և միավորում դրանք CSS շարահյուսությանը համապատասխան հերթականությամբ: Կարող եք օգտագործել տասնվեցական կոդեր, RGB արժեքներ կամ գույների անվանումներ: Լռելյայն կարգավորումները ներառում են գծային տեսակ, to right ուղղություն և երկու գունային երանգ: Դաշտերը դատարկ թողնելու դեպքում ավտոմատ կիրառվում են հիմնական նախնական արժեքները: Կոդը գեներացնելուց հետո կարող եք անմիջապես պատճենել CSS տողը ձեր նախագծի ոճային ֆայլի մեջ:
Հրահանգներ
- Մուտքագրեք գրադիենտի տեսակը (օրինակ՝ գծային կամ շառավղային):
- Նշեք ուղղությունը գծային գրադիենտի համար (օրինակ՝ to right կամ 45deg):
- Մուտքագրեք գույները՝ ստորակետերով բաժանված (օրինակ՝ #ff7e5f, #feb47b):
- Ստացեք CSS գրադիենտի պատրաստի կոդը ձեր ոճերի համար:
Օրինակներ
- Գծային գրադիենտ երկու գույնով. Տեսակը՝ գծային, ուղղությունը՝ to bottom, գույները՝ #4facfe, #00f2fe: Արդյունքում ձևավորվում է linear-gradient(to bottom, #4facfe, #00f2fe):
- Շառավղային գրադիենտ. Տեսակը՝ շառավղային, գույները՝ #ff9a9e, #fecfef: Արդյունքում ձևավորվում է radial-gradient(circle, #ff9a9e, #fecfef):
ՀՏՀ
Ի՞նչ է տեղի ունենում, եթե գրադիենտի տեսակը «գծային» չէ:
Եթե տեսակի դաշտում մուտքագրված է «գծային» բացի ուրիշ արժեք, գործիքը ստեղծում է շրջանաձև շառավղային գրադիենտ: «circle» արժեքն ավելացվում է ինքնաբերաբար:
Քանի՞ գույն կարելի է ավելացնել:
Կարող եք մուտքագրել երկու կամ ավելի գույներ՝ դրանք միմյանցից բաժանելով ստորակետերով:
Ի՞նչ արժեքներ են կիրառվում դաշտերը դատարկ թողնելիս:
Դաշտերը դատարկ թողնելու դեպքում ավտոմատ օգտագործվում են հիմնական կարգավորումները՝ գծային տեսակ, to right ուղղություն և #ff7e5f, #feb47b գույներ: