מחולל CSS Squircle - ריבוע מעוגל
עצב את רדיוס הגבול של CSS בצורה ויזואלית: ארבעה מחוונים פינתיים עצמאיים בפיקסלים או באחוזים, קיצור דרך קישור לכל הפינות למעגלים מיידיים וכדורים, בתוספת מצב כתם אורגני עם צורות אקראיות.
תוצאה
דף זה פותח את מחולל רדיוס הגבול כאשר כל ארבע הפינות מקושרות ב-30%, עיגול מתון שיושב בין ריבוע חד לעיגול שלם. זה לא סקוורל מתמטי אמיתי (סופראליפסה), אבל זה הכי קרוב שמאפיין CSS בודד יכול להגיע, וזה הערך שרוב מערכות העיצוב מגיעות אליו כשהן רוצות את המראה הזה.
השם בא מאייקוני האפליקציה המעוגלים בריבוע שפופולריים על ידי iOS: מספיק עיקול בכל פינה כדי להרגיש רך וידידותי, אבל אף פעם לא עד כדי כך שהצורה תיקרא עגולה. אריחי סמלים, תמונות ממוזערות של כרטיסים ומסגרות אווטאר מודרניות, כולם נשענים על רדיוסים באותו טווח גס בדיוק מהסיבה הזו.
דחף את המחוון המקושר כלפי מעלה לקבלת תחושה רכה ועגולה יותר או כלפי מטה לקבלת תחושה חדה ומרובעת יותר - קו ה-CSS מתעדכן עם כל שינוי, מוכן להעתקה ברגע שהעקומה מרגישה נכונה עבור הסמל או הכרטיס שלך.