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

Orgaaniline CSS Blob Shape Generator

Kujundage CSS-i piiriraadiust visuaalselt: neli sõltumatut nurgaliugurit pikslites või protsentides, link-all-corners otsetee vahetute ringide ja pillide jaoks ning orgaaniline blob-režiim juhuslike kujunditega.

12px
12px
12px
12px
Töötlemine... 0%

Tulemus

See leht avab piiride raadiuse generaatori otse blob-režiimis juba laaditud orgaanilise kujuga: pole ruudunurki ega täiuslikku ringi, vaid pehme ebakorrapärane piirjoon, mis on ehitatud ainult CSS-ist. Uue variatsiooni saamiseks klõpsake igal ajal nuppu Juhuslik.

Iga CSS-i blobi nipp on kaheksa väärtusega kaldkriipsu süntaks: border-radius aktsepteerib kahte neljast protsendist koosnevat komplekti, mis on eraldatud kaldkriipsuga, millest esimene kõverdab horisontaalseid raadiusi ja teine vertikaalseid. Kahe komplekti mittevastavus muudab tavalise ümara ristküliku sümmeetria orgaaniliseks kontuuriks.

Sellised plekid täidavad tühja ruumi kangelaste piltide, avataride ja illustratsioonide taga lugematutel kaasaegsetel sihtlehtedel just seetõttu, et pole vaja teeki ega SVG-eksporti – see on neli rida CSS-i. Kopeerige praegune kuju või jätkake randomiseerimist, kuni see tundub teie paigutuse jaoks õige.

🛡️
Teostatud brauseris

Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud vormingud ja reeglid

  • Nurkade režiim: sõltumatud üleval-vasak-, üleval-paremal-, all-paremal- ja all-vasakpoolsed raadiuse liugurid, millest igaüks on vahetatav piksli ja protsendi ühikute vahel.
  • Link-all-corners märkeruut, mis juhib iga nurga ühest liugurist, pluss malelaua eelvaade heledal või tumedal taustal, nii et kärbitud nurgad jäävad nähtavaks.
  • Blob-režiim nupuga Juhuslikuks muutmine, mis loob orgaanilisi kaheksa väärtusega kaldkriipsu süntaksi kujundeid, mis on kuvatud suurena ja valmis kopeerimiseks CSS-ina.

Peamised eelised

✓ Iga liugur värskendab otseülekannet ja CSS-i rida koheselt, nii et te ei pea kunagi arvama, milline 12px 40% 8px 24% tegelikult välja näeb.
✓ Link-all-corners otsetee muudab ühe liuguri täiuslikuks ringiks, pilliks või squirkliks ilma ülejäänud kolme nurka käsitsi puudutamata.
✓ Blob-režiim genereerib orgaanilisi, juhuslikult valitud kujundeid CSS-i kaheksa väärtusega kaldkriipsu süntaksiga – välimus, mida üks piiriraadiuse väärtus ei suuda kunagi luua.

Kasutusjuhtumid

  • • Sisestage kaardi neli nurgaraadiust sõltumatult – ümardage ainult rippmenüü paneeli ülaosa või ainult vahelehe üks külg.
  • • Ühendage kõik neli nurka ühe liuguriga, et luua sekunditega täiuslik ring, staadionikujuline pillinupp või iOS-i stiilis squirling.
  • • Lülitage blob-režiimi ja vajutage nuppu Juhuslik, kuni kangelase kujutise või avatari taga olevale tühjale kohale mahub orgaaniline kujund, seejärel kopeerige CSS.