Pag-unawa sa CSS border-radius Property
Ang border-radius ay isang mahalagang katangian sa CSS na nagpapahintulot sa mga web designer at developer na baguhin ang kanto o sulok ng isang HTML element mula sa pagiging matulis patungo sa pagiging bilugan. Sa pamamagitan ng pag-adjust sa roundness ng mga sulok ng isang box, mas nagiging malambot at moderno ang hitsura ng mga interface.
Ang apat na sulok ng isang elemento ay naka-map clockwise o sunod-sunod pakanan:
- Itaas sa kaliwa (top-left)
- Itaas sa kanan (top-right)
- Ibaba sa kanan (bottom-right)
- Ibaba sa kaliwa (bottom-left)
Sa pamamagitan ng Border Radius Generator, maaari mong kontrolin ang bawat sulok nang magkakahiwalay o i-link ang mga ito upang sabay-sabay na magbago ang kanilang sukat gamit ang iisang slider. Ang paunang halaga ng slider ay nakatakda sa 24, na naglalabas ng code na border-radius: 24px;.
Pagkakaiba ng Pixel (px) at Porsyento (%) sa Border Radius
Ang pagpili ng tamang unit ay may malaking epekto sa kung paano tutugon ang hugis ng iyong elemento kapag nagbago ang sukat nito. Nag-aalok ang generator ng pagpipilian sa pagitan ng dalawang pangunahing unit na ito:
- Pixel (px): Sa paggamit ng pixel, ang sulok ay bibilog sa isang nakatakdang sukat anuman ang laki ng mismong box. Kung nagtakda ka ng 20px, ang radius ng kanto ay mananatiling eksaktong 20px kahit lumaki o lumiit ang elemento.
- Porsyento (%): Sa paggamit ng porsyento, ang pagbilog ng sulok ay nakabatay sa kabuuang sukat ng box. Ang horizontal na porsyento ay sumusunod sa lapad (width) ng elemento, habang ang vertical na porsyento naman ay sumusunod sa taas (height) nito. Ito ay lubhang kapaki-pakinabang para sa mga responsive design kung saan nagbabago ang laki ng mga elemento depende sa screen ng user.
Paggawa ng mga Pangunahing Hugis at Pill-Shaped Buttons
Madaling makakamit ang mga karaniwang hugis sa web design sa pamamagitan ng tamang kombinasyon ng mga unit at slider:
Perpektong Bilog
Upang makabuo ng perpektong bilog mula sa isang parisukat na elemento, i-link ang lahat ng sulok, lumipat sa unit na "%", at i-set ang slider sa 50%. Maaari mo ring gamitin ang preset na "Bilog" na awtomatikong nag-aayos ng lahat ng sulok sa 50% sa isang click lamang.
Hugis-Tableta (Pill Shape)
Para sa mga button na hugis-tableta, panatilihin ang unit sa "px" at i-drag ang slider lampas sa kalahati ng kabuuang taas ng button. Sa ganitong paraan, mananatiling ganap na bilugan ang mga gilid nito kahit gaano pa kahaba ang ilagay na teksto o kahit anong lapad ng button ang gamitin.
Advanced na Paghubog Gamit ang Elliptical Mode
Kapag ang elliptical mode ay naka-off, ang bawat sulok ng box ay itinuturing na isang quarter-circle na may iisang radius lamang. Ngunit kapag binuksan ang elliptical mode, nagkakaroon ng magkahiwalay na horizontal at vertical radius ang bawat sulok.
Sa mode na ito, ang bawat sulok ay magkakaroon ng dalawang slider: isa para sa "Pahalang" (horizontal) at isa para sa "Patayo" (vertical). Ang ganitong paraan ay nagbibigay-daan upang makalikha ng mas malalambot, walang simetrya, at mga organic na hugis tulad ng mga "blob" o dahon.
Kapag aktibo ang elliptical mode, isinusulat ng generator ang CSS gamit ang "two-value slash form" (halimbawa: border-radius: 10px / 20px; kung saan ang unang halaga ay para sa pahalang at ang ikalawa ay para sa patayo). Awtomatikong babalik ang generator sa maikling anyo (short form) kapag ang mga sulok ay ginawa mong bilog muli.
Paggamit ng mga Preset sa Disenyo
Upang mapabilis ang iyong trabaho, ang tool ay may kasamang mga nakahandang preset na maaari mong i-click upang agad na mailapat sa preview box:
| Preset | Paglalarawan at Epekto sa Hugis |
|---|---|
| Matulis | Tinatanggal ang anumang bilog sa mga sulok (0px) upang ibalik ang box sa pagiging perpektong parisukat o parihaba. |
| Bilugan | Naglalapat ng katamtamang bilog sa mga sulok para sa karaniwang hitsura ng mga card o button. |
| Bilog | Awtomatikong itinatakda ang lahat ng sulok sa 50% upang gawing bilog ang parisukat. |
| Blob | Gumagamit ng elliptical mode upang lumikha ng isang organic at hindi pantay na hugis na madalas gamitin sa mga modernong background. |
| Dahon | Pinatutulis ang ilang sulok habang pinapabilog ang iba upang makuha ang anyo ng isang dahon. |
Pagproseso at Proteksyon sa Datos
Ang lahat ng pagguhit at pag-compute ng mga sulok ay nagaganap mismo sa iyong web browser. Walang anumang data, sukat, o disenyong inilalagay mo rito ang ina-upload sa BroBroGo. Ito ay lokal na pinoproseso sa iyong device kaya mabilis ang pagpapakita ng preview at pagbuo ng CSS code.
Mga Madalas Itanong (FAQ)
Paano gumagana ang apat na sulok at ang px vs %?
Ang apat na slider ay tumutukoy, clockwise, sa itaas-kaliwa, itaas-kanan, ibaba-kanan, at ibaba-kaliwang sulok. Sa pixel, ang sulok ay bibilog sa nakatakdang sukat; sa porsyento, bibilog ito batay sa sukat ng box — ang horizontal na porsyento ay sumusunod sa lapad at ang vertical na porsyento ay sumusunod sa taas, kaya ang 50% ay nagiging bilog mula sa parisukat.
Ano ang ginagawa ng elliptical mode?
Kapag naka-off, ang bawat sulok ay quarter-circle na may iisang radius. I-on ito at ang bawat sulok ay magkakaroon ng magkahiwalay na horizontal at vertical radius, na siyang paraan para makabuo ng malalambot at organic na hugis "blob". Isusulat ng generator ang two-value slash form para sa iyo at babalik sa maikling anyo kapag naging bilog muli ang mga sulok.
Paano ako gagawa ng perpektong bilog o hugis-tableta?
I-link ang mga sulok, lumipat sa porsyento at i-set sa 50%: ang parisukat ay magiging bilog. Para sa button na mukhang tableta, panatilihin ang mga pixel at i-drag ang sulok lampas sa kalahati ng taas ng button — mananatiling bilugan ang mga gilid sa kahit anong lapad. Ang Bilog preset ay nag-aayos sa unang sitwasyon sa isang click lang.