מעברי מדרגות

הפודקאסט The CSS – 021: Gradients

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

רקע הדרגתי וסגול כהה עד בהיר עם כותרת, פסקה וקישור.

יכול להיות שבהתחלה תחשבו שתצטרכו לייצא תמונה מכלי העיצוב שלכם כדי לעשות זאת, אבל אתם יכולים להשתמש במקום זאת ב-linear-gradient.

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

מעבר צבעים הדרגתי ליניארי

תמיכה בדפדפן

  • 26
  • 12
  • 16
  • 7

מקור

הפונקציה linear-gradient() יוצרת תמונה בשני צבעים או יותר בהדרגה. הפונקציה מקבלת כמה ארגומנטים, אבל בתצורה הפשוטה ביותר שלה, אפשר להעביר כמה צבעים באופן הזה והם יפוצלו באופן אוטומטי באופן שווה תוך מיזוג שלהם.

.my-element {
    background: linear-gradient(black, white);
}

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

.my-element {
    background: linear-gradient(to right, black, white);
}

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

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

אפשר להוסיף כמה צבעים והפסקות צבעים שתרצו ב-linear-gradient(), ואפשר גם להוסיף שכבות של צבעים הדרגתיים זה מעל זה על ידי הפרדה בין שיפוע בפסיקים.

מעבר צבעים הדרגתי רדיאלי

תמיכה בדפדפן

  • 26
  • 12
  • 16
  • 7

מקור

כדי ליצור הדרגתיות שמקרינה באופן מעגלי, הפונקציה radial-gradient() יכולה לעזור. התבנית הזו דומה לפונקציה linear-gradient(), אבל במקום לציין זווית אפשר לציין מיקום וצורת סיום. אם מציינים רק צבעים, radial-gradient() יבחר באופן אוטומטי את המיקום בתור center ויבחר עיגול או אליפסה, בהתאם לגודל התיבה.

.my-element {
    background: radial-gradient(white, black);
}

המיקום של ההדרגה דומה למיקום background-position באמצעות מילות מפתח ו/או ערכים של מספרים. גודל ההדרגתיות הרדיאלית קובע את גודל צורת הסיום של השיפוע (עיגול או אליפסה), וכברירת מחדל הוא farthest-corner, כלומר הוא צריך להיות תואם בדיוק את הפינה הרחוקה ביותר של התיבה מהמרכז. אפשר גם להשתמש במילות המפתח הבאות:

  • closest-corner תפגע בפינה הקרובה ביותר למרכז ההדרגתיות.
  • closest-side תפגע בצד של התיבה הקרוב ביותר למרכז ההדרגתיות.
  • farthest-side תבצע את ההפך מ-closest-side.

אפשר להוסיף כמה עצירות צבעוניות שרוצים, בדיוק כמו בlinear-gradient. אפשר גם להוסיף כמה radial-gradients שרוצים.

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

תמיכה בדפדפן

  • 69
  • 79
  • 83
  • 12.1

מקור

לשיפוע חרוט יש נקודת מרכז בתיבה, שמתחילה מלמעלה (כברירת מחדל) ומסתובבת בעיגול של 360 מעלות.

.my-element {
    background: conic-gradient(white, black);
}

הפונקציה conic-gradient() מקבלת ארגומנטים של מיקום וזווית.

כברירת מחדל, הזווית היא 0 מעלות שמתחילה למעלה, במרכז. אם מגדירים את הזווית ל-45deg, היא תהיה הפינה הימנית העליונה. הארגומנט angle מקבל כל סוג של ערך זווית, כגון הדרגה הליניארית וההדרגתיות הרדיאליות.

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

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

חזרה ומיקס

לכל סוג של הדרגתי יש גם טיפוס חוזר. אלה הם repeating-linear-gradient(), repeating-radial-gradient() ו-repeating-conic-gradient(). הן דומות לפונקציות שאינן חוזרות ומשתמשות באותם ארגומנטים. ההבדל הוא שאם ניתן לחזור על ההדרגתיות המוגדרת כדי למלא את התיבה, על סמך שני הגדלים של שני הפורמטים, זה מה שקורה.

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

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

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

מקורות מידע

בדיקת ההבנה

בחינת הידע שלכם בנושא צבעים מדורגים

מהו המספר המינימלי של צבעים שנדרש כדי ליצור הדרגתי?

1
כדאי לנסות שוב.
2
הן יכולות להיות באותו צבע ונראות אחידות, אבל כן, יש צורך בשני צבעים לפחות.
3
כדאי לנסות שוב.
4
כדאי לנסות שוב.

האם לרכיבים יכולים להיות כמה צבעים הדרגתיים בתור רקע?

נכון
המאפיין background-image מאפשר להשתמש במספר צבעים הדרגתיים. פשוט צריך להפריד ביניהם באמצעות פסיקים.
לא נכון
אה, אבל הם יכולים!