Hướng dẫn linear-gradient trong css đẹp
CSS3 gradient cho phép bạn hiện thị biến đổi liên tục giữa hai hoặc nhiều màu. CSS3 có hai kiểu chuyển đổi màu Show Tạo ra Ví dụ sau, màu xanh và trắng tạo ra gradient biến đổi từ trên xuống dưới.
Ví dụ gradient Có thể thêm nhiều điểm
màu, mỗi màu cách nhau bởi dấu phảy Ví dụ: background: linear-gradient(blue, yellow, green, pink, white); Ví dụ gradient blue, yellow, green, pink, white Các điểm dừng màu có thể chỉ ra không đều cho từng màu khoảng cách tính từ gốc của hướng (theo phần trăm, px, em) Ví dụ: background:linear-gradient(blue 20%, yellow 30%, green 85%); Ví dụ gradient blue 50%, yellow 75%, green 100% Hướng Linear gradientĐể
chỉ ra hướng bạn cần chỉ ra điểm bắt đầu của gradient với các giá trị: Ví dụ tô từ trái qua phải background: linear-gradient(left, blue, green, white); Chrome: background: linear-gradient(left, blue, green, white); Ví dụ gradient left Ví dụ tô từ dưới lên background: linear-gradient(bottom, blue, green, white); Chrome: background: linear-gradient(bottom, blue, green, white); Ví dụ gradient bottom left, right, top, bottom dùng để xác định hướng gradient. Bạn có thể kết hợp vài hướng trong một ví dụ (bottom right biến đổi từ dưới lên đồng thời từ phải sang trái) Góc xác định hướng gradientVí dụ dùng left, right, top, bottom kết hợp để tạo ra các hướng như bottom left tương đương 45 độ Ví dụ tô từ dưới lên background: linear-gradient(bottom left, blue, green, white); Chrome: background: linear-gradient(bottom left, blue, green, white); Ví dụ gradient bottom left Ngoài ra có thể chỉ thắng ra góc chuyển đổi ví dụ 100 độ: background:linear-gradient(100deg, blue, green, white); Ví dụ gradient 100deg repeating-linear-gradientTạo ra các gradient lặp lại bằng hàm: repeating-linear-gradient() Ví dụ: background:-moz-repeating-linear-gradient(blue, green 20px); Ví dụ gradient 100deg Linear Gradientlinear-gradient (gradient tuyến tính) là loại gradient phổ biến nhất mà chúng ta thấy trong thiết kế web là . Nó được gọi là "tuyến tính" vì flow của màu sắc sẽ từ trái sang phải, từ trên xuống dưới hoặc ở bất kỳ góc nào tùy thuộc vào hướng mà mình chọn. Syntax
Một cách để nhớ và hình dung được cách hoạt động của phương thức này
UsageMọi người có thể thấy mình không định nghĩa phần
Radial GradientRadial gradient (gradient xuyên tâm) khác với linear gradient ở chỗ nó bắt đầu tại một điểm duy nhất và phát rộng ra bên ngoài. Các lớp thường được sử dụng để mô phỏng một nguồn sáng. Điều đó làm cho chúng hữu ích để làm cho sự chuyển giao giữa các màu được tự nhiên hơn. Mặc định màu đầu tiên bắt đầu ở vị trí trung tâm của phần tử và sau đó mờ dần sang màu kết thúc về hướng về phía rìa của phần tử. Sự mờ dần xảy ra ở một tỷ lệ bằng nhau bất kể phương hướng. SyntaxTương tự như linear-gradient,
Cho dễ gợi nhớ
Usage
Bằng việc
không khai báo các giá trị Ngoài ra có thể thay vị trí điểm trung tâm
Conic GradientConic gradient (gradient hình nón) tương tự như một radial gradient. Cả hai đều là hình tròn và sử dụng tâm của phần tử làm điểm nguồn cho các điểm màu. Tuy nhiên, khác với cái dải màu của radial gradient xuất phát từ tâm vòng tròn, conic gradient sắp xếp dải màu xung quanh vòng tròn. Gọi là "hình nón" vì nhìn từ trên cao xuống xu hướng trông giống hình dạng của một chiếc nón. Syntax
Vị trí của gradient bắt đầu ở chính giữa của phần tử (50% 50%) và được phân bố đồng đều giữa các giá trị màu trắng và đen. Lợi dụng sự đơn giản này để tạo color palette trong các tool color picker
Hay tạo 1 cái pie chart chỉ với 1 dòng css Referenceshttps://css-tricks.com/snippets/css/css-linear-gradient/ https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient https://css-tricks.com/snippets/css/css-radial-gradient/ https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient https://css-tricks.com/snippets/css/css-conic-gradient/ https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient |