מחולל גבול מעבר צבע מונפש ב-CSS

גבול קשת מסתובב נראה פשוט עד שמנסים ממש לבנות אחד ב-CSS: הנפשת זווית בתוך ()conic-gradient עם מאפיין מותאם אישית רגיל אינה מניבה תוצאה שימושית, מכיוון שלדפדפן אין מושג שהערך הוא זווית והוא אינו יכול לבצע אינטרפולציה בין 0deg ל-360deg — הוא פשוט קופץ. המחולל הזה משתמש בפתרון האמיתי, ה-CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` אומר לדפדפן בדיוק איזה סוג ערך מחזיק המאפיין המותאם אישית, וזה מה שמאפשר אינטרפולציה חלקה וידידותית ל-GPU בתוך חוק @keyframes.

הטבעת עצמה היא אלמנט מדומה ::before בגודל גדול יותר מהתיבה (מוזז פנימה ברוחב הגבול השלילי) כשברקע שלו מוגדר `conic-gradient(from var(--border-angle), ...)` שחוזר לצבע הראשון כך שלסריקה אין תפר נראה לעין. לאחר מכן מסיכה מבצעת את עיצוב הצורה האמיתי: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` משאירה רק את ההפרש בצורת הטבעת בין תיבת הפדינג לתיבת התוכן, ומסירה את מלבן הגרדיאנט המוצק בכל מקום אחר. התחביר הישן יותר של ספארי `-webkit-mask-composite: xor` מבצע את אותה הפעולה בדיוק ונשלח לצד המאפיין התקני, כך שהאפקט מוצג בצורה עקבית במקום לדמם בשקט במנוע אחד.

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

כל שאר הרכיבים בדף ממפים ישירות לקוד המחולל: מחוון העובי הוא עובי הטבעת וה-inset/padding של האלמנט המדומה, מחוון משך הזמן הוא animation-duration של @keyframes, מתג הכיוון פשוט הופך את הסימן של זווית הסיום של ה-keyframe (+360deg או -360deg), וכל צבע הוא ערך מופרד בפסיק בתוך הקריאה ל-()conic-gradient. הכול רץ בדפדפן שלך בלי תמונות, בלי לולאת אנימציה שמונעת על ידי JavaScript ובלי שירותים חיצוניים — העתק את בלוק ה-CSS והוא ממשיך להסתובב בכל מקום שתדביק אותו.