לדלג לתוכן

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

פתרון - צבעים, טיפוגרפיה ורקע

פתרון תרגיל 1

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Article Typography</title>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <article class="article">
        <h1 class="article-title">Typography in CSS</h1>
        <h2 class="article-subtitle">How to make text look great</h2>

        <p class="article-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <p class="article-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <blockquote class="article-quote">
            Good typography is invisible. Bad typography is everywhere.
        </blockquote>

        <p class="article-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

        <ul class="article-list">
            <li>Choose the right font</li>
            <li>Set proper line-height</li>
            <li>Use rem for font sizes</li>
            <li>Dont use pure black for text</li>
        </ul>
    </article>
</body>
</html>

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

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

html {
    font-size: 16px;
}

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

.article {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 20px;
}

.article-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #222;
    margin-bottom: 10px;
}

.article-subtitle {
    font-size: 1.8rem;
    font-weight: 400;
    color: #666;
    margin-bottom: 30px;
}

.article-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
}

.article-quote {
    font-style: italic;
    font-size: 1.1rem;
    color: #555;
    border-right: 4px solid #3498db;
    padding: 15px 20px;
    margin: 25px 0;
    background-color: #f0f7fc;
    border-radius: 0 4px 4px 0;
}

.article-list {
    margin: 20px 0;
    padding-right: 25px;
}

.article-list li {
    margin-bottom: 8px;
    line-height: 1.7;
}

פתרון תרגיל 2

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Color Palette</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="page-title">Color Palette</h1>
    <div class="palette">
        <div class="color-box primary">
            <span class="color-name">Primary</span>
            <span class="color-value">#3498db</span>
            <span class="color-value">rgb(52, 152, 219)</span>
            <span class="color-value">hsl(204, 70%, 53%)</span>
        </div>
        <div class="color-box primary-light">
            <span class="color-name">Primary Light</span>
            <span class="color-value">hsl(204, 70%, 75%)</span>
        </div>
        <div class="color-box primary-dark">
            <span class="color-name">Primary Dark</span>
            <span class="color-value">hsl(204, 70%, 33%)</span>
        </div>
        <div class="color-box complementary">
            <span class="color-name">Complementary</span>
            <span class="color-value">hsl(24, 70%, 53%)</span>
        </div>
        <div class="color-box neutral-light">
            <span class="color-name">Neutral Light</span>
            <span class="color-value">#f5f5f5</span>
        </div>
        <div class="color-box neutral-dark">
            <span class="color-name">Neutral Dark</span>
            <span class="color-value">#333333</span>
        </div>
    </div>
</body>
</html>

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

body {
    font-family: Arial, sans-serif;
    padding: 40px;
    background-color: #eee;
}

.page-title {
    text-align: center;
    margin-bottom: 30px;
}

.palette {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

.color-box {
    width: 250px;
    height: 180px;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.color-name {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
}

.color-value {
    font-size: 13px;
    opacity: 0.9;
}

.primary {
    background-color: #3498db;
    color: white;
}

.primary-light {
    background-color: hsl(204, 70%, 75%);
    color: #333;
}

.primary-dark {
    background-color: hsl(204, 70%, 33%);
    color: white;
}

.complementary {
    background-color: hsl(24, 70%, 53%);
    color: white;
}

.neutral-light {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

.neutral-dark {
    background-color: #333333;
    color: white;
}

פתרון תרגיל 3

<div class="buttons">
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-circle">+</button>
</div>

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

.buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 40px;
}

.btn {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    padding: 12px 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* 1. primary - gradient background */
.btn-primary {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

/* 2. secondary - outline style */
.btn-secondary {
    background: transparent;
    color: #3498db;
    border: 2px solid #3498db;
    border-radius: 25px;
}

/* 3. success - green gradient */
.btn-success {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border-radius: 6px;
}

/* 4. danger - red with shadow */
.btn-danger {
    background-color: #e74c3c;
    color: white;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

/* 5. circle button */
.btn-circle {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(155, 89, 182, 0.4);
}

פתרון תרגיל 4

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Hero Section</title>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Build Something Amazing</h1>
            <p class="hero-subtitle">Learn modern web development with hands-on projects</p>
            <a class="hero-btn" href="#">Get Started</a>
        </div>
    </section>
</body>
</html>

@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;
}

.hero {
    background:
        linear-gradient(
            rgba(44, 62, 80, 0.6),
            rgba(44, 62, 80, 0.85)
        ),
        url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200') center/cover no-repeat;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.hero-content {
    max-width: 700px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    margin-bottom: 15px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    line-height: 1.6;
}

.hero-btn {
    display: inline-block;
    padding: 14px 40px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

פתרון תרגיל 5

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Profile Card</title>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="profile-card">
        <div class="profile-header"></div>
        <div class="profile-body">
            <img class="profile-image" src="https://via.placeholder.com/120" alt="Profile">
            <h2 class="profile-name">Sarah Cohen</h2>
            <p class="profile-role">Frontend Developer</p>
            <p class="profile-bio">Passionate about creating beautiful and accessible web experiences using modern CSS and JavaScript.</p>
            <div class="profile-actions">
                <a class="btn-follow" href="#">Follow</a>
                <a class="btn-message" href="#">Message</a>
            </div>
        </div>
    </div>
</body>
</html>

@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;
    background-color: #ecf0f1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.profile-card {
    width: 350px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.profile-header {
    height: 120px;
    background: linear-gradient(135deg, #3498db, #9b59b6);
}

.profile-body {
    text-align: center;
    padding: 0 25px 25px;
}

.profile-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    margin-top: -60px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-top: 15px;
    margin-bottom: 5px;
}

.profile-role {
    font-size: 0.95rem;
    color: #3498db;
    font-weight: 400;
    margin-bottom: 15px;
}

.profile-bio {
    font-size: 0.9rem;
    color: #777;
    line-height: 1.6;
    margin-bottom: 20px;
}

.profile-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-follow {
    display: inline-block;
    padding: 10px 25px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
}

.btn-message {
    display: inline-block;
    padding: 10px 25px;
    background: transparent;
    color: #3498db;
    text-decoration: none;
    border: 2px solid #3498db;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
}

תשובות לשאלות

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

  2. opacity מול rgba - opacity: 0.5 משקף את כל האלמנט כולל הטקסט והילדים שלו. rgba כצבע רקע משפיע רק על הרקע, הטקסט נשאר רגיל. לרוב נרצה rgba לרקע כדי שהטקסט יישאר קריא.

  3. hex מול rgb מול hsl - hex הוא הנפוץ ביותר ורוב כלי העיצוב נותנים אותו. rgb שימושי כשצריך שקיפות (rgba). hsl הכי אינטואיטיבי כשרוצים ליצור וריאציות - שינוי lightness ל-בהיר/כהה, שינוי saturation ל-חי/עמום.

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

  5. line-height ללא יחידות - כשכותבים line-height: 1.6 (בלי px או em), הערך הוא יחסי לגודל הפונט של כל אלמנט. ככה אם יש כותרת גדולה ופסקה קטנה, כל אחד מקבל line-height מתאים. עם px, הערך קבוע ולא מתאים לכל גודל טקסט.