CSS Border Radius-ի կիրառումը և աշխատանքի սկզբունքը
CSS border-radius հատկությունը հնարավորություն է տալիս կառավարել տարրերի անկյունների կլորացումը։ Այս գործիքի միջոցով կարող եք կարգավորել յուրաքանչյուր անկյունն առանձին կամ կապակցել դրանք միասին՝ միասնական կառավարման համար։ Գործիքն առաջարկում է ինչպես պիքսելային (px), այնպես էլ տոկոսային (%) չափման միավորներ։
Սկզբնական վիճակում սահիչի արժեքը սահմանված է 24, ինչի արդյունքում գեներացվում է border-radius: 24px; կոդը։ Չորս անկյունների սահիչները քարտեզագրվում են ժամացույցի սլաքի ուղղությամբ՝ սկսելով վերևի ձախ անկյունից և շարունակվելով դեպի վերևի աջ, ներքևի աջ և ներքևի ձախ անկյունները։ Յուրաքանչյուր անկյուն գծվում է անմիջապես Ձեր բրաուզերում. Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo։
Չափման միավորների տարբերությունը. px և %
Միավորների ընտրությունը հիմնարար ազդեցություն ունի տարրի վարքագծի վրա, երբ փոխվում են դրա չափսերը։
- Պիքսելներ (px): Այս միավորն օգտագործելիս անկյունը կլորանում է ֆիքսված չափով՝ անկախ տարրի սեփական լայնությունից կամ բարձրությունից։ Սա ապահովում է կայուն տեսք փոքր տարրերի, օրինակ՝ սովորական կոճակների համար։
- Տոկոսներ (%): Տոկոսային տարբերակում կլորացումը հաշվարկվում է տարրի չափերին համեմատական։ Հորիզոնական տոկոսը հետևում է տարրի լայնությանը, իսկ ուղղահայաց տոկոսը՝ բարձրությանը։ Սա հնարավորություն է տալիս ստեղծելու ռեսպոնսիվ դիզայն, որտեղ կլորացումը համամասնորեն փոփոխվում է տարրի չափսերի փոփոխության հետ մեկտեղ։
Էլիպսաձև անկյունների կառավարում
Երբ էլիպսաձև անկյունների ռեժիմն անջատված է, յուրաքանչյուր անկյուն իրենից ներկայացնում է մեկ շառավղով քառորդ շրջան։ Սակայն ավելի բարդ ու փափուկ ձևեր ստանալու համար կարելի է ակտիվացնել էլիպսաձև ռեժիմը։
Այս ռեժիմում յուրաքանչյուր անկյուն ստանում է առանձին հորիզոնական և ուղղահայաց շառավիղներ։ Սրա շնորհիվ հնարավոր է դառնում ստեղծել ոչ համաչափ, օրգանական «բլոբ» (blob) ձևեր։ CSS-ում սա արտահայտվում է երկու արժեքով՝ թեք գծով (slash) բաժանված կառուցվածքով, որտեղ թեք գծից առաջ նշվում են հորիզոնական արժեքները, իսկ դրանից հետո՝ ուղղահայաց արժեքները։ Երբ անկյունները նորից դառնում են համաչափ կլոր, գեներատորն ավտոմատ կերպով վերադառնում է կոդի սովորական կարճ ձևին։
Կատարյալ շրջանների և պատիճաձև կոճակների ստեղծում
Որոշակի երկրաչափական պատկերներ ստանալու համար գոյություն ունեն հստակ կանոններ.
- Կատարյալ շրջան: Քառակուսի տարրից կատարյալ շրջան ստանալու համար անհրաժեշտ է կապակցել բոլոր անկյունները, ընտրել տոկոսային (%) միավորը և սահմանել արժեքը 50%։
- Պատիճաձև (pill) կոճակ: Երկարավուն կոճակների կողային հատվածները լիովին կլոր պահելու համար պետք է օգտագործել պիքսելային (px) միավորը։ Սահիչը պետք է քաշել տարրի բարձրության կեսից ավելի արժեքի վրա։ Այս դեպքում, անկախ տարրի լայնության փոփոխությունից, կողքերը միշտ կմնան կատարյալ կլորացված։
Գործիքի ինտերֆեյսի տարրերը և նախակարգավորումները
Գործիքի կառավարման վահանակը բաղկացած է հետևյալ բաժիններից.
- Կարգավորումներ: «Կապակցել բոլոր անկյունները» և «Էլիպսաձև անկյուններ» փոխանջատիչներ, ինչպես նաև «Միավոր» սելեկտոր (px կամ %)։
- Սահիչներ: Կախված ընտրված ռեժիմից՝ հասանելի է կամ մեկ ընդհանուր սահիչ՝ «Բոլոր անկյունները», կամ չորս առանձին սահիչներ՝ «Վերևի ձախ», «Վերևի աջ», «Ներքևի աջ» և «Ներքևի ձախ»։ Էլիպսաձև ռեժիմում յուրաքանչյուր անկյան համար հայտնվում են առանձին «Հորիզոնական» և «Ուղղահայաց» սահիչներ։ Բոլոր սահիչների տիրույթը 0-100 է։
- Նախակարգավորումներ: Արագ արդյունքի հասնելու համար հասանելի են հետևյալ կոճակները՝ «Սուր», «Կլորացված», «Շրջան» (որը բոլոր անկյունները սահմանում է 50%), «Բլոբ» և «Տերև»։
- Արդյունք: Տեսողական նախադիտման պատուհանը ցույց է տալիս ստացված պատկերը, իսկ դրա տակ գտնվող «CSS» բաժնից կարող եք «Պատճենել CSS-ը» կոճակով վերցնել պատրաստի կոդը։
Հաճախ տրվող հարցեր (FAQ)
Ինչպե՞ս են աշխատում չորս անկյունները և px-ի ու %-ի տարբերությունը:
Չորս սահիչները ժամացույցի սլաքի ուղղությամբ համապատասխանում են վերևի ձախ, վերևի աջ, ներքևի աջ և ներքևի ձախ անկյուններին։ Պիքսելներով (px) անկյունը կլորանում է ֆիքսված չափով, իսկ տոկոսներով (%)՝ տուփի (box) չափերին համեմատական. հորիզոնական տոկոսը հետևում է լայնությանը, իսկ ուղղահայացը՝ բարձրությանը, ուստի 50%-ը քառակուսին վերածում է շրջանի։
Ի՞նչ է անում էլիպսաձև ռեժիմը:
Երբ այս ռեժիմն անջատված է, յուրաքանչյուր անկյուն ստանում է մեկ շառավղով քառորդ շրջան։ Միացնելու դեպքում յուրաքանչյուր անկյուն ստանում է առանձին հորիզոնական և ուղղահայաց շառավիղներ, ինչի շնորհիվ կարող եք ստեղծել փափուկ, օրգանական «բլոբ» (blob) ձևեր։ Գեներատորն ինքնուրույն կգրի երկու արժեքով թեք գծով (slash) կոդը և կվերադառնա կարճ ձևին, երբ անկյունները նորից դառնան համաչափ կլոր։
Ինչպե՞ս ստանալ կատարյալ շրջան կամ պատիճաձև կոճակ:
Կապակցե՛ք անկյունները, անցե՛ք տոկոսային (%) ռեժիմին և սահմանե՛ք 50%. քառակուսին կվերածվի կատարյալ շրջանի։ Պատիճաձև (pill) կոճակի համար պահպանե՛ք պիքսելները (px) և քաշե՛ք անկյուններից մեկը կոճակի բարձրության կեսից ավելի. կողքերը կմնան լիովին կլորացված ցանկացած լայնության դեպքում։ «Շրջան» նախակարգավորումը թույլ է տալիս սա կարգավորել ընդամենը մեկ կտտոցով։
Արդյո՞ք իմ տվյալները պահպանվում են սերվերում:
Ոչ։ Յուրաքանչյուր անկյուն գծվում է անմիջապես Ձեր բրաուզերում։ Ձեր սահմանած տվյալներից կամ կոդից ոչինչ չի վերբեռնվում BroBroGo սերվերներին։