Hiệu ứng chuyển màu

Podcast CSS – 021: Chuyển màu

Hãy tưởng tượng bạn có một trang web để xây dựng và ở trên cùng, có phần giới thiệu với tiêu đề, phần tóm tắt và nút. Nhà thiết kế đã chuyể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 độ màu tím dưới dạng chuyển màu. Bạn sẽ làm việc này bằng cách nào?

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

Dải chuyển màu là một hình ảnh và có thể được sử dụng ở bất kỳ nơi nào, nhưng hình ảnh được tạo bằng CSS và được tạo thành từ các màu sắc, số và góc. Tính năng chuyển màu CSS cho phép bạn tạo mọi thứ từ chế độ chuyển màu mượt mà giữa hai màu, cho đến hình minh hoạ ấn tượng bằng cách trộn và lặp lại nhiều chế độ chuyển màu.

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

Hàm linear-gradient() sẽ tạo dần dần một hình ảnh gồm hai màu trở lên. Phương thức này có nhiều đối số, nhưng ở 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à màu sẽ tự động chia đều trong khi kết hợp.

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

Bạn cũng có thể truyền góc hoặc các từ khoá đại diện cho 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. Tức là nếu muốn có hiệu ứng chuyển màu đen trắng, chạy từ trái (đen) sang phải (trắng), bạn cần 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ị dừng màu được xác định khi một màu dừng và kết hợp với các màu lân cận. Để một hiệu ứng chuyển màu bắt đầu bằng màu đỏ đậm chạy ở góc 45 độ, với 30% kích thước của hiệu ứng chuyển màu sẽ chuyển sang màu đỏ nhạt hơn: 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 lớp chuyển màu 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 hiệu ứng chuyển màu toả dần theo kiểu hình tròn, hàm radial-gradient() sẽ hỗ trợ bạn. Phương thức này tương tự như linear-gradient(), nhưng thay vì chỉ định góc, bạn có thể chỉ định vị trí và hình dạng kết thúc nếu muốn. Nếu bạn chỉ chỉ định màu, radial-gradient() sẽ tự động chọn vị trí là center và chọn một 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 hiệu ứng 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 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 (hình tròn hoặc hình elip) và theo mặc định sẽ là farthest-corner, tức là đáp ứng chính xác góc xa nhất của hộp tính 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 hiệu ứng chuyển màu.
• closest-side sẽ gặp cạnh của hộp gần tâm nhất 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

Tính năng chuyển màu dạng hình nón có một điểm giữa trong hộp của bạn và bắt đầu từ trên cùng (theo mặc định) và đi xung quanh theo vòng 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 ở trên cùng, ở chính giữa. Nếu bạn đặt góc thành 45deg, thì góc này 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à chuyển màu xuyên tâm.

Theo mặc định, vị trí này được đặt ở giữa. Giống như chuyển màu dạng hình tròn và tuyến tính, vị trí 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 tùy 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 tính năng chuyển màu dạng 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 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ư các hàm không lặp lại và dùng cùng một đối số. Điểm khác biệt là nếu bạn có thể lặp lại chế độ chuyển màu đã xác định để lấp đầy hộp, dựa trên cả hai kích thước của chúng, thì chế độ này sẽ được áp dụng.

Nếu hiệu ứng chuyển màu có vẻ như không lặp lại, thì có thể bạn chưa đặt độ dài cho một trong các màu sẽ dừng. Ví dụ: bạn có thể tạo nền có 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 thuộc tính background, cũng như xác định số lượng màu chuyển tiếp (gradient) tuỳ thích, giống như cách bạn thực hiện với hình nền. Ví dụ: bạn có thể kết hợp nhiều màu chuyển tiếp tuyến tính với nhau hoặc hai màu chuyển tiếp tuyến tính với một màu chuyển tiếp dạng hình tròn.

Tài nguyên

• Conic.css - một bộ sưu tập các màu chuyển tiếp hình nón hữu ích
• Hướng dẫn về màu chuyển tiếp (MDN)
• Trình tạo chuyển màu

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về màu chuyển tiếp