0

מחולל רדיוס גבול

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

12px
12px
12px
12px
מעבד... 0%

תוצאה

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

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

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

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