კუთხეების მომრგვალების (Border Radius) გენერატორი

CSS border-radius თვისების საფუძვლები

CSS-ში border-radius თვისება განსაზღვრავს ელემენტის გარე საზღვრის კუთხეების მომრგვალების რადიუსს. ეს ხელსაწყო საშუალებას გაძლევთ ვიზუალურად მართოთ ყუთის თითოეული კუთხის სიმრგვალე და მომენტალურად მიიღოთ შესაბამისი კოდი თქვენი პროექტისთვის.

გენერატორში კუთხეების მართვა ხორციელდება ოთხი ძირითადი მიმართულებით, რომლებიც საათის ისრის მიმართულებით ნაწილდება:

• ზედა მარცხენა (border-top-left-radius)
• ზედა მარჯვენა (border-top-right-radius)
• ქვედა მარჯვენა (border-bottom-right-radius)
• ქვედა მარცხენა (border-bottom-left-radius)

საწყის ეტაპზე სლაიდერის მნიშვნელობა დაყენებულია 24-ზე, რაც იძლევა შედეგს border-radius: 24px;. ხელსაწყოს მეშვეობით შეგიძლიათ მართოთ კუთხეები როგორც ერთობლივად, ისე ინდივიდუალურად.

პიქსელები და პროცენტები: განსხვავება ერთეულებში

კუთხეების მომრგვალებისას ერთეულის შერჩევას ფუნდამენტური მნიშვნელობა აქვს, რადგან ისინი სხვადასხვანაირად რეაგირებენ ელემენტის ზომის ცვლილებაზე:

1. პიქსელები (px): ამ ერთეულის არჩევისას კუთხე მრგვალდება ფიქსირებული სიდიდით. მიუხედავად იმისა, თუ რამდენად დიდი ან პატარაა თავად ელემენტი, მომრგვალების რადიუსი ყოველთვის უცვლელი რჩება.
2. პროცენტები (%): პროცენტული მაჩვენებელი გამოითვლება კონტეინერის ზომის პროპორციულად. ჰორიზონტალური პროცენტი მიჰყვება ელემენტის სიგანეს, ხოლო ვერტიკალური — მის სიმაღლეს. ეს მიდგომა აქტიურად გამოიყენება ადაპტური დიზაინის შესაქმნელად.

მარტივი ფორმები: იდეალური წრე და აბისებრი ღილაკი

მარტივი გეომეტრიული ფორმების მისაღებად შეგიძლიათ გამოიყენოთ კონკრეტული წესები და ერთეულების კომბინაციები:

• იდეალური წრე: კვადრატული ელემენტისგან სრულყოფილი წრის მისაღებად საჭიროა ჩართოთ ყველა კუთხის დაკავშირება, გადართოთ ერთეული პროცენტზე (%) და დააყენოთ მნიშვნელობა 50%-ზე. ამ დროს ოთხივე კუთხე თანაბრად იკუმშება ცენტრისკენ.
• აბისებრი ღილაკი (Pill-shaped button): ამ ფორმის მისაღებად უნდა შეინარჩუნოთ პიქსელების (px) ერთეული და გადაათრიოთ სლაიდერი ელემენტის სიმაღლის ნახევარზე მეტ მნიშვნელობაზე. ამ შემთხვევაში, ელემენტის სიგანის მიუხედავად, გვერდები ყოველთვის სრულად მომრგვალებული დარჩება.

რთული ფორმები ელიფსური რეჟიმით

როდესაც ელიფსური რეჟიმი გამორთულია, თითოეული კუთხე წარმოადგენს წრის მეოთხედს ერთი კონკრეტული რადიუსით. თუმცა, უფრო რბილი და ორგანული ფორმების შესაქმნელად გამოიყენება ელიფსური კუთხეების რეჟიმი.

ელიფსურ რეჟიმში თითოეულ კუთხეს ენიჭება ორი დამოუკიდებელი პარამეტრი:

• ჰორიზონტალური რადიუსი
• ვერტიკალური რადიუსი

ეს საშუალებას გაძლევთ შექმნათ ასიმეტრიული, ბუნებრივი ფორმები (ე.წ. „ბლობები“). კოდის დონეზე, გენერატორი ამ დროს ავტომატურად წერს ორმნიშვნელობიან ფორმატს დახრილი ხაზის (slash) გამოყენებით (მაგალითად, border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;). როგორც კი კუთხეები კვლავ თანაბრად მომრგვალდება და ელიფსური რეჟიმი გამოირთვება, კოდი უბრუნდება სტანდარტულ მოკლე ფორმას.

