Trong bài viết này, FUNiX sẽ giới thiệu các ví dụ về gradient nền khác nhau để tạo cảm hứng cho thiết kế CSS tiếp theo của bạn.
Tạo màu nền gradient bằng CSS
CSS gradient là sự chuyển đổi mượt mà giữa hai hoặc nhiều màu sắc khác nhau. CSS gradient cung cấp khả năng kiểm soát và hiệu quả tốt hơn so với việc sử dụng tệp hình ảnh màu gradient thực tế (mà bạn có thể tạo ra với một công cụ như Adobe Illustrator). Thuộc tính CSS background-image được dùng để khai báo các gradient làm nền.
Có ba loại gradient: linear (được tạo bằng hàm linear-gradient()), radial (được tạo bằng hàm radial-gradient()) và conic (được tạo bằng hàm conic-gradient()). Ngoài ra, bạn có thể tạo các gradient lặp lại với các hàm repeating-linear-gradient(), repeating-radial-gradient() và repeating-conic-gradient()
MDN Docs định nghĩa các hàm này như sau:
linear-gradient(): tạo ra một hình ảnh có sự chuyển đổi liên tục giữa hai hoặc nhiều màu dọc theo một đường thẳng (tuyến tính). Kết quả của nó là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt.
radial-gradient(): tạo ra một hình ảnh bao gồm sự chuyển đổi liên tục giữa hai hoặc nhiều màu sắc tỏa ra từ một điểm gốc. Kết quả của hàm là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt.
conic-gradient(): tạo ra một hình ảnh bao gồm một gradient với các chuyển đổi màu xoay quanh một điểm trung tâm (thay vì tỏa ra từ trung tâm). Ví dụ về conic gradient bao gồm biểu đồ hình tròn và bánh xe màu. Kết quả của hàm conic-gradient() là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt.
repeat-linear-gradient(): tạo ra một hình ảnh bao gồm các gradient tuyến tính lặp lại. Nó cũng tương tự như gradient/linear-gradient() và lấy các đối số giống nhau, nhưng nó lặp lại color-stop vô hạn theo mọi hướng để bao phủ toàn bộ container của nó. Kết quả của hàm là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt .
repeat-radial-gradient(): tạo ra một hình ảnh bao gồm các gradient lặp lại tỏa ra từ một điểm gốc. Nó tương tự như gradient / radial-gradient () và lấy các đối số giống nhau, nhưng nó lặp lại color-stop vô hạn theo mọi hướng để bao phủ toàn bộ container của nó, tương tự như gradient/repeat-linear-gradient (). Kết quả của hàm là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt .
repeat-conic-gradient(): tạo ra một hình ảnh bao gồm một gradient lặp lại (thay vì một gradient đơn lẻ) với các chuyển đổi màu được xoay quanh một điểm trung tâm (thay vì tỏa ra từ trung tâm).
Dưới đây là cú pháp chính thức của từng loại gradient.
>>> Đọc ngay: Hướng dẫn cơ bản về CSS cho người mới bắt đầu
Cú pháp chính thức của Linear Gradient
linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]Cú pháp chính thức của Radial Gradient
radial-gradient(
[ <ending-shape> || <size> ]? [ at <position> ]? ,
<color-stop-list>
);Cú pháp chính thức của Conic Gradients
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)Dưới đây là một số ví dụ màu nền gradient tuyệt vời có thể nâng tầm giao diện người dùng trang web của bạn lên cấp độ mới.
1. Cỏ bụi
CSS để tạo gradient ở trên:
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);2. Màu cát sang xanh lam
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #DECBA4, #3E5151);3. Amin
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #8e2de2, #4a00e0);4. Màu đỏ thư giãn
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #fffbd5, #b20a2c);5. Ánh sáng siêu phàm
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #fc5c7d, #6a82fb);6. Megatron
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);7. Mâm xôi xanh
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #00b4db, #0083b0);>>> Đọc ngay: 3 phương pháp căn giữa hình ảnh với CSS dễ dàng
8. Sự căng thẳng
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #870000, #190a05);9. Xoài vàng
CSS để tạo gradient ở trên:
background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);10. Cá diêu hồng
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));11. Chúa tể biển cả
CSS để tạo gradient ở trên:
background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );12. Hoa anh đào
CSS để tạo gradient ở trên:
background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);13. Không khí trong lành
CSS để tạo gradient ở trên:
background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );
14. Kye Meh
background-image: linear-gradient(to right, #8360c3, #2ebf91);
>>> Xem thêm: Cách sử dụng CSS text-shadow: 11 Thủ thuật và Ví dụ
15. Bóng tối
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #434343 0%, black 100%);16. Kết tinh
CSS để tạo gradient ở trên:
background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);17. Lawrenci
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);18. Ohhappiness
CSS để tạo gradient ở trên:
background-image: linear-gradient(to right, #00b09b, #96c93d);19. Cỏ
CSS để tạo gradient ở trên:
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );Làm đẹp trang web của bạn với Gradients
Bạn có thể sử dụng gradient với một số element của trang web như nền, đường viền, biểu tượng, nút, văn bản, gạch dưới, dấu đầu dòng danh sách, v.v. Nâng thiết kế trang web của bạn lên một tầm cao mới với gradient!
>>> Nếu bạn đang có nhu cầu tìm hiểu về khóa học lập trình đi làm ngay. Hãy liên hệ với FUNiX ngay tại đây:
>>> Xem thêm chuỗi bài viết liên quan:
10 ví dụ mã CSS mà bạn có thể học trong 10 phút
Cách tạo Mẫu F và Z bằng HTML và CSS
8 mẹo và thủ thuật CSS mọi lập trình viên nên biết
10 mẫu nền CSS bạn có thể sử dụng trên trang web của mình
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/css-background-gradients/
Bình luận (0
)