1.3 צבעים, טיפוגרפיה ורקע הרצאה

צבעים - colors¶

ב-CSS יש כמה דרכים לציין צבעים. כל אחת מתאימה למצב אחר.

שמות צבעים - named colors¶

הדרך הכי פשוטה - לכתוב את שם הצבע באנגלית:

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

p {
    color: darkgray;
}

יש כ-140 שמות צבעים מוגדרים ב-CSS
שמות נפוצים: red, blue, green, yellow, orange, purple, pink, gray, black, white
יש גם גוונים: darkblue, lightgreen, darkgray, lightyellow
טוב לפרוטוטייפים מהירים, אבל לא מדויק מספיק לעיצוב אמיתי

הקסדצימלי - hex¶

ייצוג צבע עם שש ספרות הקסדצימליות (בסיס 16):

h1 {
    color: #ff0000;        /* red */
    background-color: #ffffff; /* white */
}

p {
    color: #333333;        /* dark gray */
}

.highlight {
    background-color: #f1c40f; /* yellow-gold */
}

מתחיל תמיד ב-#
6 ספרות: שתיים לאדום, שתיים לירוק, שתיים לכחול
כל ספרה היא 0-9 או a-f
#000000 הוא שחור (אפס מכל צבע), #ffffff הוא לבן (מקסימום מכל צבע)

קיצור - אם כל זוג ספרות זהה, אפשר לקצר:

.box {
    color: #f00;     /* same as #ff0000 (red) */
    background: #fff; /* same as #ffffff (white) */
    border-color: #333; /* same as #333333 (dark gray) */
}

זה הפורמט הנפוץ ביותר בעיצוב אתרים
כלי עיצוב כמו Figma נותנים צבעים בפורמט הזה

rgb ו-rgba¶

ייצוג עם ערכי אדום, ירוק וכחול (0-255 לכל ערוץ):

h1 {
    color: rgb(255, 0, 0);       /* red */
    background-color: rgb(240, 240, 240); /* light gray */
}

שלושה מספרים מ-0 עד 255
rgb(0, 0, 0) = שחור, rgb(255, 255, 255) = לבן
זה בעצם אותו דבר כמו hex, רק בייצוג עשרוני

rgba מוסיף ערוץ שקיפות (alpha) מ-0 (שקוף לגמרי) עד 1 (אטום):

.overlay {
    background-color: rgba(0, 0, 0, 0.5);    /* black, 50% transparent */
}

.glass {
    background-color: rgba(255, 255, 255, 0.8); /* white, 80% opaque */
}

.subtle-bg {
    background-color: rgba(52, 152, 219, 0.1); /* very light blue tint */
}

rgba שימושי מאוד ליצירת שכבות חצי-שקופות
נפוץ לoverlay-ים, רקעים עדינים, וצלליות

hsl ו-hsla¶

ייצוג עם גוון (hue), רוויה (saturation) ובהירות (lightness):

h1 {
    color: hsl(0, 100%, 50%);    /* red */
    /* hue=0 (red), saturation=100%, lightness=50% */
}

.muted {
    color: hsl(210, 30%, 60%);   /* muted blue */
}

hue (גוון): מספר מ-0 עד 360 על גלגל הצבעים
0/360 = אדום
60 = צהוב
120 = ירוק
180 = ציאן (תכלת)
240 = כחול
300 = מגנטה (סגול-ורוד)
saturation (רוויה): 0% = אפור, 100% = צבע מלא
lightness (בהירות): 0% = שחור, 50% = צבע רגיל, 100% = לבן

/* creating color variations easily with hsl */
.btn-primary {
    background-color: hsl(210, 80%, 50%);    /* base blue */
}

.btn-primary-light {
    background-color: hsl(210, 80%, 70%);    /* lighter blue - just change lightness */
}

.btn-primary-dark {
    background-color: hsl(210, 80%, 30%);    /* darker blue */
}

.btn-primary-muted {
    background-color: hsl(210, 30%, 50%);    /* desaturated blue */
}

היתרון הגדול של hsl - קל ליצור וריאציות של צבע
רוצים גוון בהיר יותר? מעלים את ה-lightness
רוצים צבע יותר עדין? מורידים את ה-saturation
hsla מוסיף שקיפות בדיוק כמו rgba

.overlay {
    background-color: hsla(0, 0%, 0%, 0.5); /* black, 50% transparent */
}

שקיפות - opacity¶

המאפיין opacity משנה את השקיפות של כל האלמנט (כולל התוכן שלו):

.faded {
    opacity: 0.5; /* 50% transparent - everything including text */
}

