Organiczny generator kształtów blobów CSS
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.
Wynik
Ta strona otwiera generator promieni obramowania bezpośrednio w trybie blob z już załadowanym organicznym kształtem: bez kwadratowych rogów, bez idealnego koła, tylko miękki, nieregularny kontur zbudowany wyłącznie z CSS. W dowolnym momencie naciśnij opcję Randomizuj, aby uzyskać nową odmianę.
Sztuką kryjącą się za każdym obiektem blob CSS jest ośmiowartościowa składnia z ukośnikiem: border-radius akceptuje dwa zestawy czterech wartości procentowych oddzielonych ukośnikiem, pierwszy zestaw zakrzywiający promienie poziome, a drugi pionowe. Niedopasowanie tych dwóch zestawów jest dokładnie tym, co łamie symetrię zwykłego zaokrąglonego prostokąta w organiczny kontur.
Takie plamy wypełniają pustą przestrzeń za obrazami bohaterów, awatarami i ilustracjami na niezliczonych nowoczesnych stronach docelowych właśnie dlatego, że nie jest potrzebna żadna biblioteka ani eksport SVG — to cztery linie CSS. Skopiuj bieżący kształt lub kontynuuj losowanie, aż będzie odpowiedni dla Twojego układu.