דף זה תורגם על ידי Cloud Translation API.

שימוש בהדרגה של חרוטים ליצירת גבול מגניב

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

ה-CodePen הזה נוצר על ידי אדם Argyle, שותף במקור באמצעות זה ציוץ ב-Twitter, מראה איך להשתמש ב-conic הדרגתי עד יוצרים גבול.

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

Terry Mun באופן יצירתי פוצל המקודד של Adam ויצר את הקוד הזה CodePen. מעבירים את העכבר מעל ותראו את השינוי ההדרגתי, הודות לקצת JavaScript עדכון מאפיין CSS מותאם אישית ששומר את זווית הסיבוב.

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

`border-image-source`

תמיכה בדפדפן

מקור

הדרגתי של חרוט

תמיכה בדפדפן

מקור