CSS գրադիենտների հիմունքները և տեսակները
CSS գրադիենտները հնարավորություն են տալիս ստեղծել սահուն անցումներ երկու կամ ավելի գույների միջև, որոնք վեբ դիզայնում օգտագործվում են որպես հետնապատկերներ: Գրադիենտի տեսողական կառուցվածքը կախված է ընտրված երկրաչափական ձևից և ուղղությունից: Գոյություն ունեն գրադիենտի երեք հիմնական տեսակներ, որոնցից յուրաքանչյուրն ունի գույների բաշխման յուրահատուկ սկզբունք.
- Linear (Գծային): Միախառնում է գույները ուղիղ գծի երկայնքով.
- Radial (Շառավղային): Տարածում է գույները կենտրոնից դեպի դուրս.
- Conic (Կոնաձև): Պտտում է գույները կենտրոնի շուրջ.
Այս տեսակների ճիշտ ընտրությունը թույլ է տալիս ստեղծել տարբերվող վիզուալ էֆեկտներ՝ սովորական հետնապատկերներից մինչև բարդ երկրաչափական պատկերներ:
Գծային գրադիենտներ (Linear). Ուղղություն և անկյուններ
Գծային գրադիենտը (Linear) գույները տարածում է ուղիղ գծով: Այս գծի ուղղությունը որոշվում է կոնկրետ անկյան միջոցով, որը չափվում է աստիճաններով (°):
Անկյան սահմանման կանոնները հետևյալն են.
- 0° անկյունը ուղղված է ուղիղ վերև.
- 90° անկյունը ուղղված է դեպի աջ.
Անկյան աստիճանը փոխելիս փոխվում է գույների անցման ուղղությունը, ինչը հնարավորություն է տալիս ստեղծել հորիզոնական, ուղղահայաց կամ անկյունագծային անցումներ: Գծային գրադիենտի սկզբնական տարբերակը սովորաբար ներառում է երկու գունային կետ՝ #6366f1 0% և #ec4899 100%:
Շառավղային գրադիենտներ (Radial). Ձևեր և տարածում
Շառավղային գրադիենտը (Radial) տարածում է գույները կենտրոնական կետից դեպի դուրս՝ ստեղծելով շրջանաձև կամ էլիպսաձև անցումներ: Ի տարբերություն գծային տարբերակի, շառավղային գրադիենտը չի օգտագործում անկյուն:
Այս տեսակի դեպքում օգտագործողը կարող է ընտրել հետևյալ ձևերից մեկը.
- Էլիպս: Գույները տարածվում են ձգված ձևով՝ հարմարվելով տարրի կողմերի հարաբերակցությանը.
- Շրջան: Գույները տարածվում են հավասարաչափ՝ անկախ տարրի չափսերից.
Այս ձևերը որոշում են, թե ինչպես է գրադիենտը տարածվում կենտրոնից դեպի եզրեր:
Կոնաձև գրադիենտներ (Conic). Պտույտ կենտրոնի շուրջ
Կոնաձև գրադիենտը (Conic) գույները սահեցնում է կենտրոնական կետի շուրջ՝ ստեղծելով գունային անիվի նմանվող պատկեր:
Ինչպես գծային գրադիենտի դեպքում, այստեղ նույնպես օգտագործվում է անկյուն, որը որոշում է գրադիենտի սկզբնական ուղղությունը: 0° անկյան դեպքում սկզբնական գիծը ուղղված է վերև, իսկ աստիճանի փոփոխությունը պտտում է ամբողջ գունային անցումը ժամսլաքի ուղղությամբ: Այս տեսակը հաճախ օգտագործվում է շրջանաձև դիագրամների կամ հատուկ գունային անցումների պատրաստման համար:
Գունային կետերի (Color Stops) դերը
Գունային կետերը (color stops) որոշում են, թե որ գույնը գրադիենտի որ հատվածում պետք է տեղադրվի: Յուրաքանչյուր կետ բաղկացած է գունային արժեքից և դիրքից, որը չափվում է տոկոսներով՝ 0%-ից (սկիզբ) մինչև 100% (վերջ):
Գունային կետերի կառավարման կանոնները.
- Կարող եք օգտագործել նվազագույնը երկու և առավելագույնը ութ գունային կետ.
- Նոր ավելացված գունային կետերի լռելյայն դիրքը սահմանվում է 50%.
- Երբ ակտիվ են բոլոր ութ գունային կետերը, նոր կետ ավելացնելու կոճակը դառնում է անհասանելի.
Այս կետերի դիրքը փոխելով՝ կարելի է ստեղծել կտրուկ անցումներ կամ շատ նուրբ երանգավորումներ:
Ինչպես արդյունավետ օգտագործել Գրադիենտի գեներատորը
«Գրադիենտի գեներատոր» գործիքը նախատեսված է դիզայներների և ծրագրավորողների համար, ովքեր կարիք ունեն արագ ստեղծելու CSS հետնապատկերներ:
Գործիքի հետ աշխատելու քայլերը.
- Տեսակի ընտրություն: «Գրադիենտի տեսակը» բաժնում ընտրե՛ք Linear, Radial կամ Conic տարբերակներից մեկը.
- Պարամետրերի կարգավորում: Կախված ընտրված տեսակից՝ սահմանե՛ք «Անկյուն» արժեքը կամ ընտրե՛ք «Ձև» բաժնից «Շրջան» կամ «Էլիպս» տարբերակը.
- Գունային կետերի կառավարում: «Գունային կետեր» բաժնում կարող եք փոխել գույները, կարգավորել «Դիրք» սահիչը, օգտագործել «Ավելացնել կետ» կամ «Հեռացնել կետը» կոճակները.
- CSS-ի ստացում: Իրական ժամանակում գործող նախադիտման պատուհանում տեսողական պատկերը հաստատելուց հետո սեղմե՛ք «Պատճենել CSS-ը» կոճակը: Կոճակի վիճակը կփոխվի «Պատճենված է» գրվածքի, և կոդը կհայտնվի Ձեր բուֆերում.
Յուրաքանչյուր գրադիենտ գեներացվում է անմիջապես Ձեր բրաուզերում: Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo, ինչը ապահովում է տվյալների տեղային մշակումը:
Հաճախ տրվող հարցեր (FAQ)
Ո՞րն է տարբերությունը linear, radial և conic գրադիենտների միջև:
Գծային (linear) գրադիենտը միախառնում է գույները Ձեր նշած անկյունով ուղիղ գծի երկայնքով: Շառավղային (radial) գրադիենտը տարածում է դրանք կենտրոնից դեպի դուրս՝ շրջանի կամ էլիպսի ձևով: Կոնաձև (conic) գրադիենտը պտտում է գույները կենտրոնի շուրջ՝ գունային անիվի նման:
Որո՞նք են գունային կետերը (color stops):
Յուրաքանչյուր գունային կետ (color stop) գրադիենտի երկայնքով որոշակի դիրքում ամրացված գույն է՝ սկսած 0%-ից մինչև 100%: Տեղաշարժե՛ք կետը՝ փոխելու համար, թե որտեղ է գույնը հասնում իր առավելագույնին, կամ ավելացրե՛ք նոր կետեր ավելի հարուստ անցումների համար: Կարող եք օգտագործել մինչև ութ կետ:
Ինչպե՞ս կառավարել ուղղությունը:
Գծային (linear) կամ կոնաձև (conic) գրադիենտի դեպքում անկյան սահիչը որոշում է ուղղությունը. 0°-ն ուղղված է վերև, 90°-ը՝ աջ: Շառավղային (radial) գրադիենտն անկյուն չունի. դրա փոխարեն ընտրե՛ք շրջանաձև կամ էլիպսաձև տարբերակը՝ տարածման ձևը փոխելու համար:
Որքա՞ն է գունային կետերի առավելագույն քանակը:
Գործիքը թույլ է տալիս ավելացնել մինչև ութ գունային կետ: Երբ այս սահմանաչափը լրանում է, նոր կետ ավելացնելու հնարավորությունն արգելափակվում է: