Gradyanlar

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

CSS'teki degradeler, iki veya daha fazla renk arasında yumuşak geçişler oluşturmanı sağlar.

Basit bir doğrusal gradyanla başlayalım:

/* Yukarıdan aşağıya doğrusal bir renk geçişi oluştur */
.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.

Yön belirtmek isteğe bağlıdır. Yönü belirtmezseniz linear-gradient(), to bottom ile aynı şekilde yukarıdan aşağıya doğru ilerler:

background: linear-gradient(#ff9966, #ff5e62); /* yukarıdan aşağıya */

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ştur */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Görev

Kolay

Doğrusal bir gradyan arka planı uygulayan, sunset-gradient adlı bir sınıf için CSS kuralı oluştur. Gradyan:

Yukarıdan aşağıya doğru gitmeli
#FFD700 (altın) rengiyle başlamalı
#FF4500 (kırmızı-turuncu) rengine geçmeli

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>