Tỷ lệ phần trăm trong CSS gradient tuyến tính là gì?

Phạm vi

Trong bài viết này, chúng ta sẽ tìm hiểu về những điều sau đây-

• Chúng ta sẽ bắt đầu với phần giới thiệu ngắn gọn về Gradients
• Sau đó, chúng ta sẽ tìm hiểu chi tiết về hàm linear-gradient, cách sử dụng và cú pháp của nó
• Thành phần của hàm linear-gradient- hộp gradient, đường gradient và góc gradient đã được giải thích
• Chúng ta cũng sẽ thảo luận về các giá trị khác nhau mà hàm gradient tuyến tính có thể nhận.

Giới thiệu

Chuyển màu về cơ bản là sự chuyển đổi màu trong đó một khu vực thay đổi từ màu này sang màu khác. Đây là hai loại--

• Độ dốc tuyến tính
• độ dốc xuyên tâm

Độ dốc tuyến tính thay đổi màu theo kiểu tuyến tính, trong khi độ dốc xuyên tâm thay đổi màu theo kiểu xuyên tâm

Linear Gradient CSS hiển thị chuyển tiếp mượt mà giữa hai hoặc nhiều màu dọc theo một đường thẳng. Nó hiển thị sự chuyển tiếp của các màu sắc khác nhau làm cho trang web của chúng tôi hấp dẫn hơn. Do đó, chúng tôi sử dụng dải màu tuyến tính trong đó các màu chạy theo một hướng duy nhất từ ​​trái sang phải, trên xuống dưới hoặc theo bất kỳ góc độ nào do người dùng chỉ định

Hàm CSS linear-gradient()

Hàm linear-gradient() là một hàm có sẵn trong CSS để đặt CSS gradient tuyến tính làm hình nền. Hàm linear-gradient() tạo một hình ảnh hiển thị quá trình chuyển đổi ở dạng hai hoặc nhiều màu dọc theo một đường thẳng

Về cơ bản, độ dốc CSS được thể hiện bằng kiểu dữ liệu, đây là một loại hình ảnh đặc biệt. Do đó, hàm linear-gradient() dẫn đến một đối tượng có kiểu. Chức năng này có thể được sử dụng ở bất cứ nơi nào bạn sẽ sử dụng hình ảnh, chẳng hạn như nền, vì độ dốc được tạo động nên có thể sử dụng chúng thay cho hình ảnh raster truyền thống mang lại hiệu ứng tương tự. Hơn nữa, độ dốc được tạo bởi chính trình duyệt, vì vậy chúng trông đẹp hơn hình ảnh raster khi phóng to

Định nghĩa và cách sử dụng

Hàm linear-gradient() đặt độ dốc tuyến tính, chuyển tiếp giữa các màu dọc theo một đường thẳng làm hình nền. Chúng tôi có thể chỉ định hai hoặc nhiều màu để hiển thị quá trình chuyển đổi giữa chúng

Để tạo dải màu tuyến tính, bạn nên chỉ định ít nhất hai màu. Đây là những màu mà bạn muốn chuyển tiếp. Bạn cũng có thể nêu hướng thay đổi màu sắc sẽ xảy ra. Tuy nhiên, hướng mặc định là 180 độ hoặc từ trên xuống dưới

Thành phần của gradient tuyến tính

Độ dốc tuyến tính bao gồm-

1. Hộp chuyển màu - Một hình ảnh chuyển màu có kích thước vô hạn, không giống như các hình nền khác. Thứ mang lại kích thước có thể nhìn thấy cho dải màu là hộp dải màu là khu vực mà nó được hiển thị, tôi. e. , xung quanh bất kỳ phần tử HTML nào. Khi chúng tôi áp dụng một gradient tuyến tính cho bất kỳ phần tử Html nào, khu vực đó là hộp viền cho phần tử đó, chính là khu vực sẽ được lấy bởi bất kỳ hình nền nào trừ khi bạn thay đổi kích thước bằng các thuộc tính CSS khác

Tuy nhiên, chúng ta có thể đặt kích thước của hộp gradient bằng cách sử dụng thuộc tính kích thước nền của CSS, sau đó hộp gradient sẽ được thay đổi kích thước và sẽ được đặt ở góc trên cùng bên trái của phần tử DOM theo mặc định

2. Đường chuyển sắc - Một chuyển sắc tuyến tính được xác định bởi một trục được gọi là đường chuyển sắc. Các màu tạo ra độ dốc được đặt trên đường dốc này. Đường này có thể là dọc, ngang, chéo hoặc ở bất kỳ góc nào, như bạn sẽ chỉ định trong hàm linear-gradient

Màu sắc của dải màu được xác định bởi hai hoặc nhiều điểm, điểm bắt đầu, điểm kết thúc và các điểm tùy chọn khác. Các màu bạn chỉ định sẽ bắt đầu ở điểm bắt đầu và kết thúc ở điểm kết thúc. Các điểm tùy chọn khác được trải trên đường dốc giữa điểm bắt đầu và điểm kết thúc

