מעברי מדרגות

The CSS Podcast – 021: Gradients

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

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

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

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

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

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

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

.my-element {
    background: linear-gradient(red);
}

אפשר גם להעביר זווית או מילות מפתח שמייצגות זווית. אם בוחרים להשתמש במילות מפתח, צריך לציין כיוון אחרי מילת המפתח 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(), ואפשר להוסיף שכבות של מעברי צבע אחת על גבי השנייה על ידי הפרדה בין כל מעברי הצבע בפסיקים.

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

כדי ליצור שיפוע שמתפשט בצורה מעגלית, אפשר להשתמש בפונקציה 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 שרוצים.

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

לפס ההדרגתי התחום יש נקודת מרכז בתיבה, והוא מתחיל מלמעלה (כברירת מחדל) וממשיך סביב עיגול של 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, וגם להגדיר כמה גווני-מעבר שרוצים, בדיוק כמו בתמונה לרקע. לדוגמה, אפשר לשלב כמה רכיבים מסוג linear-gradient, או שני רכיבים מסוג linear-gradient עם רכיב מסוג gradient רדיאלי.

אינטרפולציה ומרחבי צבעים

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

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

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

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

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

.my-element.increasing {
  background: linear-gradient(in oklch increasing hue, deeppink, yellow);
}

.my-element.decreasing {
  background: linear-gradient(in oklch decreasing hue, deeppink, yellow);
}

בנוסף להתאמה אישית של אינטרפולציה, במרחבי צבעים צילינדריים (HSL,‏ HWB,‏ LCH ו-OKLCH) אפשר להשתמש במילות המפתח shorter (ברירת המחדל) או longer כדי לציין אם קו הדרגיאנט יעבור את הדרך הארוכה סביב גלגל הצבעים או את הדרך הקצרה בין שני הצבעים.

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

משאבים

• מדריך של MDN בנושא הדרגות
• מחולל גוונים מדורגים
• Conic.css – אוסף שימושי של מעברי צבע אליפסואידיים

בדיקת ההבנה

בדיקת הידע שלכם בנושא גרדיאנטים