Thêm hai gradient vào trang. Nhìn vào độ dốc CSS3 (độ dốc tuyến tính và xuyên tâm). Tạo các gradient CSS không có hình ảnh

Khi chúng ta nói về độ dốc trong CSS, chúng ta đang nói về độ dốc màu.

Có hai loại gradient trong CSS:

• tuyến tính: màu sắc đi từ điểm này đến điểm khác, dọc theo thẳng dòng;
• xuyên tâm: màu sắc đi từ tâm vòng tròn đến các cạnh của nó, trong mọi người hướng.

Độ dốc được xem xét hình nền và phải được sử dụng với thuộc tính thích hợp.

gradient tuyến tính

Cú pháp của gradient tuyến tính khá phức tạp, nhưng ý tưởng cơ bản là:

• xác định mong muốn màu sắc;
• nơi những màu này sẽ xuất hiện dọc theo trục(ở đầu, giữa, cuối, v.v.);
• trong đó phương hướng nên có một độ dốc.

Hãy bắt đầu với một gradient hai màu đơn giản:

Div ( hình nền: gradient tuyến tính (đỏ, xanh); )

Mặc định:

• hướng dọc, từ trên xuống;
• Đầu tiên tô màu vào sự khởi đầu(hướng lên);
• thứ hai tô màu vào kết thúc(ở phía dưới).

Thay đổi hướng

Nếu hướng từ trên xuống không phù hợp với bạn, bạn có thể thay đổi nó thành một trong các tùy chọn:

• định nghĩa gán độ dốc, sử dụng từ khóa như top left ;
• xác định cụ thể góc tính bằng độ, như 45 độ.

Hướng này phải được thiết lập trước màu sắc:

Div ( hình nền: gradient tuyến tính(ở dưới cùng bên phải, màu vàng, màu tím); chiều rộng: 200px; )

Nếu bạn muốn hỏi góc cụ thể, thì bạn có thể sử dụng giá trị trong độ:

• 0deg - từ dưới lên trên;
• 20deg - hơi chéo, đi theo chiều kim đồng hồ;
• 90deg - như 15 giờ, từ trái sang phải;
• 180 độ là mặc định, từ trên xuống dưới.

Div (hình nền: gradient tuyến tính(20deg, green, blue); chiều rộng: 150px; )

Thêm nhiều màu sắc hơn

Bạn có thể chèn bao nhiêu màu tùy thích. Họ sẽ chia đêu dọc theo trục:

• hai màu: 0% và 100%
• ba màu: 0%, 50% và 100%
• bốn màu: 0%, 33%, 67% và 100%

Div ( hình nền: gradient tuyến tính (cam, xám, vàng); chiều rộng: 150px; )

Xác định các điểm màu cụ thể

Nếu không muốn màu phân bố đều, bạn có thể đặt vị trí màu nhất định sử dụng tỷ lệ phần trăm (%) hoặc pixel (px):

Div ( hình nền: gradient tuyến tính (cam, xám 10%, vàng 50%); chiều rộng: 150px; )

Trong các thông số này:

• Tại màu cam không có vị trí màu nào được chỉ định, vì vậy giá trị mặc định là 0%;
• màu xám gần phía trên hơn, tăng 10% thay vì 50%;
• Màu vàng chiếm một nửa độ dốc, từ 50% đến hết 100%.

gradient xuyên tâm

Trong khi độ dốc tuyến tính tuân theo một trục duy nhất, độ dốc xuyên tâm lan rộng ra mọi hướng. Cú pháp của chúng rất giống với gradient tuyến tính, vì cả hai đều có chấm màu. Nhưng thay vì chỉ định hướng, bạn cần chỉ định:

• hình thức: hình tròn hoặc hình elip;
• điểm khởi đầu: sẽ là tâm của hình tròn hoặc hình elip;
• điểm cuối: vị trí của cạnh của hình tròn hoặc hình elip.