3. Góc chuyển màu - Góc chuyển màu được sử dụng để xác định hướng của chuyển màu đối với đường chuyển màu. Góc chuyển màu là góc giữa đường chuyển màu và đường thẳng đứng đi qua tâm hộp chuyển màu

Góc này có thể được xác định bằng cách chỉ định góc có đơn vị hoặc sử dụng một trong các từ khóa như trên cùng, dưới cùng, bên phải, bên trái, trên cùng bên phải, v.v. Tuy nhiên, nếu không có góc nào được chỉ định, thì theo mặc định, nó sẽ chạm đáy (180 độ hoặc 0. 5 lượt)

cú pháp

background : linear-gradient(`[` `| to ``]`` , )
Hàm linear-gradient() có thể được sử dụng với thuộc tính background hoặc thuộc tính background-image của CSS
giá trị
-Đó là góc định hướng của đường chuyển sắc so với đường thẳng đứng đi qua tâm hộp chuyển sắc. Giá trị của 0deg tương ứng với 'to top'; . Tuy nhiên, nó là một lĩnh vực tùy chọn. Theo mặc định, giá trị của nó là 180 độ



- Điều này cho biết vị trí của điểm bắt đầu của đường dốc. Nó bao gồm từ 'đến', theo sau là hai từ khóa - một để mô tả mặt thẳng đứng (trên hoặc dưới) và từ còn lại để chỉ mặt ngang (trái hoặc phải)
Tuy nhiên, thứ tự của các từ khóa không quan trọng. Nếu giá trị của bất kỳ luận điểm nào của họ có trong linear-gradient (), thì gradient được chỉ định theo đó. Mặt khác, giá trị mặc định ở dưới cùng được sử dụng; 
- Nó chỉ định các điểm dừng màu khác nhau bên trong hộp gradient. Các điểm dừng màu này được sắp xếp theo danh sách được phân tách bằng dấu phẩy trong đó mỗi màu có thể được xác định là-
 [ | ]?
orare được sử dụng để xác định rõ ràng vị trí của màu dừng. Tuy nhiên, không cần thiết phải chỉ định tỷ lệ phần trăm hoặc độ dài; 

ví dụ

hình nền. linear-gradient(hồng, lục, vàng);

Sự chuyển đổi giữa ba màu được hiển thị ở góc 180 độ (giá trị mặc định). Ba giá trị của các màu hồng, xanh lá cây và vàng được chỉ định trong hàm độ dốc tuyến tính là ba điểm dừng màu trong đó các chuyển đổi được thực hiện

Một điều quan trọng cần lưu ý là các màu khác nhau được hiển thị dưới dạng "đường" và luôn vuông góc với đường chuyển màu

hình nền. độ dốc tuyến tính (45 độ, xanh lá cây, vàng);

Giá trị đầu tiên trong hàm linear-gradient() chỉ định quá trình chuyển đổi được hiển thị ở góc 45 độ, theo sau là hai điểm dừng màu

hình nền. linear-gradient(đỏ 0%, cam 25%, vàng 50%, lục 75%, lam 100%);

Trong ví dụ trên, chúng tôi đang xác định vị trí của từng điểm dừng màu. Màu đỏ bắt đầu ở 0% diện tích chiếm bởi hộp chuyển màu, tiếp theo là màu cam, bắt đầu ở 25%, sau đó là màu vàng ở 50%, tiếp theo là màu xanh lá cây và xanh lam ở mức 75% và 100%, tương ứng

Mặc dù các điểm dừng màu nên được liệt kê theo thứ tự tăng dần. Tuy nhiên, nếu bạn không sắp xếp chúng đúng cách, trình duyệt sẽ làm điều đó cho bạn

hình nền. độ dốc tuyến tính (sang phải, đỏ 30px, vàng 60px, đỏ 90px, vàng 120px, đỏ 150px);

Trong ví dụ này, vị trí của các điểm dừng màu được xác định bằng độ dài tính bằng pixel. Các vị trí này được tính từ điểm bắt đầu của đường dốc. Hướng của đường dốc sang trái

hình nền. linear-gradient(đỏ 20%, vàng, lam 80%);

Nếu bạn kết hợp cả các điểm dừng màu được định vị và không được định vị, thì trình duyệt sẽ tìm đúng vị trí cho màu không được định vị giống như trong ví dụ trên cho màu vàng

Làm cách nào để tạo nền gradient tuyến tính bằng CSS?

Đoạn mã dưới đây sẽ tạo ra sự chuyển tiếp của hai màu được chỉ định ở một góc 90 độ với một số văn bản ngẫu nhiên trên màn hình

Nó có nghĩa là gì trong CSS gradient tuyến tính?

Làm thế nào bạn xác định chức năng trong hình ảnh CSS cho một gradient tuyến tính?

Ba loại gradient chính trong CSS là gì?

Thuộc tính gradient trong CSS là gì?