Generator Border Radius

Kształtuj rogi z większą kontrolą

Promień zaokrąglenia to jeden z najszybszych sposobów na zmianę charakteru interfejsu. Małe wartości dają wrażenie precyzji i uporządkowania, średnie sprawiają, że karty i przyciski wyglądają przyjaźniej, a duże pozwalają tworzyć pigułki, organiczne kształty lub zabawne panele ilustracyjne. Ten generator border radius udostępnia pełną składnię CSS, dzięki czemu zaprojektujesz zarówno zwykłe zaokrąglone prostokąty, jak i eliptyczne rogi bez ręcznego zapisywania notacji z ukośnikiem.

Każdy róg ma promień poziomy i pionowy. Gdy wartości są takie same, róg jest kołowy, a CSS wygląda jak znana deklaracja border-radius z czterema wartościami. Gdy X i Y się różnią, róg staje się eliptyczny, a CSS zapisuje najpierw wartości poziome, potem ukośnik, a na końcu wartości pionowe. Podgląd na żywo dobrze pokazuje tę zależność, ponieważ kształt zmienia się natychmiast po przesunięciu każdego suwaka.

Kiedy przydają się promienie eliptyczne

Eliptyczne rogi są przydatne, gdy chcesz uzyskać coś bardziej organicznego niż zwykła karta, a jednocześnie potrzebujesz lekkiego i responsywnego CSS. Mogą sprawić, że awatary, wyróżnione bloki, kształty kuponów, maski obrazów i panele dekoracyjne wyglądają mniej banalnie. Asymetryczne rogi pomagają też nadać wizualny kierunek, kierując uwagę na nagłówek lub wezwanie do działania. Użyj presetu blob jako punktu wyjścia, a następnie zmniejsz najsilniejsze wartości, jeśli kształt zaczyna odwracać uwagę od treści.

Spójne stosowanie wartości promienia

W produkcyjnych systemach projektowych warto utrzymywać niewielki zestaw standardowych promieni dla codziennych komponentów, a wartości niestandardowych używać tylko tam, gdzie kształt ma wyraźny cel. Przycisk, pole formularza i karta zwykle wyglądają bardziej spójnie, gdy mają powiązane rozmiary rogów. Sekcje dekoracyjne mogą być bardziej wyraziste, ale nadal powinny dobrze wyglądać przy różnych szerokościach. Po skopiowaniu wygenerowanego CSS przetestuj go na rzeczywistym rozmiarze elementu, ponieważ promień, który wygląda równo na karcie podglądu, może być zbyt mocny na małej plakietce lub zbyt subtelny na szerokim panelu hero.