Gradientlər

8.1 Xətti qradiyentlər (linear-gradient)

CSS-də qradiyentlər bir neçə rəng arasında hamar keçidlər yaratmağa imkan verir. Onlar fonlar, düymələr və digər elementlər üçün istifadə olunur, vizual dərinlik və cazibədarlıq əlavə edir. CSS-də iki əsas qradiyent növü var: xətti (linear-gradient) və radiasiyalı (radial-gradient).

Xətti qradiyent rənglər arasında düz xətt boyunca hamar keçid yaradır. Xəttin istiqaməti və rəng keçidləri dəqiq tənzimlənə bilər.

Sintaksis:

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

Burada:

• direction: qradiyentin istiqaməti. Bu, dərəcə bucağı (məsələn, 45deg) və ya açar sözlərlə (to right, to bottom və s.) göstərilə bilər
• color-stop: rəng və onun qradiyentdəki mövqeyini təyin edir

Nümunə 1: Sadə xətti qradiyent

Bu nümunədə qradiyent sağdan sola qırmızı rəngdən mavi rəngə keçir:

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

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

Nümunə 2: Xətti qradiyent bucaqla

Bu nümunədə qradiyent 45 dərəcə ilə sarı rəngdən yaşıl rəngə keçir:

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

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

Nümunə 3: Bir neçə rəngli xətti qradiyent

Bu nümunədə qradiyent yuxarıdan aşağıya, qırmızıdan, sarıya, yaşıl rəngdən mavi rəngə keçir:

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

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

Nümunə 4: Nəzarət nöqtələri ilə xətti qradiyent

Bu nümunədə hər bir rəngin qradiyentdə dəqiq yerləşməsini təyin edən nəzarət nöqtələri göstərilib:

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

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

8.2 Radial qradiyentlər (radial-gradient)

Radial qradiyent rənglər arasında keçid edir, mərkəzdən və ya təyin olunmuş nöqtədən başlayır. Qradiyent dairə və ya elips boyunca genişlənir.

Sintaksis:

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

Harada:

• shape: qradiyentin forması (circle və ya ellipse)
• size: qradiyentin ölçüsü (closest-side, farthest-side, closest-corner, farthest-corner)
• position: qradiyentin mərkəz mövqeyi (piksel, faiz və ya center, top, left kimi açar sözlərlə göstərilə bilər)
• color-stop: qradiyentdə rəngi və mövqeyini təyin edir

Nümunə 1: Sadə radial qradiyent

Bu nümunədə radial qradiyent yaradılır, o, dairənin mərkəzindən başlayıb, qırmızıdan mavi rəngə keçid edir:

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

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

Nümunə 2: Fərqli mövqeyə malik radial qradiyent

Bu nümunədə radial qradiyentin mərkəzi yuxarı sol küncə çəkilmişdir, sarıdan yaşıl rəngə keçid yaradır:

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

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

Nümunə 3: Bir neçə rəngli radial qradiyent

Bu nümunədə qradiyent dairənin mərkəzindən başlayıb, qırmızı, sarı, yaşıl və mavi rənglər arasında keçid edir:

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

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

Nümunə 4: Kontrol nöqtələri ilə radial qradiyent

Bu nümunədə hər bir rəngin qradiyentdə yerləşməsini dəqiq təyin edən kontrol nöqtələri göstərilmişdir:

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

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

8.3 Kompleks gradientlərlə nümunələr

Nümunə 1: Şəffaflıqla xətti gradient

Bu nümunədə qismən şəffaf qırmızıdan qismən şəffaf mavi rəngə keçən gradient yaratmaq üçün şəffaflıqdan istifadə olunur:

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

Nümunə 2: Ölçülərlə radial gradient

Bu nümunədə elementi ən yaxın tərəfə dolduran ellips radial gradient yaradılır:

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

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

Nümunə 3: Düymələr üçün gradientlərin yaradılması

Gradientlər düymələri daha cazibədar edə bilər. Bu gradient yuxarıdan aşağıya doğru keçir, açıq yaşıl rəngdən tünd yaşıl rəngə keçərək düyməyə həcm və dərinlik verir:

    
      <button type="button" class="button">Düymə</button>
    
  

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

Gradientlərdən istifadə etmənin üstünlükləri:

1. Vizual cazibədarlıq. Gradientlər rənglər arasında hamar keçidlər yaratmağa imkan verir və dizayn elementlərinə vizual dərinlik və cazibədarlıq əlavə edir.

2. Çeviklik. Gradientlər müxtəlif effektlər yaratmaq üçün tənzimlənə bilər, sadə keçidlərdən tutmuş çox rəngli mürəkkəb fonlara qədər.

3. Adaptiv dizayna dəstək. Gradientlər müxtəlif ekran ölçülərinə və qətnamələrə asanlıqla uyğunlaşır, onları adaptiv veb-dizaynların yaradılmasında faydalı edir.