Функционисање CSS својства border-radius
Својство border-radius у CSS-у контролише заобљеност углова елемента на веб-страници. Овај алат омогућава прецизно подешавање заобљености кроз графички интерфејс, при чему се промене одмах приказују на визуелном приказу. Почетна вредност клизача износи 24, што генерише код border-radius: 24px;.
Клизачи у алату мапирају се у смеру казаљке на сату, почевши од горњег левог угла. Када су углови повезани, један клизач под називом „Сви углови” контролише цео оквир. Када се углови развежу, на располагању су четири засебна клизача:
- „Горе лево”
- „Горе десно”
- „Доле десно”
- „Доле лево”
Распон вредности на свим клизачима је од 0 до 100.
Разлика између пиксела и процената
Избор мерне јединице директно утиче на то како се заобљеност понаша при промени димензија елемента. Алат нуди избор између две јединице преко селектора под називом „Јединица”:
- Пиксели (px): Угао се заобљује за фиксни износ. Без обзира на ширину или висину елемента, полупречник заобљења остаје константан.
- Проценти (%): Угао се заобљује релативно у односу на димензије самог оквира. Хоризонтални проценат прати ширину елемента, док вертикални проценат прати његову висину. Овај приступ је кључан за респонзивни дизајн, где се елементи скупљају и шире у зависности од величине екрана.
Напредни облици уз елиптични режим
Када је опција „Елиптични углови” искључена, сваки угао представља четвртину круга са једним полупречником. Укључивањем ове опције активира се елиптични режим, где сваки угао добија засебне клизаче за смер „Хоризонтално” и „Вертикално”.
Овај режим омогућава креирање асиметричних, меких и органских форми. Када је елиптични режим активан, генератор пише CSS код користећи косу црту (на пример, border-radius: 10px / 20px;) како би раздвојио хоризонталне и вертикалне вредности. Чим углови поново постану правилни, код се аутоматски враћа на краћи облик без косе црте.
Креирање кругова и дугмади у облику пилуле
Помоћу специфичних подешавања вредности, елементи се могу трансформисати у правилне геометријске облике:
- Савршен круг: Да би се квадратни елемент претворио у правилан круг, потребно је активирати опцију „Повежи све углове”, пребацити јединицу на проценат (%) и поставити вредност на 50%.
- Облик пилуле: За креирање дугмета у облику пилуле користе се пиксели (px). Потребно је превући клизач за угао преко половине висине елемента. На овај начин, бочне стране остају потпуно заобљене без обзира на то колико се ширина дугмета мења.
Брза подешавања помоћу шаблона
Алат садржи одељак „Шаблони” са предефинисаним вредностима које омогућавају брзу промену изгледа елемента једним кликом:
- „Оштро”: Поништава сва заобљења и враћа углове на оштре ивице.
- „Заобљено”: Примењује стандардно, умерено заобљење на свим угловима.
- „Круг”: Поставља све углове на вредност од 50%, што тренутно претвара квадрат у круг.
- „Мрља”: Користи елиптични режим за креирање неправилног, органског облика.
- „Лист”: Креира заобљења на дијагоналним угловима, остављајући друге углове оштрим како би се добио изглед листа.
Након што постигнете жељени изглед у пољу за приказ, генерисани код се појављује испод заглавља „CSS”, а можете га копирати кликом на дугме „Копирај CSS”.
Приватност и локална обрада података
Сваки угао се исцртава директно у вашем прегледачу. Ништа што овде подесите не шаље се на BroBroGo. Обрада података и генерисање CSS кода врше се локално на вашем уређају.
Често постављана питања (FAQ)
Како функционишу четири угла и разлика између px и %?
Четири клизача одговарају угловима у смеру казаљке на сату: горе-лево, горе-десно, доле-десно и доле-лево. У пикселима (px) угао се заобљује за фиксни износ; у процентима (%) се заобљује у односу на димензије оквира — хоризонтални проценат прати ширину, а вертикални висину, па тако 50% претвара квадрат у круг.
Чему служи елиптични режим?
Када је ова опција искључена, сваки угао је четвртина круга са једним полупречником. Када је укључите, сваки угао добија засебан хоризонтални и вертикални полупречник, што вам омогућава да креирате меке, органске облике попут „мрље” (blob). Генератор аутоматски пише CSS код са косом цртом за две вредности и враћа се на краћи облик чим углови поново постану правилни.
Како да направим савршен круг или облик пилуле?
Повежите углове, пребаците јединицу на проценте (%) и поставите вредност на 50%: квадрат ће постати савршен круг. За дугме у облику пилуле, задржите пикселе (px) и превуците угао преко половине висине дугмета — странице ће остати потпуно заобљене при било којој ширини. Предефинисано подешавање „Круг” подешава први случај у једном клику.