Gradyanlar

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 21 / 43.

CSS'deki gradyanlar, iki veya daha fazla renk arasında pürüzsüz geçişler oluşturmanıza olanak tanır.

Basit bir lineer gradyan ile başlayalım:

/* Yukarıdan aşağıya doğru bir lineer gradyan oluşturun */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Bu, üstte turuncudan (#ff9966) altta kırmızımsı bir renge (#ff5e62) geçiş yapan bir gradyan oluşturur.

Aşağıdaki örnekte olduğu gibi yönü belirtebilir ve birden fazla renk kullanabilirsiniz:

/* Soldan sağa doğru doğrusal bir gradyan oluşturun */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Görev

Kolay

Doğrusal bir gradyan arka planı uygulayan sunset-gradient adında bir CSS kuralı oluşturun. Gradyan şunları yapmalıdır:

Yukarıdan aşağıya doğru gitmeli
#FFD700 (gold) rengiyle başlamalı
#FF4500 (orangered) rengine geçiş yapmalı

Kendin dene

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>