Урок 3. Робота з кольорами: Hex, RGB, RGBA, і CSS-змінні для кольорів

План уроку: Робота з кольорами (25-30 хвилин)

1. Вступ (5 хвилин)

• Що таке кольори в CSS?
  • CSS дозволяє встановлювати кольори для різних елементів сторінки: тексту, фону, бордерів тощо.
  • Існує кілька способів задання кольорів у CSS: через назви кольорів, коди в форматі Hex, RGB та RGBA.
• Навіщо використовувати CSS-змінні для кольорів?
  • CSS-змінні дозволяють зберігати значення кольорів у змінних, що спрощує подальше їх використання та зміну на сайті.
    
    

2. Hex-коди для кольорів (5 хвилин)

• Що таке Hex-код?

  • Hex-код кольору — це шестизначний код, який визначає колір через поєднання червоного (R), зеленого (G) і синього (B). Він починається з символу #.

• Приклад:

  h1 {
    color: #ff5733; /* червоний відтінок */
  }
  

• Як це працює?

  • Кожна частина (RR, GG, BB) — це шістнадцяткове значення кольору (00 до FF), яке відповідає інтенсивності кольорів: червоного, зеленого і синього.
    
    

3. RGB та RGBA (10 хвилин)

• Що таке RGB?

  • RGB (Red, Green, Blue) — це спосіб визначення кольору через поєднання інтенсивностей червоного, зеленого та синього кольорів у діапазоні від 0 до 255.

• Приклад RGB:

• p {
    color: rgb(255, 87, 51); /* червоний відтінок */
  }
  

• Що таке RGBA?
  • RGBA (Red, Green, Blue, Alpha) додає до RGB прозорість (alpha-канал). Значення прозорості варіюється від 0 (повністю прозорий) до 1 (непрозорий).

• Приклад RGBA:

• div {
    background-color: rgba(255, 87, 51, 0.5); /* напівпрозорий червоний */
  }
  

• 
  

  • Пояснення: У цьому прикладі колір буде таким самим, як у RGB, але з 50% прозорістю.
    
    

• 4. CSS-змінні для кольорів (10 хвилин)

   

  • Що таке CSS-змінні?

    • CSS-змінні (також відомі як custom properties) дозволяють оголошувати змінні, які можна використовувати в різних частинах коду. Це корисно для багаторазового використання кольорів та легкого їхнього оновлення.

  • Як створити змінні?

    • CSS-змінні оголошуються в кореневому селекторі :root і використовуються через ключове слово var().

  • Приклад:

  • :root {
      --main-color: #ff5733;
      --secondary-color: rgb(0, 128, 255);
    }
    
    h1 {
      color: var(--main-color);
    }
    
    p {
      background-color: var(--secondary-color);
    }
    

    • Пояснення: У цьому прикладі ви оголошуєте дві змінні: --main-color і --secondary-color, які можна використовувати для різних елементів.
      
      

  • 5. Практична частина (10 хвилин)

    • Завдання 1:

      • Створіть веб-сторінку з кількома заголовками та абзацами.
      • Використайте кольори в форматах Hex, RGB та RGBA для різних елементів.

    • Завдання 2:

      • Створіть CSS-змінні для основних кольорів сайту і застосуйте їх для заголовків, параграфів та кнопок.

    • Приклад:
      
      

      :root {
        --primary-bg: rgba(255, 87, 51, 0.8);
        --text-color: #2c3e50;
      }
      
      body {
        background-color: var(--primary-bg);
        color: var(--text-color);
      }
      

6. Підсумок уроку (5 хвилин)

• Що повторити:
  • Різницю між Hex, RGB і RGBA.
  • Як використовувати CSS-змінні для кольорів.
    
    
• Запитання для обговорення:
  • Коли варто використовувати RGBA замість RGB?
  • Як CSS-змінні можуть полегшити процес зміни стилів на великому веб-сайті?

Домашнє завдання

• Створіть веб-сторінку, використовуючи кольори в форматах Hex, RGB та RGBA. Створіть CSS-змінні для кольорів і застосуйте їх до різних елементів.

Цей урок дозволяє учням зрозуміти, як правильно працювати з кольорами та CSS-змінними, що є важливими інструментами для створення привабливого і організованого дизайну веб-сторінок.