Nền chuyển màu có ba màu css. CSS: Độ dốc tuyến tính cho nền. Ví dụ gradient tuyến tính-gradient()

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 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 này 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 áp dụng hình nền gradient tuyến tính cho phần tử DOM, khu vực đó là khung viền của phần tử (chính là khu vực trong đó phần tử DOM 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 chúng ta 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 trên cùng bên phải(trên cùng bên phải), lên trên bên trái (trên cùng bên trái), tới góc phải ở phía dưới(dưới bên phải), để phía dưới bên trái(từ bên trái đi xuống);
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 đậm 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, đáng để cân nhắc khi sử dụng từ khóa góc - ví dụ: ở trên cùng bên phải (phía trên bên phải), (hoặc bất kỳ từ khóa nào khác từ khóa góc) phụ thuộc vào kích thước của trường gradient.

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

Vì vậy, ở trên cùng bên phải không có nghĩa là đường chuyển màu đi qua góc trên bên phải và thậm chí không có nghĩa là góc chuyển màu 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 chuyển màu đỏ sang xanh lam ở góc 45 độ và do tỷ lệ khung hình của trường chuyển màu, đường chuyển màu 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 bổ ở 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ị theo thứ tự 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ẻ

Chẳng bao lâu nữa, các trang web sẽ tải dễ dàng hơn và chúng sẽ có thể được tạo mà không cần bất kỳ hình ảnh nào.

Bây giờ đã ở trình duyệt hiện đại bạn có thể tạo nền gradient với bất kỳ mức độ phức tạp nào với Trợ giúp CSS, đồng thời hoàn toàn không có hình ảnh.

Tạo các gradient CSS không có hình ảnh

Giả sử chúng ta muốn thực hiện chuyển đổi độ dốc trong nền từ màu xám sang màu đen. Để đạt được điều này, W3 Corporation đã đề xuất sử dụng chỉ thị gradient tuyến tính đặc biệt trong CSS3.

Vì vậy, theo phiên bản W3, để tạo nền gradient, chỉ cần viết vào bộ chọn khối:

Nền: gradient tuyến tính (bắt đầu, vị trí color11, vị trí color22,...,colorN vị tríN);

Và trình duyệt sẽ tự động vẽ nền gradient trong khối.

Rõ ràng là hoa và Điểm kiểm soát có thể có rất nhiều trong gradient. Tham số bắt đầu chỉ định hướng gradient sẽ lan truyền - nó có thể là đứng đầu cho một gradient hướng theo chiều dọc hoặc bên trái để định hướng theo chiều ngang.

Không phải tất cả các trình duyệt đều hỗ trợ tính năng này, vì vậy hiện tại có một số thủ thuật. Đối với các trình duyệt rất cũ, bạn cần chỉ định một số màu nền trung bình (sẽ không có độ dốc nào cả, nhưng nền sẽ không có màu trắng) hoặc chỉ định hình ảnh có độ dốc (tuy nhiên, nếu mục đích sử dụng độ dốc tuyến tính trong CSS là để giảm số lượng hình ảnh được tải, thì điều này là vô ích, vì trong tất cả các trình duyệt, hình ảnh sẽ vẫn được tải, mặc dù sau này nó sẽ được thay thế bằng gradient tuyến tính).
Đối với các trình duyệt giống IE, bạn có thể sử dụng độ dốc dựa trên bộ lọc và đối với các trình duyệt webkit (Safari, Chrome) và tắc kè (Mozilla), như mọi khi, có một giải pháp thay thế: -webkit-gradient và -moz-Tuyến tính-gradient, trong đó chấp nhận các tham số tương tự. Xem khối mã sau để biết cách thức hoạt động của tất cả:

Bối cảnh: #999; bộ lọc: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); nền: -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ (#ccc), đến (#000)); nền: -moz-tuyến tính-gradient (trên cùng, #ccc, #000);

Sau khi render nó sẽ như thế này.

Cập nhật lần cuối: 21/04/2016

Độ dốc đại diện chuyển tiếp suôn sẻ từ màu này sang màu khác. CSS3 có một số gradient tích hợp mà bạn có thể sử dụng để tạo nền cho một phần tử.

Độ dốc trong CSS không đại diện cho bất kỳ thuộc tính đặc biệt nào. Họ chỉ tạo một giá trị được gán cho thuộc tính hình nền.

Dải màu chuyển sắc tuyến tính kéo dài theo đường thẳng từ đầu này sang đầu kia của phần tử, tạo ra sự chuyển tiếp mượt mà từ màu này sang màu khác.

Để tạo một gradient, bạn cần chỉ định phần đầu và một số màu của nó, ví dụ:

Hình nền: gradient tuyến tính (trái, đen, trắng);

Trong trường hợp này, điểm bắt đầu của gradient sẽ là cạnh trái của phần tử, được biểu thị bằng giá trị left . Màu chuyển sắc: đen và trắng. Nghĩa là, bắt đầu từ cạnh trái của phần tử sang phải sẽ có sự chuyển đổi suôn sẻ từ đen sang trắng.

Có một nhược điểm khi sử dụng độ dốc - nhiều trình duyệt buộc bạn phải sử dụng tiền tố của nhà cung cấp:

Webkit- /* Dành cho Google Chrome, Cuộc đi săn, Microsoft Edge, Opera trên phiên bản 15 */ -moz- /* Dành cho Mozilla Firefox */ -o- /* Dành cho Opera trên phiên bản 15 (Opera 12) */

Vì thế, sử dụng đầy đủĐộ dốc sẽ trông như thế này:

Bảng tạo kiểu trong CSS3

Độ dốc tuyến tính màu đen và trắng

Để đặt điểm bắt đầu của gradient, bạn có thể sử dụng các giá trị sau: left (từ trái sang phải), right ( từ phải qua trái), trên cùng (từ trên xuống dưới) hoặc dưới cùng (từ dưới lên trên). Ví dụ: một gradient dọc sẽ trông như thế này:

Hình nền: gradient tuyến tính (dưới, đen, trắng);

Bạn cũng có thể đặt hướng chéo bằng hai giá trị:

Hình nền: gradient tuyến tính (trên cùng bên trái, đen, trắng);

Ngoài các giá trị cụ thể như trên cùng hoặc bên trái, bạn cũng có thể chỉ định một góc từ 0 đến 360, điều này sẽ xác định hướng của gradient:

Hình nền: gradient tuyến tính (30 độ, đen, trắng);

Sau giá trị của các góc, từ deg được biểu thị.

Ví dụ: 0deg có nghĩa là gradient bắt đầu ở phía bên trái và di chuyển đến bên phải và khi bạn chỉ định 45 độ, nó bắt đầu ở góc dưới cùng bên trái và di chuyển một góc 45° đến góc trên cùng bên phải.

Sau khi xác định điểm bắt đầu của dải màu, bạn có thể chỉ định màu hoặc điểm tham chiếu để áp dụng. Không nhất thiết phải có hai màu, có thể có nhiều hơn:

Hình nền: gradient tuyến tính (trên cùng, đỏ, #ccc, xanh);

Tất cả các màu được áp dụng đều được phân bố đều. Tuy nhiên, bạn cũng có thể chỉ định vị trí nền cụ thể cho các chấm màu. Để thực hiện việc này, giá trị thứ hai được thêm vào sau màu, giá trị này xác định vị trí của điểm.

Hình nền: gradient tuyến tính (trái, #ccc, đỏ 20%, đỏ 80%, #ccc);

Lặp lại độ dốc

Sử dụng lặp lại-tuyến tính-gradient bạn có thể tạo độ dốc tuyến tính lặp lại. Ví dụ:

Ảnh nền: lặp lại-tuyến tính-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); hình nền: -moz-repeating-Linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); hình nền: -webkit-repeating-Linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);

