Linear-gradient trong css
|
Cũng giống như bạn có thể khai báo nền của một phần tử là một màu đồng nhất trong CSS, bạn cũng có thể khai báo nền đó là một gradient. Sử dụng gradient được khai báo trong CSS, thay vì sử dụng tệp hình ảnh thực tế, sẽ tốt hơn cho việc kiểm tra giám sát và hiệu suất Show Chuyển màu thường là một màu mờ dần dần thành một màu khác, nhưng trong CSS, bạn có thể kiểm soát mọi khía cạnh của những điều xảy ra, từ hướng đến màu sắc (bao nhiêu tùy chọn) đến nơi những thay đổi màu sắc xảy ra . Please same through all Các bài viết liên quan
Tóm tắt nội dung Gradients is hinh nềnTrong khi khai báo một màu đồng nhất sử dụng thuộc tính background-color trong CSS, gradient sử dụng background-image. Điều này hữu ích theo một số cách mà chúng ta sẽ đề cập đến sau. Thuộc tính của tốc ký sẽ biết ý bạn nếu bạn khai báo cái này hay cái kia .gradient {
/* màu background đỏ */
background-color: red;
/* sử dụng bacground linear-gradient */
background-image: linear-gradient(red, orange);
/* background */
background: red;
background: linear-gradient(red, orange);
}Xem thêm 10 Brush Gradient tốt nhất cho Procreate Độ dốc tuyến tính Linear Gradient là thuộc tính CSS tạo ra một image là kết quả của sự chuyển đổi liên tục giữa hai hay nhiều màu sắc theo dạng đường thẳng. Kết quả của quá trình này là một kiểu dữ liệu Có thể loại gradient phổ biến và hữu ích nhất là linear-gradient (). Chuyển sắc “tuyến tính” có thể đi từ trái sang phải, từ trên xuống dưới hoặc ở bất kỳ góc độ nào bạn đã chọn Không khai báo một góc sẽ giả sử dụng từ trên xuống dưới div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
red, #f06d06
);
}Các màu được phân tách bằng dấu phẩy có thể là loại màu mà bạn thường sử dụng. Hex, các màu được đặt tên, rgba, hsla, v. v Xem thêm CSS là gì? Để làm cho nó từ trái sang phải, bạn chuyển một tham số bổ sung vào đầu của hàm linear-gradient () bắt đầu bằng từ “đến”, cho biết hướng, giả hạn như “sang phải” div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
red, #f06d06
);
}
Cú pháp “đến” này cũng hoạt động cho các góc. Ví dụ. nếu bạn muốn dòng của gradient bắt đầu ở góc dưới cùng bên trái và chuyển đến góc trên cùng bên phải, bạn có thể nói “mở trên cùng bên phải” div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to top right,
red, #f06d06
);
}Nếu hộp đó là hình vuông, góc của độ dốc đó sẽ là 45 °, nhưng vì nó không phải nên không phải như vậy. Nếu bạn muốn chắc chắn rằng nó là 45°, bạn có thể tuyên bố rằng .gradient {
background-image:
linear-gradient(
45deg,
red, #f06d06
);
}Bạn cũng không bị giới hạn chỉ với hai màu. Trên thực tế, bạn có thể có nhiều màu được phân tách bằng tùy chọn ủy nhiệm. Đây là một trong bốn .gradient {
background-image:
linear-gradient(
to right,
red,
#f06d06,
rgb(255, 255, 0),
green
);
}Bạn cũng có thể khai báo nơi bạn muốn bất kỳ màu cụ thể nào có thể “bắt đầu”. Chúng được gọi là “điểm dừng màu”. Giả sử bạn muốn màu vàng chiếm phần lớn không gian, nhưng ban đầu chỉ có một chút màu đỏ, bạn có thể khiến màu vàng dừng lại khá sớm ________số 8_______ Chúng ta có xu hướng nghĩ về gradient là màu nhạt dần, nhưng nếu bạn có hai điểm dừng màu giống nhau, bạn có thể làm cho một màu đồng nhất ngay lập tức thay đổi thành một màu đồng nhất khác. Điều này có thể hữu ích để khai báo nền có chiều cao đầy đủ mô phỏng các cột div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
#fffdc2,
#fffdc2 15%,
#d7f0a2 15%,
#d7f0a2 85%,
#fffdc2 85%
);
}Xem thêm Kiểm tra lỗi bảo mật CSS Injection Hỗ trợ duyệt / Tiền tốCho đến bây giờ chúng ta mới chỉ xem xét cú pháp mới, nhưng CSS gradient đã xuất hiện một thời gian. Trình duyệt support is good. Nơi mà nó trở nên phức tạp là cú pháp và tiền tố. Có ba cú pháp khác nhau mà các trình duyệt đã hỗ trợ. Đây không phải là tên gọi chính thức của họ, nhưng bạn có thể nghĩ về nó như
Có một số chồng chéo trong đó. Ví dụ. when a browser hỗ trợ cú pháp mới, chúng tôi cũng có thể hỗ trợ cú pháp cũ hơn, bao gồm cả tiền tố. Cách tốt nhất là. if it support New, please used New Vì vậy, nếu bạn muốn hỗ trợ trình duyệt sâu nhất có thể, một gradient tuyến tính có thể trông như thế này 0 Đó là rất nhiều Code ở đó. Làm bằng tay sẽ dễ xảy ra sai sót và tốn nhiều công sức. Autoprefixer làm rất tốt với nó, cho phép bạn cắt giảm lượng mã để quay trở lại khi bạn quyết định những trình duyệt nào sẽ hỗ trợ Mixin La bàn có thể thực thi URI dữ liệu SVG cho IE 9 nếu điều đó quan trọng với bạn Xem thêm Xử lý và sử dụng chuỗi trong ngôn ngữ SAS Để làm phức tạp mọi thứ thêm một chút, cách thức hoạt động của các tốc độ trong cú pháp Old và New có một chút khác biệt. Cách Cũ(và TWEENER – thường có tiền tố) xác định 0deg và từ trái sang phải và tiến hành ngược chiều kim đồng hồ, trong khi Cách mới(thường không có tiền tố) xác định 0deg là từ dưới lên và tiến hành Ví dụ OLD (hoặc TWEENER) = (450 – new) % 360 MỚI = 90 – CŨ Độ dốc tuyến tính OLD (135deg, đỏ, xanh dương) bộ lọc IEInternet Explorer (IE) 6-9, mặc dù chúng không hỗ trợ cú pháp CSS gradient, nhưng cung cấp một cách thiết lập trình để thực hiện nền gradient 1 Có một số cân nhắc ở đây khi quyết định sử dụng cái này hay không
Mặc dù các bộ lọc chỉ hoạt động với các giá trị hex, nhưng bạn vẫn có thể có được độ trong suốt alpha bằng cách đặt trước giá trị hex với lượng trong suốt từ 00 (0%) đến FF (100%) Thí dụ rgba(92,47,90,1) == #FF5C2F5A Độ dốc xuyên tâmRadial Gradient khác với tuyến tính ở vị trí chúng bắt đầu tại một điểm duy nhất và phát ra bên ngoài. Các gradient thường được sử dụng để mô phỏng ánh sáng, như chúng ta biết không phải lúc nào cũng thẳng, vì vậy chúng có thể hữu ích để làm cho gradient có vẻ tự nhiên hơn Mặc định là màu đầu tiên bắt đầu ở (chính giữa) của phần tử và mờ dần đến màu cuối bên cạnh của phần tử. Sự cố phát triển với tốc độ khác nhau bất kể hướng nào 2 Bạn có thể thấy cách gradient đó tạo ra một hình elip, vì phần tử không phải là một hình vuông. Đó là mặc định (hình elip, là tham số đầu tiên), nhưng nếu chúng ta nói rằng chúng ta muốn một hình tròn, chúng ta có thể buộc nó phải như vậy 3 Lưu ý rằng gradient là hình tròn, nhưng chỉ làm mờ các màu cuối cùng theo chiều dọc gần nhất. Nếu chúng tôi muốn xoay vòng đó hoàn toàn trong phần tử, chúng tôi có thể chắc chắn rằng bằng cách nào đó chúng tôi muốn phần Mờ phát triển kết thúc bởi “cạnh gần nhất” dưới dạng giá trị được phân tách bằng dấu cách. 4 Các giá trị có thể có ở đó là. góc gần nhất, góc gần nhất, góc xa nhất, phía xa nhất. Bạn có thể nghĩ về nó như. “Tôi muốn gradient xuyên tâm này Làm mờ dần từ điểm trung tâm đến __________ và ở mọi nơi khác sẽ đầy đủ để phù hợp với điều đó. ” Gradient xuyên tâm không nhất thiết phải bắt đầu ở tâm mặc định, bạn có thể chỉ định một điểm nhất định bằng cách sử dụng “at ______” như một phần của tham số đầu tiên, như Tôi sẽ làm cho nó rõ ràng hơn ở đây bằng cách làm cho ví dụ về hình chữ nhật và điều chỉnh màu sắc của điểm dừng 5 Hỗ trợ của trình duyệt cho gradient xuyên tâm phần lớn giống như linear-gradient (), ngoại trừ một phiên bản Opera rất cũ, ngay khi chúng bắt đầu Hỗ trợ gradient, chỉ có tuyến tính chứ không phải hướng tâm Nhưng tương tự như tính toán tuyến tính, radial-gradient () đã trải qua một số thay đổi về cú pháp. Back there. “Cũ”, “Tweener” và “Mới” 6 Các dấu hiệu nhận biết là
Một lần nữa, tôi sẽ để Trình chỉnh sửa lỗi tự động xử lý công việc này. Bạn viết theo cú pháp mới nhất, nó thực hiện dự án phòng. Các gradient xuyên tâm có nhiều tâm trí hơn là tuyến tính, vì vậy tôi khuyên bạn nên cố gắng làm quen với cú pháp mới nhất và tiếp tục với điều đó (và nếu cần, hãy quên những gì bạn biết về cú pháp cũ Độ dốc hình nónMột hình nón gradient tương tự như một radial gradient. Cả hai đều là sử dụng hình tròn và sử dụng tâm của các phần tử làm nguồn điểm cho các điểm dừng màu. Tuy nhiên, khi màu dừng của một hình tròn gradient xuất hiện từ vị trí tâm của hình tròn, một hình nón gradient sẽ đặt chúng xung quanh hình tròn Minh họa sự khác biệt giữa gradient Conic (trái) và Radial (phải) Chúng được gọi là “hình nón” bởi vì chúng có xu hướng trông giống như hình dạng của một chiếc nón được nhìn từ trên xuống dưới. Chà, ít nhất là khi có một góc phân biệt riêng được cung cấp và mức độ tương phản giữa các giá trị màu đủ lớn để tạo ra sự khác biệt Cú pháp gradient hình nón dễ hiểu hơn bằng tiếng Anh đơn giản Tạo một gradient hình nón nằm ở [một số điểm] bắt đầu với [một màu] ở một số góc và kết thúc bằng [một màu khác] ở [một số góc] Ở cấp độ cơ bản nhất, nó trông giống như sau 7 … Trong đó giả định rằng vị trí của gradient bắt đầu ở chính giữa các phần tử (50% 50%) và được phân phối đồng đều giữa các giá trị màu trắng và đen Chúng tôi có thể viết điều này theo một số cách khác, tất cả đều hợp lệ 8 Nếu chúng ta không chỉ định góc cho các màu, thì giả sử rằng gradient được chia đều giữa các màu, bắt đầu ở 0deg và kết thúc ở 360deg. Loại đó tạo ra một điểm dừng cố định trong đó các màu sắc tương phản với nhau ở 0deg và 360deg. Nếu màu sắc bắt đầu của chúng ta bắt đầu ở một nơi khác trên vòng tròn, hãy nói một phần tư duy đường ở 90 độ, sau đó điều đó tạo ra một gradient mượt mà hơn và chúng ta bắt đầu được phân phối cảnh hình thú 9 Chúng ta có thể vui chơi với những chiếc nón hình gradient. Đối với các ví dụ, chúng tôi có thể sử dụng nó để tạo ra cùng một loại mẫu mà bạn có thể tìm thấy trong công cụ chọn màu hoặc chỉ báo kết quả bóng bãi biển đang quay nổi tiếng của Mac div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
red, #f06d06
);
}0Hoặc, hãy thử một biểu tượng hình tròn đơn giản bằng cách bổ sung các điểm dừng định giữa ba giá trị màu div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
red, #f06d06
);
}1Một mô hình minh họa một chiếc nón gradient mô phỏng một biểu tượng hình tròn ba màu đơn giản Conic Gradiant support browser Lặp lại GradientVới ngày duyệt chương trình càng ít hỗ trợ càng lặp lại các gradient. Chúng có cả dạng tuyến tính và dạng xuyên tâm Có một mẹo, với các gradient không lặp lại, để tạo gradient theo cách mà nếu nó là một hình chữ nhật nhỏ, nó sẽ xếp hàng với các phiên bản hình chữ nhật nhỏ khác của chính nó để tạo ra một mẫu lặp lại. Vì vậy, về cơ bản tạo độ dốc đó và thiết lập kích thước nền để tạo ra hình chữ nhật nhỏ đó. Điều đó giúp bạn dễ dàng tạo ra các đường trượt, sau đó bạn có thể xoay hoặc bất cứ thứ gì div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
red, #f06d06
);
}2Với epating-linear-gradient(), bạn không cần phải sử dụng đến thủ thuật đó. Kích thước của gradient được xác định bởi điểm dừng cuối cùng của màu. Nếu đó là 20px, kích thước của gradient (sau đó Lặp lại) là một hình vuông 20px x 20px |
