⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

CSS Pill / Stadium Shape Generator

Vizualno oblikujte polmer obrobe CSS: štirje neodvisni kotni drsniki v slikovnih pikah ali odstotkih, bližnjica za povezavo vseh vogalov za takojšnje kroge in pilule ter organski način madežev z naključnimi oblikami.

12px
12px
12px
12px
Obdelava ... 0%

Rezultat

Ta stran odpre generator polmera obrobe z vsemi štirimi vogali, ki so povezani in potisnjeni na zelo velik radij: 999 slikovnih pik. Na tipičnem pravokotniku velikosti gumba tako velik radij brskalnik obreže na natančno polovico višine škatle, kar ustvari popolnoma zaobljeno obliko tabletke ali stadiona namesto kvadrata z rahlo zaobljenimi vogali.

To je razlog, zakaj gumbi tabletke ne potrebujejo natančne vrednosti polmera, prilagojene višini posameznega gumba – vsako število, ki je udobno večje od polovice višine, daje enak odrezan rezultat, kar je tudi razlog, zakaj je 999px (ali celo 9999px) postalo neformalna okrajšava skupnosti za 'zaokroži to do konca' v CSS.

Spremenite velikost škatle v lastni postavitvi in istih 999 slikovnih pik še naprej proizvaja polno tabletko na kateri koli višini, saj brskalnik vedno samodejno izreže na polovico škatle. Kopirajte CSS, ko je videti pravilen, ali odklopite vogale, da namesto tega zgradite asimetrično kapsulo.

🛡️
Izvedeno v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka popolnoma brez povezave. 100 % varno.

Sprejeti formati in pravila

  • Način vogalov: neodvisni drsniki za polmer zgoraj levo, zgoraj desno, spodaj desno in spodaj levo, od katerih je mogoče preklapljati med px in odstotnimi enotami.
  • Potrditveno polje Link-all-corners, ki poganja vsak kot iz enega drsnika, plus predogled šahovnice na svetlem ali temnem ozadju, tako da ostanejo odrezani vogali vidni.
  • Način blob z gumbom Randomize, ki gradi organske oblike sintakse poševnice z osmimi vrednostmi, prikazane velike in pripravljene za kopiranje kot CSS.

Ključne prednosti

✓ Vsak drsnik takoj posodobi predogled v živo in vrstico CSS, tako da vam nikoli ni treba ugibati, kako dejansko izgleda 12px 40% 8px 24%.
✓ Bližnjica povezava vseh vogalov spremeni en drsnik v popoln krog, pilulo ali vijolico, ne da bi se z roko dotaknili ostalih treh vogalov.
✓ Blob način ustvari organske, naključne oblike s sintakso poševnice z osmimi vrednostmi CSS – videz, ki ga ena sama vrednost polmera obrobe nikoli ne more ustvariti.

Primeri uporabe

  • • Neodvisno določite polmer štirih vogalov kartice – zaokrožite samo vrh spustne plošče ali samo eno stran zavihka.
  • • Povežite vse štiri vogale z enim drsnikom, da v nekaj sekundah ustvarite popoln krog, gumb za tabletke v obliki stadiona ali veverico v slogu iOS-a.
  • • Preklopite v način blob in pritisnite Randomize, dokler se organska oblika ne prilega praznemu prostoru za sliko junaka ali avatarjem, nato kopirajte CSS.