Градієнти

8.1 Лінійні градієнти (linear-gradient)

Градієнти в CSS дозволяють створювати плавні переходи між двома чи більше кольорами. Вони використовуються для фонів, кнопок та інших елементів, щоб додати візуальну глибину та привабливість. У CSS існує два основних типи градієнтів: лінійні (linear-gradient) та радіальні (radial-gradient).

Лінійний градієнт створює плавний перехід між кольорами вздовж прямої лінії. Напрямок лінії та переходи кольорів можна точно налаштувати.

Синтаксис:

    
      background: linear-gradient(direction, color-stop1, color-stop2, ...);
    
  

Де:

• direction: напрямок градієнта. Може бути вказаний кутом (наприклад, 45deg) або ключовими словами (to right, to bottom, і т.д.)
• color-stop: визначає колір і його позицію в градієнті

Приклад 1: Простий лінійний градієнт

У цьому прикладі створюється градієнт, що переходить від червоного кольору до синього справа наліво:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red, blue);
      }
    
  

Приклад 2: Лінійний градієнт з кутом

У цьому прикладі градієнт іде під кутом 45 градусів від жовтого кольору до зеленого:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(45deg, yellow, green);
      }
    
  

Приклад 3: Лінійний градієнт із кількома кольорами

У цьому прикладі градієнт іде зверху вниз, плавно переходячи через чотири кольори: червоний, жовтий, зелений і синій:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to bottom, red, yellow, green, blue);
      }
    
  

Приклад 4: Лінійний градієнт із контрольними точками

У цьому прикладі вказані контрольні точки, які визначають точне розташування кожного кольору в градієнті:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
      }
    
  

8.2 Радіальні градієнти (radial-gradient)

Радіальний градієнт створює плавний перехід між кольорами, виходячи від центру або заданої точки. Градієнт розширюється по колу чи еліпсу.

Синтаксис:

    
      background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
    
  

Де:

• shape: форма градієнта (circle або ellipse)
• size: розмір градієнта (closest-side, farthest-side, closest-corner, farthest-corner)
• position: положення центру градієнта (може бути вказане в пікселях, відсотках або ключовими словами, як center, top, left і т. д.)
• color-stop: визначає колір і його позицію в градієнті

Приклад 1: Простий радіальний градієнт

У цьому прикладі створюється радіальний градієнт, який іде від центру кола, переходячи від червоного кольору до синього:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, blue);
      }
    
  

Приклад 2: Радіальний градієнт із різним положенням

У цьому прикладі центр радіального градієнта зміщений у верхній лівий кут, створюючи перехід від жовтого кольору до зеленого:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at top left, yellow, green);
      }
    
  

Приклад 3: Радіальний градієнт із декількома кольорами

У цьому прикладі градієнт йде від центру кола, плавно переходячи через чотири кольори: червоний, жовтий, зелений і синій:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, yellow, green, blue);
      }
    
  

Приклад 4: Радіальний градієнт із контрольними точками

У цьому прикладі вказані контрольні точки, які визначають точне розташування кожного кольору в градієнті:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
      }
    
  

8.3 Приклади зі складними градієнтами

Приклад 1: Лінійний градієнт з напівпрозорістю

У цьому прикладі використовується напівпрозорість для створення градієнта від напівпрозорого червоного до напівпрозорого синього:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
      }
    
  

Приклад 2: Радіальний градієнт з розмірами

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

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(ellipse closest-side, red, blue);
      }
    
  

Приклад 3: Створення градієнтів для кнопок

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

    
      <button type="button" class="button">Button</button>
    
  

    
      .button {
        background: linear-gradient(to bottom, #4caf50, #2e7d32);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
      }
    
  

Переваги використання градієнтів:

1. Візуальна привабливість. Градієнти дозволяють створювати плавні переходи між кольорами, додаючи візуальну глибину та привабливість елементам дизайну.

2. Гнучкість. Градієнти можна налаштувати для створення різноманітних ефектів, від простих переходів до складних багатоколірних фонів.

3. Підтримка адаптивного дизайну. Градієнти легко адаптуються до різних розмірів екранів і розширень, що робить їх корисними для створення адаптивних веб-дизайнів.