ინტერფეისის ელემენტები და მართვა

ხელსაწყოს მართვის პანელი შედგება შემდეგი კომპონენტებისგან:

• სლაიდერები: მნიშვნელობების შესაცვლელად 0-დან 100-მდე დიაპაზონში. როდესაც ჩართულია „ყველა კუთხის დაკავშირება“, აქტიურია მხოლოდ ერთი სლაიდერი — „ყველა კუთხე“. კავშირის გაწყვეტისას ხელმისაწვდომი ხდება ოთხი სლაიდერი: „ზედა მარცხენა“, „ზედა მარჯვენა“, „ქვედა მარჯვენა“ და „ქვედა მარცხენა“. ელიფსურ რეჟიმში თითოეულ მათგანს ემატება „ჰორიზონტალური“ და „ვერტიკალური“ მართვის სლაიდერები.
• ერთეული: გადამრთველი „px“ და „%“ მნიშვნელობებს შორის.
• პრესეტები: მზა ფორმების სწრაფი ღილაკები:
  • „მკვეთრი“
  • „მომრგვალებული“
  • „წრე“ — ავტომატურად აყენებს ყველა კუთხეს 50%-ზე
  • „ბლობი“ (Blob)
  • „ფოთოლი“ (Leaf)
• ვიზუალური პრევიუ: რეალურ დროში აჩვენებს ყუთის ფორმის ცვლილებას.
• CSS კოდის ბლოკი: განთავსებულია სათაურის „CSS“ ქვეშ, სადაც გენერირდება მზა კოდი. მისი კოპირება შესაძლებელია ღილაკით „CSS-ის კოპირება“.

კონფიდენციალურობა და მონაცემთა დამუშავება

ამ ხელსაწყოს გამოყენებისას თქვენი მონაცემები სრულად დაცულია. ყოველი კუთხე იხატება პირდაპირ თქვენს ბრაუზერში. თქვენ მიერ მითითებული მონაცემები BroBroGo-ზე არ იტვირთება, რაც გამორიცხავს სერვერზე ინფორმაციის გარეშე შენახვას.

ხშირად დასმული კითხვები (FAQ)

როგორ მუშაობს ოთხი კუთხე და px vs %?

ოთხი სლაიდერი საათის ისრის მიმართულებით შეესაბამება ზედა მარცხენა, ზედა მარჯვენა, ქვედა მარჯვენა და ქვედა მარცხენა კუთხეებს. პიქსელებში კუთხე მრგვალდება ფიქსირებული სიდიდით, ხოლო პროცენტებში — კონტეინერის ზომის პროპორციულად (ჰორიზონტალური პროცენტი მიჰყვება სიგანეს, ვერტიკალური კი სიმაღლეს, ამიტომ 50% კვადრატს წრედ აქცევს).

რას აკეთებს ელიფსური რეჟიმი?

გამორთულ მდგომარეობაში ყოველი კუთხე არის წრის მეოთხედი ერთი რადიუსით. ჩართვისას თითოეულ კუთხეს ეძლევა ცალკეული ჰორიზონტალური და ვერტიკალური რადიუსი, რაც საშუალებას გაძლევთ შექმნათ რბილი, ორგანული „ბლობის“ (blob) ფორმები. გენერატორი თავად წერს ორმნიშვნელობიან დახრილი ხაზის ფორმატს და უბრუნდება მოკლე ფორმას, როგორც კი კუთხეები კვლავ თანაბრად მომრგვალდება.

როგორ შევქმნა იდეალური წრე ან აბისებრი ფორმა?

დააკავშირეთ კუთხეები, გადართეთ პროცენტებზე (%) და მიუთითეთ 50%: კვადრატი წრედ იქცევა. აბისებრი ღილაკისთვის კი დატოვეთ პიქსელები (px) და გადაათრიეთ კუთხე ღილაკის სიმაღლის ნახევარზე მეტად — გვერდები სრულად მომრგვალებული დარჩება ნებისმიერი სიგანის შემთხვევაში. „წრე“ პრესეტი პირველ ვარიანტს ერთი დაწკაპუნებით აყენებს.