CSS Gradient – Cách sử dụng thuộc tính Gradient trong CSS

CSS Gradient là một phương pháp sử dụng trong CSS để tạo hiệu ứng chuyển đổi màu sắc mượt mà giữa hai hoặc nhiều màu được chỉ định trước. Bằng cách sử dụng CSS Gradient, bạn có thể tạo các hiệu ứng màu sắc độc đáo cho các phần tử trên trang web của mình, không cần sử dụng các hình ảnh hoặc tệp tải xuống khác.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

Trong bài viết này, chúng ta sẽ đi sâu vào khái niệm về CSS Gradient và cách sử dụng nó để tạo các hiệu ứng chuyển đổi màu sắc đẹp mắt trên trang web của bạn.

CSS Gradient là gì ?

Các lý do sử dụng CSS Gradient:

• Không cần sử dụng hình ảnh để hiển thị các hiệu ứng chuyển đổi màu sắc.
• Có thể giảm thời gian tải xuống và sử dụng băng thông.
• Tạo nên hiệu ứng tốt hơn cho phần tử khi phóng to, vì gradient được tạo ra bởi trình duyệt.

Có hai loại gradient trong CSS3: Linear gradients và Radial gradients.

Hướng dẫn CSS Gradient

CSS Gradient là một tính năng CSS cho phép bạn tạo ra các chuyển đổi màu sắc mượt mà giữa hai hoặc nhiều màu sắc. Gradients có thể được sử dụng để tạo ra các hiệu ứng thú vị và sáng tạo cho các trang web của bạn.

Có hai loại gradient CSS:

• Linear gradients: Gradients tuyến tính bắt đầu ở một điểm và kết thúc ở điểm khác.
• Radial gradients: Gradients hình tròn bắt đầu ở một điểm và lan ra thành một hình tròn.

Để tạo ra một gradient CSS, bạn cần sử dụng thuộc tính background-image. Thuộc tính này xác định hình ảnh nền của một phần tử.

1) CSS Linear Gradient

CSS3 linear gradient có thể dùng để tạo các gradient đi lên/xuống/trái/phải và theo đường chéo. Để tạo một CSS3 linear gradient, bạn phải xác định hai hoặc nhiều điểm dừng màu sắc. Các điểm dừng được sử dụng để tạo ra sự chuyển đổi mượt mà giữa các màu sắc.

Cũng có thể thêm điểm bắt đầu và hướng để tạo ra hiệu ứng gradient.

(i) CSS Linear Gradient: (Từ trên xuống)

Linear Gradient từ trên xuống là loại gradient theo mặc định. Ví dụ sau đây minh họa cho một linear gradient bắt đầu từ phía trên và chuyển sang màu xanh lá cây:

background-image: linear-gradient(to bottom, red, green);

(ii) CSS Linear Gradient: (Từ trái qua phải)

Ví dụ sau đây hiển thị một linear gradient bắt đầu từ phía trái và chuyển sang màu xanh lá cây:

background-image: linear-gradient(to right, red, green);

(iii) CSS Linear Gradient: (Theo đường chéo)

Nếu bạn chỉ định vị trí khởi đầu ngang và dọc, bạn có thể tạo ra một linear gradient theo đường chéo:

background-image: linear-gradient(to bottom right, red, green);

2) CSS Radial Gradient

Để tạo một radial gradient, bạn phải xác định ít nhất hai điểm dừng màu sắc. Nó được xác định bởi tâm của nó.

(i) CSS Radial Gradient: (Các điểm dừng màu đều nhau)

Các điểm dừng màu được đặt cách đều nhau là loại radial gradient theo mặc định. Hình dạng mặc định của nó là hình elip, kích thước là góc rộng nhất và vị trí là trung tâm.

background-image: radial-gradient(red, yellow, green);

(ii) Radial Gradient: (Các điểm dừng màu không đều nhau)

background-image: radial gradient(closest-side at 45deg, red, green);

Ví dụ sử dụng CSS Gradient

Bạn có thể sử dụng thuộc tính color-stops để thêm các điểm dừng màu vào gradient của mình. Điểm dừng màu xác định màu sắc và vị trí của một điểm trong gradient. Dưới đây là một ví dụ về cách tạo ra một gradient tuyến tính:

div {
  background-image: linear-gradient(red, blue);
}

Ví dụ này sẽ tạo ra một gradient tuyến tính bắt đầu bằng màu đỏ và kết thúc bằng màu xanh lam.

Dưới đây là một ví dụ về cách xác định hướng của một gradient tuyến tính:

div {
  background-image: linear-gradient(red, blue, 45deg);
}

Ví dụ này sẽ tạo ra một gradient tuyến tính bắt đầu bằng màu đỏ, chuyển sang màu xanh lam và kết thúc bằng màu xanh lá cây ở góc 45 độ.

Bạn có thể sử dụng thuộc tính shape để xác định hình dạng của gradient hình tròn.

Dưới đây là một ví dụ về cách xác định hình dạng của một gradient hình tròn:

div {
  background-image: radial-gradient(circle, red, blue);
}

Ví dụ này sẽ tạo ra một gradient hình tròn bắt đầu bằng màu đỏ và kết thúc bằng màu xanh lam.

Bạn có thể sử dụng thuộc tính size để xác định kích thước của gradient hình tròn.

Dưới đây là một ví dụ về cách xác định kích thước của một gradient hình tròn:

div {
  background-image: radial-gradient(circle, red, blue, 50% 50%);
}

Ví dụ này sẽ tạo ra một gradient hình tròn bắt đầu bằng màu đỏ và kết thúc bằng màu xanh lam, với tâm của gradient ở 50% theo chiều ngang và 50% theo chiều dọc của phần tử.

Bạn có thể sử dụng thuộc tính position để xác định vị trí của gradient hình tròn.

Dưới đây là một ví dụ về cách xác định vị trí của một gradient hình tròn:

div {
  background-image: radial-gradient(circle, red, blue, 50% 50% 50deg);
}

Ví dụ này sẽ tạo ra một gradient hình tròn bắt đầu bằng màu đỏ và kết thúc bằng màu xanh lam, với tâm của gradient ở 50% theo chiều ngang và 50% theo chiều dọc của phần tử, và góc 50 độ.

Ưu và Nhược điểm CSS Gradient

Ưu điểm của CSS Gradient:

• Tạo ra các hiệu ứng màu sắc độc đáo và thu hút khách hàng.
• Giảm thời gian tải xuống và sử dụng băng thông trên trang web.
• Điều khiển được các yếu tố gradient như màu sắc, vị trí, hướng, kích thước,…

Nhược điểm của CSS Gradient:

• Có thể khó khăn trong việc xây dựng và chỉnh sửa các hiệu ứng gradient phức tạp.
• Không được hỗ trợ hoàn toàn trên một số phiên bản cũ của trình duyệt.

Lời khuyên CSS Gradient

Khi sử dụng CSS Gradient, bạn nên:

• Sử dụng gradient để tạo ra các hiệu ứng màu sắc độc đáo cho trang web của mình.
• Xây dựng gradient theo cách tối ưu để giảm thiểu thời gian tải trang.
• Đảm bảo rằng gradient được hỗ trợ trên các trình duyệt khác nhau bằng cách kiểm tra bảng định danh hỗ trợ gradient.