Gradienty

8.1 Gradienty liniowe (linear-gradient)

Gradienty w CSS pozwalają tworzyć płynne przejścia między dwoma lub więcej kolorami. Są one używane do tła, przycisków i innych elementów, aby dodać wizualną głębię i atrakcyjność. W CSS istnieją dwa główne rodzaje gradientów: liniowe (linear-gradient) i radialne (radial-gradient).

Gradient liniowy tworzy płynne przejście między kolorami wzdłuż prostej linii. Kierunek linii i przejścia kolorów można precyzyjnie dostosować.

Składnia:

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

Gdzie:

• direction: kierunek gradientu. Może być podany jako kąt (np. 45deg) lub słowa kluczowe (to right, to bottom, itd.)
• color-stop: określa kolor i jego położenie w gradiencie

Przykład 1: Prosty gradient liniowy

W tym przykładzie tworzony jest gradient, który przechodzi od czerwonego koloru do niebieskiego z prawej do lewej:

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

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

Przykład 2: Gradient liniowy z kątem

W tym przykładzie gradient rozciąga się pod kątem 45 stopni od żółtego koloru do zielonego:

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

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

Przykład 3: Gradient liniowy z wieloma kolorami

W tym przykładzie gradient rozciąga się z góry na dół, płynnie przechodząc przez cztery kolory: czerwony, żółty, zielony i niebieski:

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

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

Przykład 4: Gradient liniowy z punktami kontrolnymi

W tym przykładzie podano punkty kontrolne, które określają dokładne położenie każdego koloru w gradiencie:

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

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

8.2 Gradienty radialne (radial-gradient)

Gradient radialny tworzy płynne przejście między kolorami, wychodząc z centrum lub określonego punktu. Gradient rozszerza się w postaci koła lub elipsy.

Składnia:

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

Gdzie:

• shape: kształt gradientu (circle lub ellipse)
• size: rozmiar gradientu (closest-side, farthest-side, closest-corner, farthest-corner)
• position: pozycja centrum gradientu (może być podana w pikselach, procentach lub słowach kluczowych, takich jak center, top, left i in.)
• color-stop: określa kolor i jego położenie w gradiencie

Przykład 1: Prosty gradient radialny

W tym przykładzie tworzony jest gradient radialny, który rozciąga się od środka koła, przechodząc od czerwonego koloru do niebieskiego:

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

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

Przykład 2: Gradient radialny z różną pozycją

W tym przykładzie centrum gradientu radialnego jest przesunięte do górnego lewego rogu, tworząc przejście od żółtego koloru do zielonego:

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

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

Przykład 3: Gradient radialny z wieloma kolorami

W tym przykładzie gradient rozciąga się od środka koła, płynnie przechodząc przez cztery kolory: czerwony, żółty, zielony i niebieski:

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

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

Przykład 4: Gradient radialny z punktami kontrolnymi

W tym przykładzie podano punkty kontrolne, które określają dokładne położenie każdego koloru w gradiencie:

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

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

8.3 Przykłady z złożonymi gradientami

Przykład 1: Gradient liniowy z półprzezroczystością

W tym przykładzie użyto półprzezroczystości, aby stworzyć gradient od półprzezroczystego czerwonego do półprzezroczystego niebieskiego:

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

Przykład 2: Gradient radialny z rozmiarami

W tym przykładzie tworzony jest eliptyczny gradient radialny, który wypełnia najbliższą stronę elementu:

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

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

Przykład 3: Tworzenie gradientów dla przycisków

Gradienty mogą uczynić przyciski bardziej atrakcyjnymi. Ten gradient rozciąga się z góry na dół, przechodząc od jasnozielonego do ciemnozielonego, nadając przyciskowi objętość i głębię:

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

Zalety użycia gradientów:

1. Atrakcyjność wizualna. Gradienty pozwalają na tworzenie płynnych przejść między kolorami, dodając wizualną głębię i atrakcyjność elementom projektu.

2. Elastyczność. Gradienty można dostosować, aby tworzyć różne efekty, od prostych przejść do złożonych, wielokolorowych tła.

3. Wsparcie dla responsywnego designu. Gradienty łatwo dostosowują się do różnych rozmiarów ekranów i rozdzielczości, co czyni je przydatnymi w tworzeniu responsywnych projektów internetowych.