⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

Border-radius'i generaator

Kujunda CSS border-radius visuaalselt: neli sõltumatut nurga liugurit pikslites või protsentides, kõigi nurkade sidumise otsetee koheselt ringide ja pillide loomiseks ning orgaaniline blobi-režiim juhuslike kujudega.

🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.

12px
12px
12px
12px
Töötlen... 0%

Tulemus

Border-radius'i deklaratsioon võib vastu võtta kuni neli sõltumatut nurga väärtust pluss valikulise kaheksa väärtusega kaldkriipsu-süntaksi orgaaniliste kõverate jaoks — rohkem liikuvaid osi, kui enamik inimesi arvab, kuni neil on vaja midagi enamat kui lihtsat ümardatud kaarti. See generaator toob kõik need osad ekraanile: neli nurgaliugurit koos oma px- või protsendiühikuga, kõigi nurkade sidumise otsetee sümmeetriliste kujundite jaoks ja blobi-režiim kujundite jaoks, mida ükski üksik raadiuse väärtus ei suuda väljendada.

Nurkade režiim katab kujundid, mida inimesed tegelikult kasutavad: seo kõik nurgad ühe liuguri külge täiuslike ringide, pillide ja squircle'ite saamiseks või lahuta need, et ümardada ainult rippmenüü paneeli ülaosa või ainult kaardi ühte külge. Ruuduline eelvaade kujundi taga, mida saab lülitada heleda ja tumeda tausta vahel, teeb ilmselgeks, millised nurgad millise raadiuse juures täpselt ära lõigatakse — sama visuaalne nipp, mida kasutavad selle saidi failitööriistad läbipaistvuse näitamiseks.

Blobi-režiim on teine pool: CSS-i kaheksa väärtusega kaldkriipsu-süntaks võimaldab iga nurga horisontaalsetel ja vertikaalsetel raadiustel erineda, mis muudabki ümardatud ristküliku orgaaniliseks, ebakorrapäraseks piirjooneks. Vajuta juhuslikustamise nuppu igal ajal uue kujundi saamiseks ja kopeeri selle taga olev täpne CSS — ei mingit SVG-eksporti ega välist teeki. Eelseadistatud lehed katavad päringud, mida inimesed tegelikult otsingukasti trükivad: täiuslik ring, staadionikujuline pillinupp, iOS-i stiilis squircl ja valmis orgaaniline blob.

Nagu kõik selle saidi tööriistad, töötab see täielikult sinu brauseris: üleslaadimist pole, kontot pole vaja ja generaator jätkab töötamist võrguühenduseta, kui leht on korra laaditud.

Meeldib see tööriist? Arvad, et see toode on kasulik? Näed selles potentsiaali ja soovid seda toetada?

🛡️
Käivitatakse brauseris

Sinu failid ja sisestused ei lahku sellest seadmest. Töötlus toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud formaadid ja reeglid

  • Nurkade režiim: sõltumatud ülemise vasaku, ülemise parema, alumise parema ja alumise vasaku nurga liugurid, millest igaühte saab lülitada pikslite ja protsentide vahel.
  • Kõigi nurkade sidumise märkeruut, mis juhib kõiki nurki ühe liuguriga, ning ruuduline eelvaade heledal või tumedal taustal, nii et kärbitud nurgad jääksid alati nähtavaks.
  • Blobi-režiim koos juhuslikustamise nupuga, mis loob orgaanilisi kaheksa väärtusega kaldkriipsu-süntaksiga kujundeid, kuvatuna suurelt ja CSS-ina kopeerimiseks valmis.

Peamised eelised

✓ Iga liuguri liigutamine uuendab eelvaadet ja CSS-i rida hetkega, nii et sa ei pea kunagi arvama, kuidas 12px 40% 8px 24% tegelikult välja näeb.
✓ Kõigi nurkade sidumise otsetee muudab ühe liuguri abil kujundist täiusliku ringi, pilli või squircli, ilma et peaksid ülejäänud kolme nurka käsitsi seadistama.
✓ Blobi-režiim loob orgaanilisi, juhusliku kujuga vorme CSS-i kaheksa väärtusega kaldkriipsu-süntaksi abil — see on välimus, mida üksainus border-radius'i väärtus kunagi ei saavuta.

Kasutusjuhud

  • • Seadista kaardi neli nurgaraadiust eraldi – ümarda ainult rippmenüü paneeli ülemised nurgad või vahelehe üks külg.
  • • Seo kõik neli nurka ühe liuguriga kokku, et luua sekunditega täiuslik ring, staadionikujuline pill-nupp või iOS-i stiilis hüperring.
  • • Lülitu laikude režiimi ja klõpsa nuppu „Randomiseeri“, kuni kangelaspidi või avatari taga olevasse tühja ruumi tekib orgaaniline kujund, seejärel kopeeri CSS.