Hiệu ứng chuyển màu

Podcast CSS – 021: Gradients

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ó phần giới thiệu có tiêu đề, phầ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à phần nền có hai sắc thái màu tím như là độ dốc. 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ế để làm việc này, nhưng bạn có thể dùng linear-gradient thay thế.

Độ dốc là một hình ảnh và có thể được sử dụng ở bất kỳ nơi nào hình ảnh có thể được dùng, nhưng tệp này được tạo bằng CSS và được tạo bằng màu sắc, số và góc. Tính năng chuyển màu CSS cho phép bạn tạo bất cứ thứ gì từ một dải 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 độ dốc.

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

linear-gradient() hàm tạo dần một ảnh có hai màu trở lên. Hàm này có nhiều đối số, nhưng với cấu hình đơn giản nhất, bạn có thể chuyển một số màu như thế này và chế độ này sẽ tự động chia đều các màu trong khi phối màu.

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

Bạn cũng có thể chuyển một góc hoặc từ khoá thể hiện một góc. Nếu bạn chọn sử dụng từ khoá, hãy chỉ định hướng sau từ khoá to. Điều này có nghĩa là nếu bạn muốn chuyển màu đen và 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);
}

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

.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(), và bạn có thể xếp lớp tô chuyển tiếp lên nhau bằng cách phân tách từng màu chuyển tiếp bằng dấu phẩy.

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

Để tạo dải chuyển màu theo kiểu vòng tròn, radial-gradient() chức năng vào lúc nào. Nút này tương tự như linear-gradient(), nhưng thay vì chỉ định góc, bạn có thể tuỳ ý chỉ định vị trí và hình dạng kết thúc. Nếu bạn chỉ chỉ định màu, radial-gradient() sẽ tự động chọn vị trí là center và chọn hình 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ải chuyển màu tương tự như background-position khi sử dụng từ khoá và/hoặc giá trị số. Kích thước của dải chuyển màu dạng hình tròn xác định kích thước hình dạng của dải chuyển màu ở phần cuối (hình tròn hoặc hình elip) và theo mặc định sẽ là farthest-corner, có nghĩa là nó tiếp cận chính xác góc xa nhất của hộp tính từ chính giữa. Bạn cũng có thể sử dụng các từ khoá sau:

• closest-corner sẽ tiếp xúc với góc gần nhất với tâm của dải chuyển màu.
• closest-side sẽ tiếp xúc với cạnh của hộp gần tâm nhất của dải chuyển màu.
• farthest-side sẽ thực hiện 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, tương tự 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 dạng hình tròn

Dải chuyển màu hình nón có điểm giữa trong hộp và bắt đầu từ trên cùng (theo mặc định), và di chuyển theo vòng tròn 360 độ.

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

conic-gradient() hàm 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ừ phần trên cùng, chính 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ư chuyển màu tuyến tính và hướng tâm.

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

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

Lặp lại và trộn

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

Nếu độ dốc của bạn có vẻ như không lặp lại, 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 với 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 độ dốc tuỳ thích, giống như cách bạn làm với hình nền. Ví dụ: bạn có thể kết hợp nhiều dải chuyển màu tuyến tính với nhau hoặc hai dải chuyển màu tuyến tính với một dải chuyển màu dạng hình tròn.

Tài nguyên

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

Kiểm tra kiến thức

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