Div ( hình nền: radial-gradient(đỏ, vàng); phần đệm: 1rem; chiều rộng: 300px; )

Mặc định:

• độ dốc là hình elip;
• màu đầu tiên bắt đầu lúc trung tâm;
• màu cuối cùng kết thúc bằng góc xa nhất.

Điểm xuất phát

Điểm xuất phát hoạt động như vị trí nền. Bạn có thể cài đặt nó thông qua từ khóa Tại.

Div ( hình nền: radial-gradient(at trên cùng bên phải, đen, xám nhạt); phần đệm: 1rem; chiều rộng: 300px; )

Vị trí kết thúc

Theo mặc định, biểu mẫu kết thúc lúc góc xa nhất. Bạn có thể chọn:

• phía gần nhất
• góc gần nhất
• phía xa nhất
• góc xa nhất

Div ( hình nền: radial-gradient(góc gần nhất ở 20px 20px, xanh lá cây, xanh lam); phần đệm: 1rem; chiều rộng: 300px; ) div:hover ( hình nền: radial-gradient(phía xa nhất ở 20px 20px, màu xanh xanh); )

Kích thước cố định

Thay vì đặt vị trí bắt đầu và kết thúc, bạn chỉ cần đặt kích thước cụ thể:

Div ( hình nền: radial-gradient(20px 10px ở mức 75% 50%, màu tím đậm, màu hồng); phần đệm: 1rem; chiều rộng: 300px; )

Độ dốc trong CSS rất mạnh mẽ số lượng vô hạn tùy chọn.

Vlad Merzhevich

Độ dốc được gọi là chuyển tiếp suôn sẻ từ màu này sang màu khác và có thể có một số màu và sự chuyển tiếp giữa chúng. Với sự trợ giúp của độ dốc, các hiệu ứng thiết kế web kỳ lạ nhất sẽ được tạo ra, chẳng hạn như giả ba chiều, ánh sáng chói, nền, v.v. Ngoài ra, với độ dốc, các phần tử trông hấp dẫn hơn so với các phần tử đơn sắc.

Không có thuộc tính riêng biệt để thêm độ dốc, vì nó được coi là hình nền, do đó, nó được thêm thông qua thuộc tính hình nền hoặc thuộc tính nền chung, như trong ví dụ 1.

Ví dụ 1: Độ dốc

Ở đây, thành ngữ tục tĩu theo truyền thống bắt đầu bằng hình ảnh tầm thường, nhưng trò chơi ngôn ngữ không dẫn đến sự hiểu đối thoại tích cực.

Kết quả ví dụ này thể hiện trong hình. 1.

Cơm. 1. Độ dốc tuyến tính cho đoạn văn

Chớm ban đầu trường hợp đơn giản Với hai màu được minh họa trong ví dụ 1, trước tiên hãy viết vị trí mà dải màu sẽ bắt đầu, sau đó là màu bắt đầu và màu kết thúc.

Để ghi lại một vị trí, trước tiên bạn viết vào , sau đó thêm các từ khóa top , Bottom và left , right , cũng như sự kết hợp của chúng. Thứ tự từ không quan trọng, bạn có thể viết lên trên bên trái hoặc vào trên cùng bên trái. Trong bảng 1 hiển thị các vị trí khác nhau và loại chuyển màu thu được cho các màu #000 và #fff, nếu không thì từ đen sang trắng.

Bàn 1. Các kiểu chuyển màu

Chức vụ		Sự miêu tả	Xem
lên đầu	0 độ	Xuống lên.
sang trái	270 độ	Từ phải qua trái.
đến đáy	180 độ	Từ trên xuống.
bên phải	90 độ	Từ trái sang phải.
lên trên cùng bên trái		Từ góc dưới bên phải đến góc trên bên trái.
lên trên cùng bên phải		Từ phía dưới bên trái đến phía trên bên phải.
ĐẾN phía dưới bên trái		Từ góc trên bên phải đến góc dưới bên trái.
xuống dưới cùng bên phải		Từ trên cùng bên trái đến dưới cùng bên phải.

