מעברי מדרגות

The CSS Podcast – 021: Gradients

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

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

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

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

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

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

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

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

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

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

.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 רדיאלי.

משאבים

בדיקת ההבנה

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

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

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

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

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