פרק 4: צבעים וגבולות
בפרק זה נלמד על:
- שימוש בצבעים ב-CSS
- הגדרת גבולות (Borders)
- שימוש ב-gradient
שימוש בצבעים ב-CSS
צבעים ב-CSS ניתן להגדיר בעזרת שמות צבעים, קודים HEX, RGB ו-HSL. לדוגמה:
/* צבעים בעזרת שמות צבעים */
body {
color: black;
background-color: white;
}
/* צבעים בעזרת קודים HEX */
.header {
background-color: #ff5733;
}
/* צבעים בעזרת RGB */
.highlight {
color: rgb(255, 215, 0);
}
/* צבעים בעזרת HSL */
.shadow {
color: hsl(210, 100%, 50%);
}
הגדרת גבולות (Borders)
גבולות ניתן להוסיף ולהגדיר עם המאפיינים border
, border-width
, border-style
, ו-border-color
. דוגמה להגדלת גבולות:
.box {
border: 2px solid #333;
border-radius: 10px;
padding: 10px;
}
.dashed-border {
border: 1px dashed #666;
}
שימוש ב-gradient
Gradient משמש למעבר צבעים חלק בתגי CSS. ניתן להשתמש ב-gradient ליצירת רקעים עם צבעים משתנים. דוגמה לשימוש ב-gradient:
.gradient-background {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.radial-gradient {
background: radial-gradient(circle, #ff7e5f, #feb47b);
}