Trong trường hợp này, độ dốc bắt đầu từ cạnh trái của phần tử có sọc xám(#ccc) rộng 20 pixel, sau đó chuyển sang màu đỏ lên tới 30 pixel và sau đó chuyển sang màu đỏ lên tới 40 pixel chuyển đổi ngược lại sang màu xanh nhạt (rgba(0, 0, 126, .5)). Sau đó, trình duyệt lặp lại độ dốc cho đến khi nó lấp đầy toàn bộ bề mặt của phần tử.

Vlad Merzhevich

Chuyển màu là sự 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à 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 các phần tử đơn sắc.

Không có thuộc tính riêng biệt cho việc thêm gradient vì nó được coi là hình nền, do đó đượ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

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ự các từ không quan trọng, bạn có thể viết to left top hoặc to top left. 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ả
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.
xuống dưới cùng bên trái		Từ bên phải góc trên cùngở phía 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 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 màu không giới hạn, liệt kê các màu được phân tách bằng dấu phẩy. Trong trường hợp này bạn có thể sử dụng màu trong suốt(từ khóa trong suốt) và cũng mờ bằng cách sử dụ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

Dốc

Nguồn gốc của thơ tự do, bất chấp những ảnh hưởng từ bên ngoài, đã đẩy lùi ngôn ngữ kim loại.

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 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

Cái nút

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

Sọc ngang

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 có vẻ giống như một miếng bánh, nhưng đối với những người khác, sẽ không khó để tìm ra nó một cách nhanh chóng. Nói chung, tôi đánh giá cao nó.

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 chuyển từ điểm này sang điểm khá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); )

Độ dốc nền dọc đơn giản.

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 hướng đó 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; )

Độ dốc chéo từ trên cùng bên trái đến dưới cùng bên phải.

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; )

Độ dốc đường chéo với một góc 20 độ.

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; )

Một gradient khá xấu, nhưng ý tưởng ở đây rất quan trọng.

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; )

Cũng là một gradient xấu xí, nhưng ý tưởng ở đây rất quan trọng.

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 với đỉnh hơn, 10% thay vì 50%;
Màu vàng chiếm một nửa gradient, 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 đi, 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; )

Nó rất giống mặt trời phải không?

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ể đặt nó thông qua từ khóa at.

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

Ngày ảm đạm.

Vị trí kết thúc

Theo mặc định, biểu mẫu kết thúc tại 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)

Di chuột qua ngôi sao màu xanh lá cây này trên bầu trời để xem nó mở rộng như thế nào.