.invisible {
    opacity: 0;   /* completely transparent but still takes space */
}

ההבדל בין opacity לבין rgba/hsla: opacity משפיע על כל האלמנט כולל טקסט וילדים. rgba משפיע רק על הצבע הספציפי
opacity: 0 שונה מ-display: none - האלמנט עדיין תופס מקום

currentColor¶

מילת מפתח שמפנה לצבע הטקסט הנוכחי:

.box {
    color: #e74c3c;
    border: 2px solid currentColor;     /* border will be #e74c3c */
    box-shadow: 0 2px 5px currentColor; /* shadow will also be #e74c3c */
}

שימושי כשרוצים שגבול או צל יהיו באותו צבע כמו הטקסט
אם משנים את ה-color, הכל משתנה אוטומטית

טיפוגרפיה - typography¶

טיפוגרפיה היא אמנות הצגת טקסט. ב-CSS יש לנו שליטה מלאה על איך טקסט נראה.

משפחת פונט - font-family¶

body {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-family: Georgia, "Times New Roman", serif;
}

code {
    font-family: "Courier New", Consolas, monospace;
}

כותבים רשימת פונטים (font stack) - הדפדפן ישתמש בראשון שזמין
שם פונט עם רווח עוטפים במרכאות: "Times New Roman"
תמיד מסיימים עם משפחה כללית: serif, sans-serif, או monospace
פונטים נפוצים שזמינים כמעט בכל מחשב: Arial, Verdana, Georgia, Times New Roman, Courier New

גוגל פונטס - Google Fonts¶

במקום להסתמך על פונטים מותקנים, אפשר לטעון פונטים מהאינטרנט:

<!-- in the HTML head -->
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">

body {
    font-family: 'Rubik', sans-serif;
}

נכנסים ל-fonts.google.com
בוחרים פונט
מקבלים תגית link שמוסיפים ל-head
משתמשים בשם הפונט ב-font-family
Rubik הוא פונט מעולה לעברית

גודל פונט - font-size¶

יש כמה יחידות מידה:

/* px - pixels, fixed size */
p {
    font-size: 16px;
}

/* em - relative to parent's font-size */
.parent {
    font-size: 16px;
}
.child {
    font-size: 1.5em; /* 1.5 * 16 = 24px */
}

/* rem - relative to root (html) font-size */
html {
    font-size: 16px;
}
h1 {
    font-size: 2rem;   /* 2 * 16 = 32px */
}
p {
    font-size: 1rem;   /* 1 * 16 = 16px */
}

ההבדל בין em ל-rem:
- em - יחסי לגודל הפונט של ההורה. אם יש קינון, הגדלים מצטברים (מה שיכול להיות מבלבל)
- rem - יחסי לגודל הפונט של אלמנט ה-root (ה-html). תמיד אותו בסיס חישוב
- px - גודל קבוע, לא משתנה

המלצה: השתמשו ב-rem לרוב הדברים. זה יחסי ועקבי.

עובי פונט - font-weight¶

.light {
    font-weight: 300;      /* light */
}

.normal {
    font-weight: normal;   /* same as 400 */
}

.bold {
    font-weight: bold;     /* same as 700 */
}

.extra-bold {
    font-weight: 900;      /* heaviest */
}

ערכים מספריים: 100 (דק ביותר) עד 900 (עבה ביותר)
normal = 400, bold = 700
לא כל פונט תומך בכל העוביים - אם טוענים מגוגל פונטס, צריך לבקש את העוביים שרוצים

סגנון פונט - font-style¶

.italic {
    font-style: italic;
}

.normal {
    font-style: normal;    /* removes italic */
}

גובה שורה - line-height¶

p {
    font-size: 16px;
    line-height: 1.6; /* 1.6 times the font-size = 25.6px */
}

h1 {
    line-height: 1.2; /* tighter for headings */
}

ערך ללא יחידות (כמו 1.6) הוא יחסי לגודל הפונט - מומלץ
1.5 עד 1.8 הוא טווח טוב לטקסט גוף
1.1 עד 1.3 טוב לכותרות
line-height משפיע מאוד על הקריאות - טקסט צפוף קשה לקריאה

מרווח בין אותיות ומילים¶

h1 {
    letter-spacing: 2px;    /* space between letters */
}

.wide-text {
    word-spacing: 5px;      /* space between words */
}

.uppercase-title {
    text-transform: uppercase;
    letter-spacing: 3px;    /* common pattern: uppercase + letter-spacing */
}

יישור טקסט - text-align¶

.left {
    text-align: left;     /* default for LTR languages */
}

