CSS գրադիենտի գեներատոր
Ստեղծեք գծային և շրջանաձև CSS գրադիենտների կոդ երկու գույնի և թեքության անկյան հիման վրա:
Գործարկել գործիքը
Այս գործիքը ստեղծում է CSS գրադիենտների պատրաստի կոդ վեբ էջերի և ինտերֆեյսների ձևավորման համար: Դուք կարող եք ընտրել երկու հիմնական գույն, սահմանել անցման թեքության անկյունը և նշել գրադիենտի տեսակը: Լռելյայն կարգավորմամբ օգտագործվում են #ff6b6b և #4ecdc4 երանգները, 45 աստիճան թեքությունը և գծային տեսակը: Գործիքը հնարավորություն է տալիս ստանալ ինչպես գծային, այնպես էլ շրջանաձև գրադիենտներ: Գծային տարբերակի դեպքում մուտքագրված անկյունը վերածվում է ամբողջ թվի և բերվում 0-ից 359 աստիճանի միջակայքի: Եթե անկյան դաշտում մուտքագրված է ոչ թվային արժեք, համակարգը ավտոմատ կիրառում է 45 աստիճանի ստանդարտ արժեքը: Շրջանաձև տարբերակի ընտրության դեպքում գեներացվում է կենտրոնից տարածվող շրջանաձև գունային անցում: Ստացված CSS կոդը կարող եք անմիջապես պատճենել և տեղադրել ձեր ոճերի աղյուսակում: Գույների արժեքները տեղադրվում են կոդի մեջ առանց փոփոխության, ուստի կարող եք օգտագործել HEX կոդեր, RGB կամ գույների անվանումներ: Եթե նշվի չճանաչված գրադիենտի տեսակ, գործիքը ինքնաբերաբար կկիրառի գծային կառուցվածքը:
Հրահանգներ
- Մուտքագրեք առաջին գույնը «Առաջին գույն» դաշտում կամ թողեք լռելյայն արժեքը:
- Մուտքագրեք երկրորդ գույնը «Երկրորդ գույն» դաշտում (օրինակ՝ HEX կամ RGB ձևաչափով):
- Սահմանեք անկյունը աստիճաններով («Անկյուն» դաշտում):
- Ընտրեք գրադիենտի տեսակը՝ գծային կամ շրջանաձև:
- Պատճենեք գեներացված CSS կոդը և տեղադրեք այն ձեր ոճերի աղյուսակում:
Օրինակներ
- Գծային գրադիենտ. Առաջին գույն՝ #ff6b6b, երկրորդ գույն՝ #4ecdc4, անկյուն՝ 90, տեսակ՝ գծային: Արդյունքում ձևավորվում է `linear-gradient(90deg, #ff6b6b, #4ecdc4)`:
- Շրջանաձև գրադիենտ. Առաջին գույն՝ #ffffff, երկրորդ գույն՝ #000000, տեսակ՝ շրջանաձև: Արդյունքում ձևավորվում է `radial-gradient(circle, #ffffff, #000000)`:
ՀՏՀ
Ի՞նչ տեղի կունենա, եթե անկյան դաշտը դատարկ մնա կամ լինի ոչ թվային:
Եթե անկյան արժեքը չի կարող վերածվել թվի, գործիքը ավտոմատ կերպով կիրառում է 45 աստիճանի ստանդարտ արժեքը:
Ինչպե՞ս է գործիքը մշակում 360-ից մեծ անկյունները:
Մուտքագրված թիվը ավտոմատ կերպով բերվում է 0-ից 359 աստիճանի միջակայքի (օրինակ՝ 405 աստիճանը դառնում է 45 աստիճան):
Կարո՞ղ եմ օգտագործել RGB կամ HSL գունային ձևաչափեր:
Այո, գունային արժեքները տեղադրվում են CSS կոդի մեջ առանց փոփոխության, ուստի կարող եք նշել ինչպես HEX, այնպես էլ RGB կամ HSL արժեքներ: