מסגרת עם גרדיאנט

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

יצירת הגרדיאנט

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

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

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

העתיקי אליך רק את הגרדיאנט עצמו, בלי המילים background image. לדוגמה:

linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

הגדרת המסגרת

עכשיו ניתן את הבסיס למסגרת של האלמנט שלנו. נניח שהקלאס שעליו אנחנו רוצות את המסגרת הוא הקלאס element-with-g-border. נוסיף לCSS שלנו את הקוד הבא:

.element-with-g-border{
   border-style: solid;
   border-width: 5px;
   border-image-slice: 1;
   border-image-source: /* כאן שימי את הגרדיאנט מהסעיף הקודם */;
}

הסבר על ההגדרה לצורך שינויים

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

השורה הראשונה – border-style – אומרת מה תהיה הצורה של המסגרת. solid משמעותו מסגרת חלקה. אפשר להגדיר מסגרת מנוקדת, מפוספסת, ועוד, אבל זה לא המקרה שלנו ולכן נעבור הלאה.

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

border-top-width: 5px;

השורה הזו אומרת שיש מסגרת רק מלמעלה, בעובי 5 פיקסלים. בשאר הצדדים יישאר 0 – בלי מסגרת. כמובן שאפשר להגדיר גם 2 שורות ל2 צדדים, וכו'.

השורה border-image-slice אומרת שהמסגרת תופיע בחתיכה אחת. נסי להסיר אותה ולראות את התוצאה היפהפיה 🙂

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

עד כאן לבינתיים

בהצלחה רבה!