Home-theater-designers
Nếu bạn đã truy cập internet hơn vài phút, rất có thể bạn đã bắt gặp CSS gradient. Thuộc tính nền CSS có thể được sử dụng để tạo một loạt các kiểu khác nhau và một trong những kiểu hấp dẫn nhất là những gì nó có thể làm với giá trị gradient.
Biết cách thiết kế và tạo các gradient CSS khác nhau là tài sản cho bất kỳ nhà thiết kế hoặc nhà phát triển phần mềm nào. Từ bài viết này, bạn sẽ tìm hiểu mọi thứ bạn cần biết để bắt đầu kết hợp các gradient CSS trong các dự án của mình.
CSS Gradient là gì?
CSS gradient về cơ bản là sự kết hợp của hai hoặc nhiều màu giúp chuyển đổi mượt mà từ màu này sang màu tiếp theo. Trạng thái chuyển tiếp của gradient CSS phụ thuộc vào loại gradient được sử dụng. Có hai loại gradient chính thường được sử dụng trong thiết kế phần mềm: tuyến tính và xuyên tâm.
Tuy nhiên, có một loại gradient thứ ba ít phổ biến hơn và được gọi là gradient conic.
Cú pháp CSS Gradients
Background-image: gradient-type (direction, color1, color2);
Gradient CSS phải được gán cho thuộc tính CSS background-image. Loại gradient có thể là một trong nhiều loại; linear-gradient, radial-gradient hoặc conic-gradient. Loại gradient được theo sau bởi dấu ngoặc mở và đóng có chứa hướng chuyển tiếp của gradient, cũng như các màu được đưa vào gradient.
Có liên quan: Cách đặt hình nền trong CSS
Ví dụ trên cho thấy hai màu, nhưng một gradient có thể chứa một số màu khác nhau. Yêu cầu duy nhất là mỗi màu trong danh sách được phân tách bằng dấu phẩy.
Gradient tuyến tính là gì?
Gradient tuyến tính là gradient CSS phổ biến nhất. Nó tạo ra một gradient chuyển tiếp ngang, dọc hoặc chéo bằng cách sử dụng hai hoặc nhiều màu.
Ví dụ về CSS Linear Gradient
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Đoạn mã trên sẽ tạo ra CSS gradient sau:
Có một thành phần chính của cú pháp gradient bị bỏ qua trong ví dụ trên. Thành phần này là hướng chuyển tiếp của gradient và nó đã bị bỏ qua vì căn chỉnh mặc định của gradient tuyến tính là thẳng đứng (từ trên xuống dưới); đó là đầu ra mong muốn trong ví dụ này.
Đoạn mã trên tạo ra kết quả tương tự như dòng mã sau. Sự khác biệt duy nhất giữa hai là phần hướng của mã.
Sử dụng Ví dụ Gradient Bottom Linear
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Như bạn có thể thấy từ đầu ra, đoạn mã trên tạo ra một gradient bắt đầu bằng màu xanh lam ở trên cùng, sau đó từ từ chuyển sang màu cam ở dưới cùng. Nếu bạn muốn đảo ngược thứ tự của các màu, bạn có thể chỉ cần thay thế xuống dưới với lên đầu và điều này sẽ đảo ngược hướng của gradient, tạo ra kết quả sau:
Tương tự như căn chỉnh theo chiều dọc, căn chỉnh theo chiều ngang của một gradient có thể đạt được bằng cách sử dụng hai bộ từ khóa hướng: sang trái và bên phải , sẽ tạo ra các kết quả đầu ra sau đây, tương ứng.
làm thế nào để nói với amazon rằng bạn không nhận được một gói hàng
Gradient tuyến tính chéo
Có thể đạt được sự chuyển đổi gradient tuyến tính theo đường chéo theo bất kỳ hướng nào của gradient tuyến tính. Chỉ có bốn danh sách từ khóa cụ thể mà bạn cần biết để thực hiện điều này.
- Dưới cùng bên phải
- Đến dưới cùng bên trái
- Trên cùng bên phải
- Trên cùng bên trái
Sử dụng ví dụ về Gradient tuyến tính chéo
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Ví dụ trên tạo ra kết quả sau:
Như bạn có thể thấy từ đầu ra ở trên, gradient tuyến tính thực hiện chuyển đổi của nó theo hướng chéo di chuyển từ phần trên bên trái sang phần dưới cùng bên phải của gradient.
Gradient tuyến tính nhiều màu
Một gradient tuyến tính có thể có hai hoặc nhiều màu, nhưng nhiều màu hơn trông như thế nào trong một gradient? Sự sắp xếp màu gradient tuyến tính nhiều màu phụ thuộc vào hướng của nó. Những màu chuyển tiếp theo hướng ngang sẽ có mỗi màu mới xuất hiện ở bên trái hoặc bên phải của gradient tuyến tính, tùy thuộc vào hướng chính xác của gradient tuyến tính.
Ví dụ về Gradient Linear Nhiều màu
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Dòng mã trên sẽ tạo ra kết quả sau:
Như bạn có thể thấy, mỗi màu mới được thêm vào bên phải của gradient, tạo ra những gì cuối cùng biến thành cầu vồng. Sản lượng tương tự có thể đạt được theo hướng thẳng đứng; tuy nhiên, sự sắp xếp màu cụ thể trên gradient tuyến tính sẽ phụ thuộc vào từ khóa hướng dọc (lên trên hoặc xuống dưới).
Gradient xuyên tâm là gì?
Radial gradient tạo ra một gradient xoắn ốc gồm hai màu khác bắt đầu từ trung tâm theo mặc định. Trong đó gradient tuyến tính tạo ra một gradient thẳng chảy theo chiều dọc hoặc theo chiều ngang, thì gradient xuyên tâm tạo ra một gradient tròn chảy từ tâm ra các cạnh bên ngoài.
Sử dụng Ví dụ về Gradient Radial
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Dòng mã trên sẽ tạo ra kết quả sau:
Thay đổi tâm chuyển màu xuyên tâm
Theo mặc định, một gradient xuyên tâm bắt đầu ở tâm của gradient; tuy nhiên, có thể thay đổi điểm xuất phát với việc giới thiệu một vài từ khóa.
gmail cách thay đổi tài khoản mặc định
Ví dụ về thay đổi vị trí bắt đầu Gradient Radial
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Dòng mã trên sẽ tạo ra kết quả sau:
Như bạn có thể thấy từ đầu ra phía trên, gradient bây giờ bắt đầu từ góc trên cùng bên phải thay vì trung tâm. Thay đổi này có thể thực hiện được vì đã bao gồm từ khóa trên cùng bên phải trong đoạn mã trên. Danh sách các từ khóa sau đây cũng có thể được sử dụng để thay đổi điểm gốc của gradient xuyên tâm:
- Trên cùng bên trái
- Góc phải ở phía dưới
- Dưới cùng bên trái
Gradients xuyên tâm nhiều màu
Giống như gradient tuyến tính, gradient xuyên tâm cũng có thể sử dụng hai màu nhiều hơn, sự khác biệt chính là nơi gradient tuyến tính thêm vào gradient theo đường thẳng, gradient xuyên tâm thêm màu mới ở cạnh ngoài.
Ví dụ về Gradient Radial Nhiều màu
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Dòng mã trên sẽ tạo ra kết quả sau:
Tùy chỉnh Gradients
Cho đến nay, bạn đã biết cách thay đổi hướng và điểm trung tâm của gradient, nhưng bạn chưa biết cách tùy chỉnh gradient. Tùy chỉnh gradient nghe có vẻ tốn nhiều công sức, nhưng một khi bạn hiểu những kiến thức cơ bản về cách tạo gradient nền CSS, bước rõ ràng tiếp theo là tìm hiểu cách làm cho CSS gradient của bạn độc đáo hơn.
ai đó đã chặn tôi trên facebook làm thế nào tôi có thể xem hồ sơ của họ
Theo mặc định, các màu trong gradient chiếm một lượng không gian được phân bổ đều với mỗi màu chuyển tiếp sang màu sau nó một cách mượt mà. Vì vậy, nếu hai màu được kết hợp để tạo thành một gradient, mỗi màu sẽ chiếm một nửa không gian có sẵn trong khi chuyển đổi từ màu này sang màu khác. Nếu ba màu được kết hợp, mỗi màu sẽ chiếm một phần ba không gian có sẵn.
Với một gradient tùy chỉnh, bạn có thể xác định lượng không gian mà một màu sẽ chiếm trong một gradient bằng cách chỉ định rõ ràng vị trí dừng màu .
Tùy chỉnh Gradient tuyến tính Ví dụ 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Dòng mã trên sẽ tạo ra kết quả sau:
Kết quả đầu ra ở trên hiển thị màu thứ hai trong gradient tuyến tính dừng ở điểm 30% của màu đầu tiên trong gradient, thay vì vị trí thông thường của nó và vì màu thứ hai cũng là màu cuối cùng trong gradient nên nó tự nhiên kéo dài đến cuối .
Nếu bạn đặt 30% trong đoạn mã trên vào cuối màu đầu tiên, mọi thứ sẽ trở nên rõ ràng hơn.
Tùy chỉnh Gradient tuyến tính Ví dụ 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Đoạn mã trên sẽ tạo ra kết quả sau.
Kết quả đầu ra ở trên hiển thị rõ ràng màu đầu tiên trong gradient dừng ở điểm 30% của màu thứ hai trong gradient. Ví dụ này cùng với ví dụ ở trên sẽ giúp bạn dễ hiểu hơn về tùy chỉnh dừng màu.
Tùy chỉnh một gradient xuyên tâm được thực hiện theo cách tương tự như một gradient tuyến tính. Điều duy nhất bạn cần làm để đạt được kết quả tương tự ở trên trong một gradient xuyên tâm là thay đổi loại và hướng của gradient.
Tạo CSS Gradients chưa bao giờ dễ dàng hơn
Bài viết hướng dẫn này cung cấp cho bạn các công cụ để xác định và tạo các gradient tuyến tính và xuyên tâm. Nếu bạn đã làm đến thời điểm này, bạn đã học được cách thay đổi hướng và tâm của một gradient. Ngoài ra, giờ đây bạn có các kỹ năng để tùy chỉnh các gradient CSS và tạo các gradient nền độc đáo.
Tuy nhiên, nếu bạn không muốn đi thẳng vào việc tạo các gradient mới và độc đáo, bạn có thể bắt đầu bằng cách tạo một số gradient trông đẹp mắt đã có từ trước.
Đăng lại Đăng lại tiếng riu ríu E-mail 27 Ví dụ về Gradient Nền CSS Phong cáchMàu sắc chắc chắn là như vậy năm ngoái. Gradients đang ở trong! Nhưng làm thế nào để bạn tạo chúng trong CSS?
Đọc tiếp Chủ đề liên quan- Lập trình
- Phát triển web
- Thiết kế web
- CSS
Kadeisha Kean là Nhà phát triển Phần mềm Full-Stack và Người viết Kỹ thuật / Công nghệ. Cô ấy có khả năng khác biệt để đơn giản hóa một số khái niệm công nghệ phức tạp nhất; sản xuất vật liệu có thể dễ dàng hiểu được bởi bất kỳ người mới làm quen với công nghệ. Cô ấy đam mê viết lách, phát triển phần mềm thú vị và đi khắp thế giới (thông qua phim tài liệu).
Xem thêm từ Kadeisha KeanTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký