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

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

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ı

Kopya kağıdı

CSS gradyanları, linear-gradient() fonksiyonunu kullanarak renkler arasında yumuşak geçişler oluşturur:

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

/* Yön ve birden fazla renk içeren lineer gradyan */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Yaygın yönler şunları içerir: to bottom, to right, to left ve to top.

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>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.