Thay vì từ khóa, bạn có thể chỉ định độ dốc của đường chuyển màu, hiển thị hướng của chuyển màu. Đầu tiên, giá trị dương hoặc âm của góc được ghi lại, sau đó độ được thêm vào nó.

0 độ (hoặc 360°) tương ứng với độ dốc từ dưới lên trên, sau đó đếm ngược theo chiều kim đồng hồ. Góc dốc của đường gradient được hiển thị bên dưới.

Đối với các giá trị trên cùng bên trái và các giá trị tương tự, góc nghiêng của đường gradient được tính toán dựa trên kích thước của phần tử để kết nối hai điểm góc đối diện theo đường chéo.

Để tạo các gradient phức tạp, hai màu sẽ không còn đủ nữa, cú pháp cho phép bạn thêm số lượng chúng không giới hạn, liệt kê các màu được phân tách bằng dấu phẩy. Bạn có thể sử dụng màu trong suốt (từ khóa trong suốt), cũng như màu bán trong suốt bằng định dạng RGBA, như trong Ví dụ 2.

Ví dụ 2: Màu trong mờ

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Kết quả của ví dụ này được hiển thị trong Hình. 2.

Cơm. 2. Chuyển màu với màu trong mờ

Để định vị chính xác các màu trong một dải màu, giá trị màu được theo sau bởi vị trí của nó theo phần trăm, pixel hoặc các đơn vị khác. Ví dụ, ghi lại đỏ 0%, cam 50%, vàng 100% có nghĩa là gradient bắt đầu bằng màu đỏ, sau đó là 50% màu cam và sau đó chuyển sang màu vàng. Để đơn giản, các đơn vị cực trị như 0% và 100% có thể được bỏ qua; chúng được giả định theo mặc định. Ví dụ 3 cho thấy cách tạo nút chuyển màu trong đó vị trí của màu thứ hai trong số ba màu được đặt thành 36%.

Ví dụ 3: Nút chuyển màu

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Nhấn nhẹ nhàng vào tôi

Kết quả của ví dụ này được hiển thị trong Hình. 3.

Cơm. 3. Nút chuyển màu

Bằng cách đặt vị trí của màu, bạn có thể có được sự chuyển tiếp sắc nét giữa các màu, cuối cùng tạo ra một tập hợp các sọc đơn sắc. Vì vậy, đối với hai màu bạn cần chỉ định bốn màu, hai màu đầu tiên giống nhau và bắt đầu từ 0% đến 50%, các màu còn lại cũng giống nhau và tiếp tục từ 50% đến 100%. Trong ví dụ này, 4 sọc được thêm làm nền của trang web. Do các giá trị cực trị được thay thế tự động nên không thể chỉ định chúng nên chỉ cần viết hai màu là đủ.

Ví dụ 4. Sọc trơn

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Giai cấp tư sản châu Âu điển hình và sự đáng kính được minh họa một cách trang nhã bằng ngôn ngữ chính thức.

Kết quả của ví dụ này được hiển thị trong Hình. 4. Lưu ý rằng một trong các màu gradient được đặt thành trong suốt nên nó thay đổi gián tiếp thông qua màu nền của trang web.

Cơm. 4. Nền sọc ngang

Chuyển màu khá phổ biến trong giới thiết kế web, nhưng việc thêm chúng rất phức tạp bởi các thuộc tính khác nhau cho mỗi trình duyệt và việc chỉ định nhiều màu. Để giúp bạn tạo các gradient và chèn chúng vào mã dễ dàng hơn, tôi khuyên bạn nên sử dụng trang web www.colorzilla.com/gradient-editor để bạn có thể dễ dàng thiết lập các gradient và ngay lập tức nhận được mã yêu cầu. Có sẵn các mẫu làm sẵn(Presets), xem kết quả (Preview), điều chỉnh màu sắc (Adjustments), mã cuối cùng (CSS) hỗ trợ IE thông qua các bộ lọc. Dành cho những người đã làm việc với Photoshop hoặc phần mềm khác biên tập đồ họa, việc tạo độ dốc sẽ giống như một miếng bánh, nhưng những người khác sẽ không gặp khó khăn gì khi tìm ra nó một cách nhanh chóng. Nói chung, tôi đánh giá cao nó.