.center {
    text-align: center;   /* centered text */
}

.right {
    text-align: right;    /* default for RTL languages like Hebrew */
}

.justify {
    text-align: justify;  /* stretches text to fill the line */
}

text-align עובד על תוכן inline בתוך אלמנט block
עבור עברית, ברירת המחדל היא right (כשמגדירים dir="rtl")

קישוט טקסט - text-decoration¶

.underline {
    text-decoration: underline;
}

.strikethrough {
    text-decoration: line-through;
}

.no-decoration {
    text-decoration: none; /* removes underline from links */
}

/* advanced: style, color, thickness */
.fancy-underline {
    text-decoration: underline wavy red;
}

השימוש הנפוץ ביותר: text-decoration: none להסרת קו תחתון מקישורים

המרת טקסט - text-transform¶

.upper {
    text-transform: uppercase;   /* ALL CAPS */
}

.lower {
    text-transform: lowercase;   /* all lowercase */
}

.capitalize {
    text-transform: capitalize;  /* First Letter Of Each Word */
}

שימושי לכותרות ולכפתורים
עדיף לעשות את זה ב-CSS ולא ב-HTML - ככה התוכן נשאר נורמלי ורק ההצגה משתנה

צל טקסט - text-shadow¶

h1 {
    /* offset-x | offset-y | blur | color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.glow {
    text-shadow: 0 0 10px #3498db;
}

/* multiple shadows */
.multi-shadow {
    text-shadow:
        1px 1px 0 #333,
        2px 2px 0 #666;
}

רווחים לבנים - white-space¶

.no-wrap {
    white-space: nowrap;    /* text won't wrap to next line */
}

.preserve {
    white-space: pre;       /* preserves spaces and newlines like <pre> */
}

.preserve-wrap {
    white-space: pre-wrap;  /* preserves spaces but allows wrapping */
}

nowrap שימושי כשלא רוצים שטקסט ישבור שורה (למשל בכפתורים)
pre שומר על כל הרווחים בדיוק כמו שהם בקוד
pre-wrap שומר רווחים אבל מאפשר שבירת שורות

רקע - backgrounds¶

צבע רקע - background-color¶

body {
    background-color: #f4f4f4;
}

.card {
    background-color: white;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

תמונת רקע - background-image¶

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

חזרת רקע - background-repeat¶

.pattern {
    background-image: url('pattern.png');
    background-repeat: repeat;      /* default: repeats both ways */
}

.no-repeat {
    background-image: url('hero.jpg');
    background-repeat: no-repeat;   /* shows image once */
}

.repeat-x {
    background-image: url('stripe.png');
    background-repeat: repeat-x;    /* repeats horizontally only */
}

גודל רקע - background-size¶

.cover {
    background-image: url('photo.jpg');
    background-size: cover;   /* covers entire area, may crop */
}

.contain {
    background-image: url('photo.jpg');
    background-size: contain; /* fits entire image, may leave gaps */
}

.custom {
    background-image: url('photo.jpg');
    background-size: 300px 200px; /* specific width and height */
}

cover - התמונה מכסה את כל האזור, חלקים עלולים להיחתך
contain - כל התמונה נכנסת, ייתכנו רווחים
בדרך כלל cover הוא מה שרוצים לתמונות רקע

מיקום רקע - background-position¶

.bg-center {
    background-position: center;
}

.bg-top {
    background-position: center top;
}

.bg-custom {
    background-position: 20px 50px; /* 20px from left, 50px from top */
}

.bg-percentage {
    background-position: 50% 25%;
}

הצמדת רקע - background-attachment¶

.parallax {
    background-image: url('landscape.jpg');
    background-size: cover;
    background-attachment: fixed; /* image stays in place while scrolling */
}

.normal {
    background-attachment: scroll; /* default: scrolls with content */
}

fixed יוצר אפקט parallax - התמונה נשארת במקום והתוכן גולל מעליה
זה אפקט ויזואלי מרשים אבל יש לשים לב לביצועים במובייל

דפוס נפוץ - hero section עם תמונת רקע¶

.hero {
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
}

רקעים מרובים - multiple backgrounds¶

.multi-bg {
    background-image:
        url('overlay-pattern.png'),
        url('main-photo.jpg');
    background-size:
        auto,
        cover;
    background-position:
        center,
        center;
}

אפשר לשכב כמה רקעים, הראשון הוא העליון
כל רקע מופרד בפסיק
שימושי לשכבת דפוס מעל תמונה

גרדיאנטים - gradients¶

מעבר צבע חלק בין שני צבעים או יותר:

/* linear gradient - top to bottom */
.gradient-basic {
    background: linear-gradient(#3498db, #2ecc71);
}

/* with direction */
.gradient-right {
    background: linear-gradient(to right, #e74c3c, #f39c12);
}

/* with angle */
.gradient-angle {
    background: linear-gradient(45deg, #9b59b6, #3498db);
}

/* multiple color stops */
.rainbow {
    background: linear-gradient(
        to right,
        #e74c3c,
        #f39c12,
        #f1c40f,
        #2ecc71,
        #3498db,
        #9b59b6
    );
}

/* with percentage stops */
.sharp {
    background: linear-gradient(
        to right,
        #3498db 0%,
        #3498db 50%,
        #e74c3c 50%,
        #e74c3c 100%
    );
    /* creates a sharp split, no fade */
}

גרדיאנט רדיאלי - מעגלי:

.radial {
    background: radial-gradient(circle, #3498db, #2c3e50);
}

.radial-custom {
    background: radial-gradient(circle at top left, #f39c12, #e74c3c);
}

שימוש נפוץ - שכבת כהה מעל תמונת רקע:

.hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url('hero.jpg') center/cover no-repeat;
    color: white;
}

זה שם גרדיאנט חצי-שקוף מעל התמונה, מה שמכהה אותה ומאפשר לקרוא טקסט לבן מעליה.

פינות מעוגלות - border-radius¶

.rounded {
    border-radius: 8px;    /* all corners */
}

.pill {
    border-radius: 50px;   /* pill shape (when height < 100px) */
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;    /* perfect circle */
}

/* individual corners */
.custom {
    border-radius: 10px 0 10px 0; /* top-left and bottom-right only */
}

border-radius: 50% על אלמנט ריבועי יוצר עיגול מושלם
ערך גדול על אלמנט מלבני יוצר צורת כדור (pill shape)

צל קופסה - box-shadow¶

.card {
    /* offset-x | offset-y | blur | color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.elevated {
    /* offset-x | offset-y | blur | spread | color */
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.3);
}

/* inset shadow (inside the box) */
.inset {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* multiple shadows */
.fancy {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
}

offset-x: הזזה אופקית (חיובי = ימינה)
offset-y: הזזה אנכית (חיובי = למטה)
blur: רדיוס טשטוש (ככל שיותר גדול, הצל יותר מפוזר)
spread: הרחבת הצל (ערך שלילי מקטין)
inset: צל פנימי במקום חיצוני

מתאר מול גבול - outline vs border¶

.outline-example {
    outline: 2px solid blue;
    outline-offset: 5px;
}

.border-example {
    border: 2px solid blue;
}

ההבדל:
- border הוא חלק ממודל הקופסה - הוא תופס מקום ומשפיע על הגודל
- outline לא תופס מקום ולא משפיע על layout
- outline לא יכול להיות מעוגל (ברוב הדפדפנים)
- outline נפוץ בעיקר ל-focus states (כשלוחצים Tab)

דוגמה מסכמת¶

נשלב צבעים, טיפוגרפיה ורקע ביחד:

<section class="hero">
    <h1 class="hero-title">Welcome to Our Site</h1>
    <p class="hero-subtitle">Building beautiful things with CSS</p>
</section>

<article class="content">
    <h2 class="content-title">About Us</h2>
    <p class="content-text">We create amazing web experiences using modern CSS techniques.</p>
    <button class="btn">Learn More</button>
</article>

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Rubik', sans-serif;
    color: #333;
    line-height: 1.6;
}

.hero {
    background:
        linear-gradient(rgba(44, 62, 80, 0.7), rgba(44, 62, 80, 0.9)),
        url('hero.jpg') center/cover no-repeat;
    color: white;
    text-align: center;
    padding: 100px 20px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    letter-spacing: 1px;
}

.content {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.content-title {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.content-text {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 25px;
}

.btn {
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    padding: 12px 30px;
    background: linear-gradient(to right, #3498db, #2ecc71);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
    letter-spacing: 1px;
}

סיכום¶

צבעים: hex (#ff0000) הוא הנפוץ ביותר, hsl נוח ליצירת וריאציות, rgba/hsla לשקיפות
טיפוגרפיה: השתמשו ב-Google Fonts, rem לגדלים, line-height ללא יחידות
רקע: background-size: cover לתמונות רקע, linear-gradient למעברי צבע
עיגולים: border-radius: 50% ליצירת עיגול
צלליות: box-shadow ליצירת עומק, text-shadow לטקסט
שילוב נכון של כל אלה יוצר עיצוב מקצועי ונקי