Linear-gradient(): Độ dốc tuyến tính ở nền. Độ dốc tuyến tính

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

Độ dốc thể hiện sự 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, Safari, 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ì vậy, việc sử dụng đầy đủ gradient sẽ như thế này:

Để đặt điểm bắt đầu của dải màu, bạn có thể sử dụng các giá trị sau: trái (trái sang phải), phải (phải sang 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ư top hoặc left, 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ụ: 0 độ có nghĩa là độ dốc bắt đầu ở bên trái và di chuyển sang bên phải, trong khi 45 độ có nghĩa là nó bắt đầu ở dưới cùng bên trái và di chuyển một góc 45° lên 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 sắc 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ụ:

Hì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ải màu bắt đầu ở cạnh trái của phần tử với một sọc màu xám (#ccc) rộng 20 pixel, sau đó lên đến 30 pixel, nó chuyển sang màu đỏ và sau đó lên đến 40 pixel, nó chuyển 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 mượt mà 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 so với các phần tử đơn sắc.

Không có thuộc tính riêng biệt để thêm gradient, vì nó được coi là hình nền nên 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ả của ví dụ này được hiển thị trong Hình. 1.

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

Trong trường hợp đơn giản nhất với hai màu, được minh họa trong ví dụ 1, đầu tiên vị trí mà dải màu sẽ bắt đầu được ghi, 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.

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 giá trị trên cùng bên trái và các giá trị tương tự, góc của đường gradient được tính dựa trên kích thước của phần 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. 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 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ẹ 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 gradient và chèn chúng vào mã của mình dễ dàng hơn, tôi khuyên bạn nên sử dụng trang web www.colorzilla.com/gradient-editor, trang này giúp bạn dễ dàng thiết lập gradient và ngay lập tức nhận được mã mong muốn. Có 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. Đối với những người đã từng làm việc trong Photoshop hoặc một trình soạn thảo đồ họa khác, việc tạo độ dốc sẽ 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ó.

Một! Dải màu là một công cụ tuyệt vời để thao tác màu sắc trong CSS3. Thay vì sử dụng hình ảnh để tạo hiệu ứng chuyển màu trên trang web, sẽ có lợi hơn nếu sử dụng Độ dốc CSS3 và do đó "làm sáng" trang web. Vì người dùng sẽ không cần lãng phí thời gian và lưu lượng tải hình nền. Có hai loại gradient chính: xuyên tâm và tuyến tính. Bài viết hôm nay sẽ nói về họ.

Độ dốc tuyến tính

Như cách phân loại nói, độ dốc trong CSS3 là những hình ảnh. Không có tài sản đặc biệt cho họ. Và quảng cáo sử dụng thuộc tính hình nền.

Nói chung, cú pháp gradient (tuyến tính) trông như thế này:

Vì vậy, hãy nói về mọi thứ theo thứ tự.

Trước hết, một gradient tuyến tính được khai báo bằng hàm Linear-gradient(). Chức năng này có ba ý nghĩa chính. Giá trị đầu tiên xác định vị trí bắt đầu. Ví dụ chỉ ra top tức là vị trí bắt đầu từ trên cao. Bạn cũng có thể sử dụng dưới cùng, bên trái và bên phải;

Nếu góc âm thì vị trí sẽ thay đổi từ góc dưới bên trái sang góc trên bên trái.

Giá trị thứ hai của hàm là màu bắt đầu và vị trí dừng của nó, được biểu thị bằng phần trăm. Việc khai báo vị trí này là không cần thiết; trình duyệt sẽ mặc định là 0% cho màu đầu tiên.

Giá trị cuối cùng là màu thứ hai và vị trí dừng của nó. Mặc định là 100%. Những giá trị cực trị này có nghĩa là màu đầu tiên ngay lập tức bắt đầu chuyển sang màu thứ hai. Tuy nhiên, nếu chúng ta đặt màu đầu tiên thành 50% thì nó sẽ chỉ bắt đầu chuyển sang màu thứ hai từ giữa chiều cao có sẵn. Đây là mã trông như thế nào:

Chúng tôi nhận được dải có chiều cao bằng nhau. Với đường viền rõ ràng sẽ không có hiện tượng chuyển màu. Để hiểu rõ hơn cách hoạt động của tính năng này, hãy thử nghiệm các giá trị.

Một gradient xuyên tâm, giống như một gradient tuyến tính, được khai báo dưới dạng một hàm, chỉ radial-gradient() . Ngoài ra còn có các giá trị cơ bản: đây là hình dạng của gradient xuyên tâm (hình tròn - hình tròn hoặc hình elip - hình elip), màu ban đầu và màu cuối cùng. Cú pháp như sau:

Nếu bạn không chỉ định hình dạng thì mặc định sẽ là hình elip.

Ngoài ra, vị trí trung tâm của gradient được đặt theo mặc định; nó có thể được thay đổi. Vị trí có thể được chỉ định bằng các lệnh (trên, dưới, trái, phải và giữa), cũng như sự kết hợp của chúng hoặc được chỉ định theo tỷ lệ phần trăm hoặc pixel.

Tổ hợp lệnh:

• Giữa ở trên cùng - trên cùng - 50% 0%;
• Ở góc trên bên trái - trên cùng bên trái - 0% 0%;
• Ở góc trên bên phải - trên cùng bên phải - 100% 0%;
• Ở trung tâm - trung tâm - 50% 50%;
• Giữa trái - giữa trái - 0% 50%;
• Trung tâm bên phải - trung tâm bên phải - 100% 50%;
• Trung tâm dưới cùng - dưới cùng - 50% 100%;
• Ở góc dưới bên trái - dưới cùng bên trái - 0% 100%;
• Ở góc dưới bên phải - dưới cùng bên phải - 100% 100%.

Đây là một ví dụ với tỷ lệ phần trăm:

Giá trị trục đầu tiên X thứ hai trong bạn.

Bạn cũng có thể đặt kích thước của gradient xuyên tâm. Kích thước được biểu thị bằng khoảng trắng sau hình dạng gradient. Áp dụng theo mặc định góc xa nhất(đến góc xa). Việc tính toán được thực hiện từ điểm trung tâm của gradient đến:

Để hiểu rõ hơn về điều này, chúng ta hãy xem một ví dụ. Một gradient hình elip với màu bắt đầu là màu trắng và màu kết thúc là màu xanh lam:

Kích thước được tính từ khoảng cách đến các cạnh gần, rõ ràng là đỉnh gần trục hơn Y và trái dọc theo trục X.

Và bây giờ đến phía xa:

Kết quả, như họ nói, là hiển nhiên. Kích thước được tính từ khoảng cách đến các phía xa.

Trong các gradient xuyên tâm cũng như tuyến tính, các vị trí dừng có thể được sử dụng cho màu sắc. Tôi cũng muốn lưu ý rằng nếu bạn cần đạt được độ trong suốt của màu, bạn nên sử dụng rgba.

Kênh alpha, kênh cuối cùng và bằng 0,2, cho biết chỉ 20% trong số 100% màu được sử dụng.

Ở cả hai loại Độ dốc CSS3 Bạn có thể sử dụng không phải hai, mà là nhiều màu.

Đối với cả hai loại, có thể sử dụng màu lặp lại. Nghĩa là, một chu trình được hình thành từ những giá trị này. Lặp lại các hàm gradient, lặp lại-tuyến tính-gradient() cho tuyến tính và lặp lại-radial-gradient() cho radial.

0% , #FFAE00 100% ); /* cho Firefox */
hình nền : -ms-tuyến tính-gradient(top , #FF5A00 0% , #FFAE00 100% ); /* dành cho IE 10+ */
hình nền : -o-tuyến tính-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* cho Opera */
hình nền : gradient tuyến tính (trên cùng, #FF5A00 0%, #FFAE00 100% ); /*cú pháp chuẩn */
}

div(
bộ lọc : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 ) ;
}

Trong đó 33 ngay sau hàm băm là phần trăm độ bão hòa màu.

Tôi hy vọng rằng bài viết này hữu ích với bạn và chủ đề được thảo luận đã được đề cập đầy đủ.

Để luôn cập nhật những bài viết và bài học mới nhất, hãy đăng ký

Chuyển màu - lấp đầy vùng đã chọn bằng một chuỗi các sắc thái màu với sự chuyển tiếp mượt mà giữa chúng. Dải màu được sử dụng để hiển thị sự chuyển tiếp mượt mà giữa hai hoặc nhiều sắc thái màu được chỉ định. Ví dụ về độ dốc:

Trước đây, hình nền được sử dụng để tạo hiệu ứng chuyển màu. Bây giờ bạn có thể sử dụng CSS3 để tạo nền gradient. Các phần tử có độ chuyển màu CSS3 trông đẹp hơn khi phóng to so với các phần tử tương ứng với hình nền trong plugin của chúng, vì độ chuyển màu được trình duyệt tạo trực tiếp đến khu vực được chỉ định.

Lưu ý rằng gradient CSS là hình nền do trình duyệt tạo chứ không phải màu nền nên nó được xác định là một giá trị thuộc tính hình nền. Điều này có nghĩa là độ dốc có thể được chỉ định không chỉ dưới dạng giá trị của thuộc tính hình nền mà còn ở bất kỳ nơi nào bạn có thể chèn hình nền, ví dụ như trong danh sách kiểu-hình ảnh Và lý lịch.

CSS3 định nghĩa hai loại gradient:

• Độ dốc tuyến tính(Gradient tuyến tính) - sự chuyển tiếp mượt mà từ màu này sang màu khác theo đường thẳng.
• Độ dốc xuyên tâm(Radial gradient) - sự chuyển đổi mượt mà từ màu này sang màu khác từ một điểm theo mọi hướng.

Độ dốc tuyến tính

Dải màu chuyển sắc tuyến tính kéo dài theo đường thẳng, thể hiện sự chuyển tiếp mượt mà từ sắc thái màu này sang sắc thái màu khác. Một gradient tuyến tính được tạo bằng hàm tuyến tính-gradient(). Hàm này tạo ra một hình ảnh có độ dốc tuyến tính giữa các sắc thái màu được chỉ định. Kích thước của gradient tương ứng với kích thước của phần tử mà nó được áp dụng.

Hàm tuyến tính-gradient() nhận các đối số được phân tách bằng dấu phẩy sau:

• Đối số đầu tiên là độ của góc hoặc từ khóa xác định góc hướng của đường gradient. Đối số tùy chọn.
• Danh sách hai hoặc nhiều màu được phân tách bằng dấu phẩy, mỗi màu có thể được theo sau bởi một vị trí dừng.

Độ dốc tuyến tính đơn giản nhất chỉ yêu cầu hai đối số xác định màu bắt đầu và màu kết thúc:

Div ( hình nền: gradient tuyến tính (đen, trắng); chiều rộng: 200px; chiều cao: 200px; ) Thử "

Truyền hai đối số cho hàm sẽ đặt một gradient dọc với điểm bắt đầu ở trên cùng.

Hướng của đường gradient có thể được xác định theo hai cách:

Sử dụng độ Làm đối số đầu tiên, bạn có thể truyền độ của góc của đường gradient, xác định hướng của gradient, ví dụ: góc 0deg (viết tắt của độ - độ) xác định đường gradient từ viền dưới của phần tử lên trên cùng, góc 90 độ xác định đường gradient từ trái sang phải, v.v. Nói một cách đơn giản, góc dương biểu thị sự quay theo chiều kim đồng hồ, góc âm biểu thị sự quay ngược chiều kim đồng hồ. Sử dụng từ khóa Các từ khóa "lên trên", "sang phải", "xuống dưới" hoặc "sang trái" cũng có thể được chuyển làm đối số đầu tiên, các từ khóa này biểu thị các góc của các đường gradient "0deg" "90deg" "180deg" " 270 độ" tương ứng.

Góc cũng có thể được đặt bằng cách sử dụng hai từ khóa, ví dụ: trên cùng bên phải - đường chuyển màu hướng đến góc trên bên phải.

Một ví dụ về độ dốc được chỉ định theo các hướng khác nhau:

Div ( lề: 10px; chiều rộng: 200px; chiều cao: 200px; float: trái; ) #one ( hình nền: gradient tuyến tính (sang trái, đen, đỏ); ) #hai ( hình nền: tuyến tính-gradient( ở trên cùng bên trái, đen, đỏ); #ba (hình nền: gradient tuyến tính (65deg, đen, vàng); ) Thử "

Như đã đề cập, một gradient tuyến tính có thể bao gồm danh sách nhiều hơn hai màu, được phân tách bằng dấu phẩy và trình duyệt sẽ phân bổ chúng đồng đều trên toàn bộ khu vực có sẵn:

Div ( lề: 10px; chiều rộng: 200px; chiều cao: 200px; float: trái; ) #one ( hình nền: tuyến tính-gradient(sang phải, đỏ, xanh lam, vàng); ) #two ( hình nền: tuyến tính- gradient (lên trên cùng bên trái, xanh lam, trắng, xanh lam) Thử "

Sau một màu, bạn có thể chỉ định vị trí dừng cho màu đó, vị trí này xác định vị trí của màu (nơi một màu bắt đầu chuyển sang màu khác) so với điểm bắt đầu và điểm kết thúc của dải màu. Vị trí dừng được chỉ định bằng cách sử dụng đơn vị hoặc tỷ lệ phần trăm được CSS hỗ trợ. Khi sử dụng tỷ lệ phần trăm, vị trí dừng vị trí được tính tùy thuộc vào độ dài của đường dốc. Giá trị 0% là điểm bắt đầu của gradient, 100% là điểm kết thúc.

Div ( lề: 10px; chiều rộng: 200px; chiều cao: 200px; float: trái; ) #one ( hình nền: gradient tuyến tính (lên trên cùng bên phải, xanh lam, trắng 70%, xanh lam); ) #hai ( hình nền : gradient tuyến tính(ở dưới cùng bên phải, vàng 10%, trắng, đỏ, đen 90%);) #ba ( hình nền: gradient tuyến tính(ở bên phải, đen 10%, vàng, đen 90%); ) Thử "

Giá trị màu có thể được chỉ định theo nhiều cách khác nhau, ví dụ: chỉ định tên màu, sử dụng giá trị thập lục phân(HEX), sử dụng cú pháp RGB(RGBA) hoặc HSL(HSLA). Ví dụ: sử dụng gradient có độ trong suốt có thể được sử dụng kết hợp với màu nền hoặc hình ảnh bên dưới gradient để tạo hiệu ứng hình ảnh thú vị:

Div ( lề: 10px; chiều rộng: 300px; chiều cao: 100px; màu nền: xanh lá cây; ) #one ( nền: gradient tuyến tính (sang trái, rgb(255,255,0), rgba(255,255,0,0)); ) #two ( nền: gradient tuyến tính(rgb(255,255,255), rgba(255,255,255,0)); )