מחולל צורת כתמי CSS אורגני
עצב את רדיוס הגבול של CSS בצורה ויזואלית: ארבעה מחוונים פינתיים עצמאיים בפיקסלים או באחוזים, קיצור דרך קישור לכל הפינות למעגלים מיידיים וכדורים, בתוספת מצב כתם אורגני עם צורות אקראיות.
תוצאה
עמוד זה פותח את מחולל הגבול-רדיוס ישירות במצב בלובים עם צורה אורגנית שכבר נטענה: ללא פינות מרובעות, ללא עיגול מושלם, רק קו מתאר רך לא סדיר שנבנה מ-CSS בלבד. הקישו על הזן אקראי בכל עת לקבלת וריאציה חדשה.
הטריק מאחורי כל גוש CSS הוא תחביר הלוכסן של שמונה ערכים: רדיוס הגבול מקבל שתי קבוצות של ארבעה אחוזים מופרדים על ידי לוכסן, הסט הראשון מעקם את הרדיוסים האופקיים והשני את האנכיים. חוסר התאמה בין שני הסטים הוא בדיוק מה ששובר את הסימטריה של מלבן מעוגל רגיל לקו מתאר אורגני.
כתמים כאלה ממלאים את החלל הריק שמאחורי תמונות גיבורים, אווטרים ואיורים באינספור דפי נחיתה מודרניים, בדיוק בגלל שאין צורך לייצוא ספרייה או SVG - מדובר בארבע שורות של CSS. העתק את הצורה הנוכחית, או המשך לעשות אקראי עד שתרגיש נכון עבור הפריסה שלך.