• Dịch

Công việc dịch thuật về dự án singlediv.com cho thấy một số Công cụ CSS có ứng dụng rộng rãi hơn tôi từng nghĩ. Nhưng để có thể tìm được ứng dụng này, cần phải hiểu rõ đặc điểm của tài sản. Một ví dụ nổi bật là gradient tuyến tính, được Lynn Fisher sử dụng một cách thành thạo trong các tác phẩm của mình.

Muốn làm nó dễ thương nền dốc trên trang web của bạn? hình nền: gradient tuyến tính (đỏ, xanh); sẵn sàng! Vâng, nó hơi nhàm chán. Vì vậy, nếu bạn muốn thứ gì đó nhiều hơn, tôi khuyên bạn nên sử dụng trang này với các mẹo về css và MDN. Bạn có đang ở đây không? Sau đó, hãy xem xét một số điều về cách hoạt động của gradient tuyến tính. Trước tiên, hãy xem lại cú pháp có thể được sử dụng trong hàm gradient tuyến tính:

gradient tuyến tính ([từ<угла>| trước<стороны-или-угла>]?, );
Hàm này nhận một đối số đầu tiên tùy chọn chỉ định góc của độ dốc, có thể được biểu thị bằng đơn vị đo (độ, bán kính, độ, vòng) hoặc dưới dạng từ khóa (cạnh hoặc góc.

Sau đó hàm sẽ chấp nhận một danh sách các màu.

Trường chuyển màu

Hình ảnh gradient không có kích thước, nó vô hạn không giống như các hình nền khác. Các kích thước hiển thị được cung cấp cho nó bởi trường gradient, tức là. khu vực mà nó được hiển thị.

Thông thường, khi bạn sử dụng hình nền dưới dạng một gradient tuyến tính cho phần tử DOM, khu vực này là khung viền của phần tử (chính là khu vực trong đó màu nền).

Tuy nhiên, nếu bạn cũng sử dụng thuộc tính CSS kích thước nền và đặt nó thành 200px * 200px thì trường gradient sẽ có kích thước này và theo mặc định sẽ được đặt ở góc trên bên trái của phần tử DOM, trừ khi bạn cũng đặt vị trí nền.

Vì vậy, khi bạn đọc các phần sau, chỉ cần nhớ rằng hộp chuyển màu không phải lúc nào cũng được đặt ở vị trí giống hoặc có kích thước giống như phần tử DOM mà bạn đang áp dụng chuyển màu.

Đường chuyển màu

Trong trường chuyển màu, đường đi qua tâm và dọc theo đó các màu được phân bổ được gọi là đường chuyển màu. Đường này có thể được mô tả đơn giản hơn bằng cách giải thích góc gradient, vì vậy vấn đề này sẽ được thảo luận chi tiết hơn trong phần tiếp theo.

Góc dốc

Rõ ràng, góc của một gradient tuyến tính được sử dụng để xác định gradient sẽ đi theo hướng nào. Nhưng hãy xem xét khía cạnh này chi tiết hơn.

Nếu C là điểm trung tâm của trường gradient thì A là góc giữa đường thẳng đứng, đi qua C và một đường gradient cũng đi qua C và dọc theo đó các màu dừng của gradient được phân phối.

Góc này có thể được xác định theo hai cách:

Sử dụng một trong các từ khóa: to top (lên), to top (xuống), to left (trái), to right (phải), to top right (lên bên phải), to top left (lên trái), to under right ( xuống bên phải), xuống dưới cùng bên trái (xuống bên trái);
Hoặc bằng cách xác định góc bằng số và đơn vị đo, ví dụ 45 độ (45 độ), 1 vòng (1 vòng);

Nếu góc không được chỉ định thì theo mặc định, nó hướng xuống dưới (nghĩa là 180 độ hoặc 0,5 vòng):

Về điều này và về hình ảnh sau đây hộp chuyển màu được bao quanh bởi một hình chữ nhật và đường chuyển màu là đường màu xám dày chạy qua tâm dọc theo đó các màu xuất hiện.

Trong ví dụ trên, không có góc nào được chỉ định nên gradient từ trắng sang đỏ di chuyển từ trên xuống dưới, tương ứng với từ khóa to Bottom, như hình dưới đây:

Và, như thể hiện trong 2 hình ảnh tiếp theo, từ trên xuống tương ứng với một góc bằng 0 độ:

Khác tâm điểmĐiều đáng cân nhắc khi sử dụng từ khóa góc - ví dụ: ở trên cùng bên phải (hoặc bất kỳ từ khóa góc nào khác) phụ thuộc vào kích thước của hộp chuyển màu.

Logic là nếu bạn muốn tạo một dải chuyển màu từ đỏ sang xanh lam về phía góc trên bên phải của một phần tử thì phần tử đó sẽ có màu xanh lam ở góc trên cùng bên phải và màu tím ở giữa dải chuyển màu sẽ hình thành xung quanh một đường kéo dài từ góc trên bên trái đến góc dưới bên phải. Đây là những gì nó trông giống như trong hình ảnh:

Do đó, ở trên cùng bên phải không có nghĩa là đường gradient đi qua bên phải góc trên cùng, và điều đó thậm chí không có nghĩa là góc dốc là 45 độ!

Chúng ta hãy xem cách đường gradient di chuyển khi góc thay đổi với hoạt ảnh sau:

Trong hoạt ảnh này, góc nghiêng từ 0 đến 360 độ với gia số 10 độ. Độ phân giải thấp GIF thậm chí còn cho bạn cái nhìn rõ hơn về cách màu sắc khác nhauđược hiển thị dưới dạng “đường thẳng” luôn vuông góc với đường gradient.

Hãy nhớ lại những gì chúng ta biết về góc gradient:

Góc được đo giữa đường gradient và đường rời khỏi tâm của trường gradient và di chuyển lên trên.
Do đó 0 độ có nghĩa là lên.
Giá trị góc tiêu chuẩn, nếu không được chỉ định, sẽ giảm xuống, là 180 độ.
Từ khóa góc phụ thuộc vào kích thước của trường gradient.

Độ dài đường chuyển màu

Trước khi có thể thấy màu sắc được phân bổ dọc theo đường chuyển màu như thế nào, chúng ta cần giải thích một điều. Bạn có thể nhận thấy trong hoạt ảnh trước đó rằng màu sắc đôi khi được đặt bên ngoài hộp chuyển màu, điều này thoạt nhìn có thể hơi lạ nhưng sẽ hợp lý nếu bạn biết lý do.

Nhìn vào ví dụ:

Chúng tôi muốn gradient màu đỏ sang xanh lam ở góc 45 độ và do tỷ lệ khung hình của trường gradient, đường gradient không thể đi qua góc trên cùng bên phải.

Nhưng trình duyệt muốn (nghĩa là các thông số kỹ thuật buộc nó) làm cho góc trên bên phải có màu xanh thuần khiết. Nếu chúng ta tạo đường gradient bắt đầu và kết thúc ở các cạnh của trường thì Màu xanh chiếm phần lớn diện tích và độ dốc sẽ không trải ra quá nhiều.

Vì vậy, để làm được điều này, đường gradient đôi khi phải mở rộng ra ngoài hộp gradient. Đồng thời, khá dễ dàng để tìm ra nơi nó bắt đầu và nơi nó kết thúc. Đơn giản chỉ cần vẽ một đường đi qua góc gần nhất và vuông góc với đường gradient. Điểm mà đường này giao với đường gradient là vị trí bắt đầu/kết thúc.

Trong thực tế, nếu bạn chỉ định chiều rộng của trường gradient W, chiều cao H và góc của gradient thì độ dài của đường gradient là:

Abs(W * sin(A)) + abs(H * cos(A))

Màu sắc

Các màu đại diện cho một danh sách được phân tách bằng dấu phẩy trong đó mỗi phần tử có thể được xác định như sau:
<цвет> [<процентное соотношение> | <длина>]?

Do đó, không cần thiết phải chỉ định vị trí đặt màu dọc theo đường chuyển màu. Ví dụ:

Không có màu nào có vị trí riêng nên trình duyệt tự xác định vị trí của chúng.

Thực ra ví dụ đơn giản chỉ với 2 màu, màu 1 sẽ được đặt ở mức 0% (ở đầu đường gradient) và màu 2 sẽ được đặt ở mức 100% (ở cuối đường gradient).

Sau đó, nếu bạn thêm màu thứ ba, bạn vẫn sẽ có màu 1 ở mức 0%, màu 2 ở mức 50% và màu 3 ở mức 100%, v.v.

Trong ví dụ trên, 5 màu dừng đã được đưa ra và trình duyệt tính toán vị trí tương đối của chúng là 0%, 25%, 50%, 75%, 100%. Lý do cho điều này là sự phân bố đồng đều dọc theo trường gradient.

Vị trí của một màu có thể được biểu thị bằng phần trăm(liên quan đến kích thước của đường chuyển màu) hoặc độ dài CSS (trong đó bất kỳ đơn vị nào hợp lệ Kích thước CSS).

Đây là một ví dụ:

Như bạn có thể thấy, mỗi màu trong số 5 màu dừng có vị trí riêng, được chỉ định bằng pixel. Các vị trí này được tính từ đầu đường gradient.

Sử dụng các vị trí như vậy, bạn có thể nhận được một số hiệu ứng thú vị. Ví dụ: bạn có thể sử dụng gradient để không tự vẽ gradient mà để lại một vài màu:

Có 7 màu trong hình trên và chúng được đặt sao cho màu tiếp theo bắt đầu ở cùng vị trí với màu cuối cùng, nghĩa là trình duyệt không cần phải lấp đầy khoảng trống giữa hai màu dừng bằng dải chuyển màu.

Chắc chắn, điều đó thật dễ thương và hài hước, nhưng điều gì sẽ xảy ra khi bạn trộn các màu được định vị với những màu không được định vị? Sau đó, bạn sẽ buộc trình duyệt làm việc chăm chỉ hơn và yêu cầu nó tự động phân phối các màu mà bạn chưa chỉ định vị trí:

Trong ví dụ đơn giản này, màu thứ hai (màu cam) không có vị trí, do đó trình duyệt xác định nó và tìm vị trí thích hợp giữa màu được chỉ định trước đó và màu tiếp theo. Ở đây rất đơn giản, vì các màu lân cận của màu thứ hai có vị trí riêng, nhưng nếu chỉ một số màu có vị trí, hoặc nếu màu trước hoặc màu tiếp theo không có vị trí thì mọi thứ sẽ phức tạp hơn.

Hãy xem xét một vài ví dụ:

Trong ví dụ trên, chỉ có màu thứ ba (màu vàng) được đặt ở mức 30%. Vì vậy, để phân phối tốt hơn tất cả các màu khác, màu đầu tiên được đặt ở mức 0%, màu cuối cùng là 100% và các màu còn lại được phân phối ở giữa (để màu cam nằm ngay trong khoảng từ 0% đến 30% và màu đỏ nằm trong khoảng từ 30% đến 100%).

Trong ví dụ trên, màu đầu tiên và màu cuối cùng được định vị, do đó, phần còn lại được phân bổ đều giữa hai màu này.

Tất nhiên, sẽ quá đơn giản nếu 0% và 100% là những giới hạn cứng nhắc không thể vượt qua. Nhưng như bạn có thể thấy từ ví dụ trước, màu cuối cùng nằm ở mức 120% và do đó tất cả các màu khác phải được phân bổ tương ứng với vị trí này (điểm bắt đầu mặc định trong trường hợp này vẫn là 0%).

Và nếu bạn muốn trình duyệt của mình hoạt động hiệu quả hơn nữa, tại sao không chỉ định thứ tự các vị trí?

Trên thực tế, màu sắc phải theo thứ tự, nhưng không có gì ngăn cản bạn làm như vậy và sẽ không có gì khủng khiếp xảy ra nếu bạn không làm như vậy. Trình duyệt của bạn sẽ chỉ sửa mọi thứ như hiển thị bên dưới:

Hãy bắt đầu với màu đầu tiên (màu đỏ), nằm ở mức 30%. Sau đó, màu thứ hai nằm ở mức 10%, điều này đã không chính xác, vì như đã nêu ở trên, các màu phải được biểu thị ở vị trí tăng dần. Vì vậy, ở đây trình duyệt sửa vị trí của màu thứ hai và đặt nó về vị trí tương tự như màu trước đó (30%). Tiếp theo là màu thứ ba (màu vàng) ở mức 60%, điều này đúng nhưng tiếp theo là màu thứ tư (màu xanh) ở mức 40%. Một lần nữa vị trí được điều chỉnh và đặt thành cùng giá trị với màu được định vị trước đó.

Cuối cùng, như được hiển thị trong ví dụ trên, màu cuối cùng (xanh lam) được đặt không chính xác và trình duyệt đặt vị trí của nó giống với màu trước đó. trong trường hợp này không phải là hàng xóm ngay lập tức của nó (màu vàng) cũng không phải là hàng xóm của màu đứng trước nó (màu cam), vì vậy nó phải quay trở lại màu đầu tiên (đỏ). Bằng cách này, tất cả các màu giữa đỏ và xanh lam được đặt thành 30% và do đó không thể nhìn thấy được.

Công cụ

Tất cả các ảnh chụp màn hình trong bài viết này là từ một công cụ đơn giản mà tôi đã tạo trên codepen, cho phép bạn nhập hàm gradient tuyến tính và xem thông tin về hộp gradient, đường gradient, góc và màu sắc ở trên cùng của phần tử.

Công cụ này có đủ loại lỗi và hạn chế (xem nhận xét về javascript), vì vậy đừng mong đợi nhiều ở nó.

Thẻ:

• CSS
• gradient tuyến tính

Thêm thẻ

Dải màu là sự chuyển đổi mượt mà từ một màu màu được chỉ định sang màu khác thông qua các màu trung gian. Trong gradient tuyến tính, quá trình chuyển đổi xảy ra theo đường thẳng, từ điểm MỘTđến điểm B. Độ dốc có thể có nhiều hơn hai điểm tham chiếu - khi đó quá trình chuyển đổi được thực hiện từ điểm MỘTđến điểm B, thì từ điểm Bđến điểm C và như thế.

Cách tạo một gradient tuyến tính nền trong CSS

Trong CSS3, bạn có thể thêm nền gradient cho các thành phần thông qua thuộc tính hình nền đã biết. Giá trị là từ khóa tuyến tính-gradient(), trong dấu ngoặc đơn bạn cần chỉ định điểm bắt đầu của dải màu, màu bắt đầu và màu kết thúc.

Ví dụ: hãy tạo nền độ dốc tuyến tính với sự chuyển đổi từ màu tím sang màu đỏ. Trong trường hợp này, chúng tôi muốn điểm bắt đầu là màu tímđã có bên phải và vectơ gradient hướng sang trái. Hãy viết mã:

Hình nền: gradient tuyến tính (sang trái, tím, đỏ); Độ dốc nền trên khối