Hiệu ứng chuyển màu

The CSS Podcast – 021: Độ dốc

Hãy tưởng tượng bạn có một trang web cần xây dựng và ở trên cùng, có một phần giới thiệu với tiêu đề, bản tóm tắt và một nút. Nhà thiết kế đã bàn giao một thiết kế có nền màu tím cho phần giới thiệu này. Vấn đề duy nhất là nền có hai sắc thái màu tím dưới dạng màu chuyển tiếp. Làm cách nào để thực hiện việc này?

Ban đầu, bạn có thể nghĩ rằng mình cần xuất hình ảnh từ công cụ thiết kế để thực hiện việc này, nhưng bạn có thể sử dụng linear-gradient.

Hiệu ứng chuyển màu là một hình ảnh và có thể được sử dụng ở bất cứ nơi nào có thể sử dụng hình ảnh, nhưng hiệu ứng này được tạo bằng CSS và được tạo thành từ các màu, số và góc. Hiệu ứng chuyển màu CSS cho phép bạn tạo mọi thứ, từ hiệu ứng chuyển màu mượt mà giữa hai màu cho đến tác phẩm nghệ thuật ấn tượng bằng cách kết hợp và lặp lại nhiều hiệu ứng chuyển màu.

Tô chuyển tiếp dạng đường thẳng

Hàm linear-gradient() tạo hình ảnh có hai hoặc nhiều màu, tăng dần. Phương thức này có nhiều đối số, nhưng trong cấu hình đơn giản nhất, bạn có thể truyền một số màu như thế này và phương thức này sẽ tự động phân tách các màu đó một cách đồng đều, đồng thời pha trộn các màu đó.

.my-element {
    background: linear-gradient(black, white);
}

Bạn cũng có thể truyền một góc hoặc từ khoá đại diện cho một góc. Nếu bạn chọn sử dụng từ khoá, hãy chỉ định một hướng sau từ khoá to. Điều này có nghĩa là nếu muốn có một hiệu ứng chuyển màu đen trắng, chạy từ trái (đen) sang phải (trắng), bạn sẽ chỉ định góc là to right làm đối số đầu tiên.

.my-element {
    background: linear-gradient(to right, black, white);
}

Giá trị điểm dừng màu được xác định là vị trí một màu dừng và kết hợp với các màu lân cận. Đối với một hiệu ứng chuyển màu bắt đầu bằng một sắc thái màu đỏ đậm chạy ở góc 45 độ, với 30% kích thước của hiệu ứng chuyển màu thay đổi thành màu đỏ nhạt hơn: hiệu ứng này sẽ có dạng như sau.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Bạn có thể thêm bao nhiêu màu và điểm dừng màu tuỳ thích trong linear-gradient(), đồng thời có thể xếp chồng các hiệu ứng chuyển màu lên nhau bằng cách phân tách từng hiệu ứng chuyển màu bằng dấu phẩy.

Tô chuyển tiếp dạng hình tròn

Để tạo hiệu ứng chuyển màu tỏa ra theo hình tròn, hàm radial-gradient() sẽ giúp bạn. Phương thức này tương tự như linear-gradient(), nhưng thay vì chỉ định một góc, bạn có thể chỉ định vị trí và hình dạng kết thúc. Nếu bạn chỉ chỉ định màu sắc, radial-gradient() sẽ tự động chọn vị trí là center và chọn một vòng tròn hoặc hình elip, tuỳ thuộc vào kích thước của hộp.

.my-element {
    background: radial-gradient(white, black);
}

Vị trí của độ dốc tương tự như background-position sử dụng từ khoá và/hoặc giá trị số. Kích thước của hiệu ứng chuyển màu dạng hình tròn xác định kích thước của hình dạng kết thúc của hiệu ứng chuyển màu (vòng tròn hoặc hình elip) và theo mặc định sẽ là farthest-corner, nghĩa là hiệu ứng chuyển màu này sẽ khớp chính xác với góc xa nhất của hộp từ tâm. Bạn cũng có thể sử dụng các từ khoá sau:

• closest-corner sẽ gặp góc gần nhất với tâm của độ dốc.
• closest-side sẽ gặp cạnh của hộp gần nhất với tâm của hiệu ứng chuyển màu.
• farthest-side sẽ làm ngược lại với closest-side.

Bạn có thể thêm bao nhiêu điểm dừng màu tuỳ thích, giống như với linear-gradient. Tương tự, bạn cũng có thể thêm bao nhiêu radial-gradients tuỳ thích.

Chuyển màu hình nón

Dải chuyển màu hình nón có một điểm trung tâm trong hộp và bắt đầu từ trên cùng (theo mặc định), rồi đi xung quanh theo hình tròn 360 độ.

.my-element {
    background: conic-gradient(white, black);
}

Hàm conic-gradient() chấp nhận các đối số vị trí và góc.

Theo mặc định, góc là 0 độ, bắt đầu từ trên cùng, ở giữa. Nếu bạn đặt góc thành 45deg, thì đó sẽ là góc trên cùng bên phải. Đối số góc chấp nhận mọi loại giá trị góc, chẳng hạn như độ dốc tuyến tính và bán kính.

Vị trí này là chính giữa theo mặc định. Cũng như với hiệu ứng chuyển màu hình tròn và tuyến tính, vị trí có thể dựa trên từ khoá hoặc được xác định bằng các giá trị số.

Bạn có thể thêm bao nhiêu điểm dừng màu tuỳ thích, giống như với các loại chuyển màu khác. Một trường hợp sử dụng phù hợp cho tính năng này, với hiệu ứng chuyển màu hình nón là kết xuất biểu đồ hình tròn bằng CSS.

Lặp lại và kết hợp

Mỗi loại chuyển màu cũng có một loại lặp lại. Đó là repeating-linear-gradient(), repeating-radial-gradient() và repeating-conic-gradient(). Các hàm này tương tự như hàm không lặp lại và nhận cùng một đối số. Điểm khác biệt là nếu có thể lặp lại hiệu ứng chuyển màu đã xác định để lấp đầy hộp, thì hiệu ứng đó sẽ được lặp lại dựa trên cả hai kích thước của hộp.

Nếu hiệu ứng chuyển màu của bạn có vẻ không lặp lại, thì có thể bạn chưa đặt độ dài cho một trong các điểm dừng màu. Ví dụ: bạn có thể tạo nền sọc bằng repeating-linear-gradient bằng cách đặt độ dài điểm dừng màu.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

Bạn cũng có thể kết hợp các hàm chuyển màu trên các thuộc tính background, cũng như xác định bao nhiêu màu chuyển màu tuỳ thích, giống như khi bạn làm với hình nền. Ví dụ: bạn có thể kết hợp nhiều hiệu ứng chuyển màu tuyến tính với nhau hoặc hai hiệu ứng chuyển màu tuyến tính với hiệu ứng chuyển màu hình tròn.

Tài nguyên

• Conic.css – một bộ sưu tập hữu ích về hiệu ứng chuyển màu hình nón
• Hướng dẫn của MDN về hiệu ứng chuyển màu
• Trình tạo chuyển màu

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về độ dốc