לדלג לתוכן

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

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

תרגיל 1 - טיפוגרפיה למאמר

צרו דף HTML עם מאמר שמכיל:
- כותרת ראשית (h1)
- כותרת משנה (h2)
- שלוש פסקאות טקסט
- ציטוט (blockquote)
- רשימה עם מספר פריטים

עצבו את המאמר עם CSS:
- טענו פונט מ-Google Fonts (מומלץ: Rubik לעברית, או כל פונט שאתם אוהבים)
- הגדירו font-size בסיסי של 16px על html ב-rem
- הכותרת הראשית: 2.5rem, עובי 700, line-height של 1.2
- הכותרת המשנית: 1.8rem, עובי 400
- פסקאות: 1rem, line-height של 1.7, צבע אפור כהה (לא שחור מלא)
- הציטוט: font-style italic, גבול שמאלי עבה, padding, רקע בהיר
- מרווח נכון בין כל האלמנטים

תרגיל 2 - פלטת צבעים

צרו דף שמציג פלטת צבעים. עבור כל צבע צרו div עם:
- הצבע כרקע
- שם הצבע ב-hex, rgb וגם hsl (כטקסט)

צרו את הפלטה הבאה:
1. צבע ראשי (primary) - בחרו צבע כחול כלשהו בפורמט hex
2. אותו צבע בגרסה בהירה יותר (שנו את ה-lightness ב-hsl)
3. אותו צבע בגרסה כהה יותר
4. צבע משלים (complementary) - הוסיפו 180 ל-hue
5. צבע ניטרלי בהיר (רקע) - אפור מאוד בהיר
6. צבע ניטרלי כהה (טקסט) - אפור כהה (לא שחור מוחלט)

תרגיל 3 - כפתורים מעוצבים

צרו 5 כפתורים עם עיצובים שונים:
1. כפתור ראשי: רקע גרדיאנט, צבע טקסט לבן, border-radius מעוגל, box-shadow
2. כפתור משני: רקע שקוף, border צבעוני, צבע טקסט צבעוני
3. כפתור הצלחה: ירוק עם גרדיאנט
4. כפתור סכנה: אדום עם צל
5. כפתור עגול: עיגול מושלם עם אייקון (אפשר להשתמש בטקסט כמו "+" או "X")

לכל הכפתורים:
- padding נכון
- border-radius
- font-family מתאים
- cursor: pointer

תרגיל 4 - Hero Section

צרו hero section (אזור גדול בראש הדף) עם:
- תמונת רקע (אפשר להשתמש בתמונה מ-unsplash.com או placeholder)
- שכבת gradient חצי-שקופה מעל התמונה (כהה) כדי שאפשר יהיה לקרוא טקסט
- כותרת גדולה בלבן עם text-shadow
- כותרת משנה קטנה יותר
- כפתור CTA (Call to Action)
- הכל ממורכז אופקית ואנכית
- גובה מינימלי: 500px

רמז: השתמשו ב-background shorthand:

background: linear-gradient(...), url('...') center/cover no-repeat;

תרגיל 5 - כרטיס פרופיל

בנו כרטיס פרופיל עם:
- תמונת פרופיל עגולה (border-radius: 50%)
- שם
- תפקיד
- תיאור קצר
- כפתורי פעולה

הכרטיס צריך לכלול:
- רקע לבן עם box-shadow עדין
- border-radius לפינות מעוגלות
- רקע גרדיאנט בחלק העליון (מאחורי התמונה)
- טיפוגרפיה נקייה עם Google Font
- מרווחים נכונים

שאלות

  1. מה ההבדל בין em ל-rem? מתי כדאי להשתמש בכל אחד?
  2. מה ההבדל בין opacity: 0.5 על אלמנט לבין שימוש ב-rgba(0,0,0,0.5) כצבע רקע?
  3. מתי כדאי להשתמש ב-hex, מתי ב-rgb, ומתי ב-hsl?
  4. מה היתרון של background-size: cover על פני contain?
  5. למה line-height ללא יחידות (כמו 1.6) עדיף על line-height עם px?