CSS

צבעים ורקעים

ערכי צבע ב-CSS

שם צבע (Color Name)

CSS תומכת ב-140+ שמות צבעים באנגלית:

p {
    color: red;
    background-color: lightblue;
}

צבעים נפוצים: red, blue, green, yellow, orange, purple, pink, black, white, gray

Hexadecimal (הקסדצימלי)

קוד בן 6 תווים (או 3 מקוצר):

p {
    color: #ff0000;      /* אדום מלא */
    color: #f00;         /* קיצור לאדום */
    color: #336699;      /* כחול-אפור */
    color: #369;         /* קיצור */
}

מבנה: #RRGGBB (Red, Green, Blue) - כל זוג: 00-FF (0-255) - #000000 = שחור - #ffffff = לבן

RGB / RGBA

ערכים מ-0 עד 255:

p {
    /* RGB - אדום, ירוק, כחול */
    color: rgb(255, 0, 0);       /* אדום */
    color: rgb(0, 128, 255);     /* כחול בהיר */

    /* RGBA - עם שקיפות (alpha) */
    color: rgba(0, 0, 0, 0.5);   /* שחור 50% שקוף */
    color: rgba(255, 255, 255, 0.8); /* לבן 80% */
}

Alpha: 0 = שקוף לחלוטין, 1 = אטום לחלוטין

HSL / HSLA

Hue (גוון), Saturation (רוויה), Lightness (בהירות):

p {
    /* HSL */
    color: hsl(0, 100%, 50%);    /* אדום */
    color: hsl(120, 100%, 50%);  /* ירוק */
    color: hsl(240, 100%, 50%);  /* כחול */

    /* HSLA - עם שקיפות */
    color: hsla(200, 80%, 50%, 0.7);
}

Hue: 0-360 (גלגל צבעים) - 0/360 = אדום - 120 = ירוק - 240 = כחול

תכונות רקע

background-color

.box {
    background-color: #f5f5f5;
    background-color: rgba(0, 0, 0, 0.1);
}

background-image

.box {
    background-image: url('image.jpg');
    background-image: url('../images/bg.png');
}

background-repeat

.box {
    background-repeat: repeat;      /* ברירת מחדל */
    background-repeat: no-repeat;   /* פעם אחת */
    background-repeat: repeat-x;    /* רק אופקית */
    background-repeat: repeat-y;    /* רק אנכית */
}

background-position

.box {
    background-position: center;
    background-position: top right;
    background-position: 50% 50%;
    background-position: 20px 30px;
}

background-size

.box {
    background-size: auto;          /* גודל מקורי */
    background-size: cover;         /* מכסה הכל (חותך) */
    background-size: contain;       /* מכיל הכל (לא חותך) */
    background-size: 100px 200px;   /* רוחב, גובה */
    background-size: 50% auto;
}

background-attachment

.box {
    background-attachment: scroll;  /* גולל עם הדף */
    background-attachment: fixed;   /* קבוע במקום */
}

קיצור (Shorthand)

.box {
    /* color image repeat position/size attachment */
    background: #f5f5f5 url('bg.jpg') no-repeat center/cover fixed;
}

Gradients (מעברי צבע)

Linear Gradient

.box {
    /* כיוון ברירת מחדל - מלמעלה למטה */
    background: linear-gradient(red, blue);

    /* עם כיוון */
    background: linear-gradient(to right, red, blue);
    background: linear-gradient(to bottom right, red, blue);
    background: linear-gradient(45deg, red, blue);

    /* מספר צבעים */
    background: linear-gradient(to right, red, yellow, green, blue);

    /* עם עצירות */
    background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

Radial Gradient

.box {
    /* מעגלי מהמרכז */
    background: radial-gradient(red, blue);

    /* צורה */
    background: radial-gradient(circle, red, blue);
    background: radial-gradient(ellipse, red, blue);

    /* מיקום */
    background: radial-gradient(circle at top left, red, blue);
}

Conic Gradient

.box {
    background: conic-gradient(red, yellow, green, blue, red);

    /* טוב לגרפי עוגה */
    background: conic-gradient(
        red 0deg 90deg,
        green 90deg 180deg,
        blue 180deg 270deg,
        yellow 270deg 360deg
    );
}

צללים

box-shadow

צל לקופסה:

.box {
    /* x-offset y-offset blur color */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

    /* עם spread */
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);

    /* צל פנימי */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

    /* מספר צללים */
    box-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.2),
        -2px -2px 5px rgba(255, 255, 255, 0.5);
}

text-shadow

צל לטקסט:

.title {
    /* x-offset y-offset blur color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    /* אפקט זוהר */
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ff00;
}

Opacity (שקיפות)

.box {
    opacity: 1;    /* אטום לחלוטין */
    opacity: 0.5;  /* 50% שקוף */
    opacity: 0;    /* שקוף לחלוטין */
}

⚠️ הבדל: opacity משפיע על כל האלמנט כולל הילדים, rgba משפיע רק על הצבע הספציפי.

דוגמה מעשית

/* כרטיס עם גרדיאנט וצל */
.card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 30px;
    color: white;
}

/* כפתור עם אפקט hover */
.button {
    background: linear-gradient(to bottom, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 12px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.button:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

סיכום

הבא: טקסט וגופנים ➡️