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

CSS Pill / Stadion Shape Generator

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 megnyitja a szegélysugár generátort úgy, hogy mind a négy sarka össze van kapcsolva és nagyon nagy sugarú: 999 képpont. Egy tipikus gomb méretű téglalapon egy ekkora sugarat a böngésző pontosan a doboz magasságának felére vág le, ami a teljesen lekerekített tablettát vagy stadionformát eredményezi, nem pedig egy enyhén lekerekített sarkú négyzetet.

Ez az oka annak, hogy a pillérgomboknak nincs szükségük minden egyes gomb magasságára hangolt pontos sugárértékre – a magasság felénél kényelmesen nagyobb számok ugyanazt a kivágott eredményt adják, ezért is vált a 999px (vagy akár a 9999px) az informális közösségi rövidítés a CSS-ben az „egészen körbe”.

Méretezze át a dobozt a saját elrendezésében, és ugyanaz a 999 képpont továbbra is egy teljes pirulát állít elő bármilyen magasságban, mivel a böngésző mindig automatikusan a doboz feléhez vág. Másolja ki a CSS-t, ha jól néz ki, vagy válassza le a sarkokat, hogy aszimmetrikus kapszulát építsen.

🛡️
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.