מעברי צבע
חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 21 מתוך 43.
מעברי צבע ב-CSS מאפשרים לך ליצור מעברים חלקים בין שני צבעים או יותר.
נתחיל במעבר צבע ליניארי פשוט:
/* צור מעבר צבע ליניארי מלמעלה למטה */
.gradient-box {
background: linear-gradient(to bottom, #ff9966, #ff5e62);
}כך נוצר מעבר צבע מצבע כתום (#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>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה שליטה ב-CSS
תרגלו בעצמכם: Web אונליין