⭐ 0
🔍
Tekst Obraz PDF i Dokumenty Audio Muzyka Elektronika Czas Użyteczne programy Walidatory Ezoteryka Gry

Generator pigułek CSS / kształtów stadionów

Wizualnie zaprojektuj promień obramowania CSS: cztery niezależne suwaki narożne w pikselach lub procentach, skrót łączący wszystkie rogi do natychmiastowych okręgów i pigułek, a także tryb organicznego obiektu typu blob z losowymi kształtami.

12px
12px
12px
12px
Przetwarzanie... 0%

Wynik

Ta strona otwiera generator promieni obramowania z połączonymi wszystkimi czterema rogami i przesuniętymi do bardzo dużego promienia: 999 pikseli. Na typowym prostokącie wielkości przycisku tak duży promień jest przycinany przez przeglądarkę do dokładnie połowy wysokości pudełka, co daje w wyniku w pełni zaokrągloną pigułkę lub kształt stadionu, a nie kwadrat z lekko zaokrąglonymi narożnikami.

To dlatego przyciski pigułek nie wymagają dokładnej wartości promienia dostosowanej do wysokości każdego przycisku — każda liczba wygodnie większa niż połowa wysokości daje identyczny obcięty wynik, i dlatego też 999 pikseli (lub nawet 9999 pikseli) stało się nieformalnym skrótem społeczności oznaczającym „zaokrąglić to na całej długości” w CSS.

Zmień rozmiar pudełka według własnego układu, a ta sama wielkość 999 pikseli będzie generować pełną pigułkę na dowolnej wysokości, ponieważ przeglądarka zawsze automatycznie przycina połowę pudełka. Skopiuj kod CSS, gdy będzie wyglądał prawidłowo, lub odłącz rogi, aby zamiast tego zbudować asymetryczną kapsułę.

🛡️
Wykonywane w przeglądarce

Twoje pliki i dane nigdy nie opuszczają tego urządzenia. Przetwarzanie odbywa się całkowicie offline. W 100% bezpieczne.

Zasady i formaty

  • Tryb narożników: niezależne suwaki promienia lewego górnego, prawego górnego, prawego dolnego i lewego dolnego rogu, każdy z możliwością przełączania pomiędzy jednostkami pikseli i procentów.
  • Pole wyboru Łącz wszystkie rogi, które steruje każdym rogiem za pomocą jednego suwaka, a także podgląd szachownicy na jasnym lub ciemnym tle, dzięki czemu obcięte rogi pozostają widoczne.
  • Tryb obiektu typu blob z przyciskiem Losuj, który tworzy organiczne kształty o składni ukośnika o ośmiu wartościach, wyświetlane w dużych rozmiarach i gotowe do skopiowania jako CSS.

Kluczowe korzyści

✓ Każdy suwak natychmiast aktualizuje podgląd na żywo i linię CSS, więc nigdy nie musisz zgadywać, jak faktycznie wygląda 12px 40% 8px 24%.
✓ Skrót łączący wszystkie rogi zamienia jeden suwak w idealne koło, pigułkę lub spiralę bez dotykania ręcznie pozostałych trzech rogów.
✓ Tryb obiektów typu Blob generuje organiczne, losowe kształty przy użyciu składni CSS z ośmioma wartościami ukośnika — wyglądu, którego nie da się uzyskać w przypadku pojedynczej wartości promienia obramowania.

Przypadki użycia

  • • Wybierz niezależnie cztery promienie rogów karty — zaokrąglij tylko górę rozwijanego panelu lub tylko jedną stronę zakładki.
  • • Połącz wszystkie cztery rogi z jednym suwakiem, aby w ciągu kilku sekund zbudować idealny okrąg, przycisk pigułki w kształcie stadionu lub zawiłość w stylu iOS.
  • • Przełącz na tryb obiektu typu blob i naciskaj przycisk Losuj, aż organiczny kształt zmieści się w pustej przestrzeni za obrazem bohatera lub awatarem, a następnie skopiuj kod CSS.