מעברי מדרגות

הפודקאסט של שירות ה-CSS – 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);
}

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

משאבים

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

בדיקת ההבנה

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