מעברי צבע

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 21 מתוך 43.

מעברי צבע ב-CSS מאפשרים לך ליצור מעברים חלקים בין שני צבעים או יותר.

נתחיל במעבר צבעים ליניארי פשוט:

/* צרו מעבר צבע ליניארי מלמעלה למטה */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

פעולה זו יוצרת מעבר צבעים מכתום (#ff9966) בחלק העליון לצבע אדמדם (#ff5e62) בחלק התחתון.

ציון הכיוון הוא אופציונלי. אם משמיטים אותו, linear-gradient() מתקדם מלמעלה למטה, כמו to bottom:

background: linear-gradient(#ff9966, #ff5e62); /* מלמעלה למטה */

אפשר גם לציין את הכיוון ולהשתמש במספר צבעים, כמו בדוגמה הבאה:

/* צור מעבר צבעים ליניארי משמאל לימין */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

אתגר

קל

צרו כלל CSS עבור מחלקה בשם sunset-gradient שמחילה רקע של מעבר צבע ליניארי. מעבר הצבע צריך:

לעבור מלמעלה למטה
להתחיל בצבע #FFD700 (זהב)
לעבור ל-#FF4500 (אדום-כתום)

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>