פרק 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);
            }