⭐ 0
🔍
Szöveg Kép PDF és Dokumentumok Hang Zene Elektronika Idő Segédprogramok Validátorok Ezotéria Játékok

Organikus CSS Blob alakgenerátor

Tervezze meg a CSS szegélysugárát vizuálisan: négy független sarokcsúszka képpontban vagy százalékban, egy link-all-corners parancsikon az azonnali körökhöz és pirulákhoz, valamint egy organikus blob mód véletlenszerű alakzatokkal.

12px
12px
12px
12px
Feldolgozás... 0%

Eredmény

Ez az oldal közvetlenül blob módban nyitja meg a határsugár generátort, már betöltött organikus alakzattal: nincsenek szögletes sarkok, nincs tökéletes kör, csak egy puha, szabálytalan körvonal, amely kizárólag CSS-ből épül fel. Bármikor nyomja meg a Randomize gombot egy új változatért.

A trükk minden CSS-blob mögött a nyolcértékű perjel szintaxis: a border-radius két négy százalékos készletet fogad el, amelyeket perjel választ el, az első halmaz a vízszintes sugarakat, a második pedig a függőlegeseket görbíti. A két halmaz nem illeszkedése pontosan az, ami egy sima lekerekített téglalap szimmetriáját szerves körvonalakra töri.

Az ehhez hasonló foltok kitöltik a hősképek, avatárok és illusztrációk mögötti üres teret számtalan modern nyitóoldalon, éppen azért, mert nincs szükség könyvtárra vagy SVG-exportra – ez négysoros CSS. Másolja az aktuális alakzatot, vagy folytassa a véletlenszerűsítést, amíg az egyik megfelelőnek nem érzi az elrendezést.

🛡️
Böngészőben futtatva

A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.

Elfogadott formátumok és szabályok

  • Sarok mód: független bal felső, jobb felső, jobb alsó és bal alsó sugárcsúszkák, mindegyik átkapcsolható a px és százalék mértékegységek között.
  • Minden sarkot összekapcsoló jelölőnégyzet, amely minden sarkot egyetlen csúszkával mozgat, valamint egy sakktábla-előnézet világos vagy sötét háttéren, így a levágott sarkok láthatóak maradnak.
  • Blob mód egy Véletlenszerű gombbal, amely szerves nyolcértékű perjel szintaxis alakzatokat hoz létre, nagy méretben és készen áll a másolásra CSS-ként.

Főbb előnyök

✓ Minden csúszka azonnal frissíti az élő előnézetet és a CSS-sort, így soha nem kell kitalálnia, hogyan is néz ki a 12px 40% 8px 24% valójában.
✓ A link-all-corners parancsikon az egyik csúszkát tökéletes körré, pirulává vagy gömbölyűvé alakítja anélkül, hogy a másik három sarkot kézzel érintené.
✓ A Blob mód organikus, véletlenszerű alakzatokat hoz létre a CSS nyolcértékű perjel szintaxisával – olyan pillantást, amelyet egyetlen szegélysugár érték soha nem képes létrehozni.

Felhasználási területek

  • • Tárcsázza be a kártya négy saroksugarát egymástól függetlenül – csak a legördülő panel tetejét kerekítse le, vagy egy fülnek csak az egyik oldalát.
  • • Kapcsolja össze mind a négy sarkot egy csúszkával, hogy másodpercek alatt tökéletes kört, stadion alakú tablettagombot vagy iOS-stílusú gömbölyűt építsen.
  • • Váltson blob módba, és nyomja meg a Randomize gombot, amíg egy szerves alakzat nem illeszkedik a hőskép vagy avatar mögötti üres helyre, majd másolja a CSS-t.