Dải màu

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 21 trên 43.

Gradient trong CSS cho phép bạn tạo chuyển tiếp mượt mà giữa hai màu trở lên.

Hãy bắt đầu với một dải chuyển màu tuyến tính đơn giản:

/* Tạo dải màu chuyển sắc tuyến tính từ trên xuống dưới */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Lệnh này tạo một dải chuyển màu từ màu cam (#ff9966) ở trên cùng sang màu đỏ cam (#ff5e62) ở dưới cùng.

Hướng là tùy chọn. Nếu bạn bỏ qua hướng, linear-gradient() sẽ chuyển màu từ trên xuống dưới, giống như to bottom:

background: linear-gradient(#ff9966, #ff5e62); /* từ trên xuống dưới */

Bạn cũng có thể chỉ định hướng và dùng nhiều màu như trong ví dụ sau:

/* Tạo dải màu chuyển sắc tuyến tính từ trái sang phải */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Thử thách

Dễ

Tạo một quy tắc CSS cho lớp có tên sunset-gradient để áp dụng nền chuyển sắc tuyến tính. Dải màu cần:

Chuyển từ trên xuống dưới
Bắt đầu bằng màu #FFD700 (vàng kim)
Chuyển sang màu #FF4500 (đỏ cam)

Tự làm thử

<!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>