Gradients Trong CSS - W3seo Tìm Hiểu Và Sử Dụng Gradient Color ...

Rate this post

Cũng giống như bạn có thể khai báo nền của một phần tử là một màu đồng nhất trong CSS, bạn cũng có thể khai báo nền đó là một gradient. Sử dụng gradient được khai báo trong CSS, thay vì sử dụng tệp hình ảnh thực tế, sẽ tốt hơn cho việc kiểm soát và hiệu suất.

Gradients thường là một màu mờ dần thành một màu khác, nhưng trong CSS, bạn có thể kiểm soát mọi khía cạnh của cách điều đó xảy ra, từ hướng đến màu sắc (bao nhiêu tùy thích) đến nơi những thay đổi màu đó xảy ra. Hãy cùng trải qua tất cả.

Hướng dẫn khác:

1. Linear-gradient trong CSS
2. background-position trong CSS
3. Màu Trong Suốt Trong CSS: Khái Niệm và Ứng Dụng
4. CSS selectors nâng cao
5. CSS :: before và :: after trong CSS
6. CSS là gì? cách hoạt động và cách học CSS

Tóm tắt nội dung

Toggle

• Gradients là hình nền
  • Linear Gradient
  • Hỗ trợ trình duyệt / Tiền tố
  • IE filters
  • Radial Gradients
  • Conic Gradients
  • Repeating Gradients

Gradients là hình nền

Trong khi khai báo một màu đồng nhất sử dụng thuộc tính background-color trong CSS, các gradient sử dụng background-image. Điều này hữu ích theo một số cách mà chúng ta sẽ đề cập sau. Thuộc tính nền tốc ký sẽ biết ý bạn nếu bạn khai báo cái này hay cái kia.

.gradient { /* màu background đỏ */ background-color: red; /* sử dụng bacground linear-gradient */ background-image: linear-gradient(red, orange); /* background */ background: red; background: linear-gradient(red, orange); }

Xem thêm 10 Brush Gradient tốt nhất cho Procreate

Linear Gradient

Linear Gradient là thuộc tính CSS tạo ra một image là kết quả của sự chuyển đổi liên tục giữa hai hay nhiều màu sắc theo dạng đường thẳng. Kết quả của quá trình này là một kiểu dữ liệu <gradient>, là một dạng hình ảnh đặc biệt.

Có lẽ loại gradient phổ biến và hữu ích nhất là linear-gradient (). “linear” chuyển sắc có thể đi từ trái sang phải, từ trên xuống dưới hoặc ở bất kỳ góc nào bạn đã chọn.

Không khai báo một góc sẽ giả sử từ trên xuống dưới:

<div class="gradient"> </div> div { height: 100px; background-color: red; background-image: linear-gradient( red, #f06d06 ); }

Các màu được phân tách bằng dấu phẩy đó có thể là loại màu mà bạn thường sử dụng: Hex, các màu được đặt tên, rgba, hsla, v.v.

Xem thêm CSS là gì? cách hoạt động và cách học CSS

Để làm cho nó từ trái sang phải, bạn chuyển một tham số bổ sung vào đầu của hàm linear-gradient () bắt đầu bằng từ “tới”, cho biết hướng, chẳng hạn như “sang phải”:

div { height: 100px; background-color: red; background-image: linear-gradient( to right, red, #f06d06 ); } <div class="gradient"> </div>

Cú pháp “đến” này cũng hoạt động cho các góc. Ví dụ: nếu bạn muốn trục của gradient bắt đầu ở góc dưới cùng bên trái và chuyển đến góc trên cùng bên phải, bạn có thể nói “ở trên cùng bên phải”:

div { height: 100px; background-color: red; background-image: linear-gradient( to top right, red, #f06d06 ); }

Nếu hộp đó là hình vuông, góc của gradient đó sẽ là 45 °, nhưng vì nó không phải nên không phải vậy. Nếu bạn muốn chắc chắn rằng nó là 45 °, bạn có thể khai báo rằng:

.gradient { background-image: linear-gradient( 45deg, red, #f06d06 ); }

Bạn cũng không bị giới hạn chỉ với hai màu. Trên thực tế, bạn có thể có bao nhiêu màu được phân tách bằng dấu phẩy tùy thích. Đây là bốn:

.gradient { background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green ); }

Bạn cũng có thể khai báo nơi bạn muốn bất kỳ màu cụ thể nào “bắt đầu”. Chúng được gọi là “điểm dừng màu”. Giả sử bạn muốn màu vàng chiếm phần lớn không gian, nhưng ban đầu chỉ có một chút màu đỏ, bạn có thể khiến màu vàng dừng lại khá sớm:

div { height: 100px; background-color: red; background-image: linear-gradient( to right, red, yellow 10% ); }

Chúng ta có xu hướng nghĩ về gradient là màu nhạt dần, nhưng nếu bạn có hai điểm dừng màu giống nhau, bạn có thể làm cho một màu đồng nhất ngay lập tức thay đổi thành một màu đồng nhất khác. Điều này có thể hữu ích để khai báo nền có chiều cao đầy đủ mô phỏng các cột.

div { height: 100px; background-color: red; background-image: linear-gradient( to right, #fffdc2, #fffdc2 15%, #d7f0a2 15%, #d7f0a2 85%, #fffdc2 85% ); }

Xem thêm Kiểm tra lỗ hổng bảo mật CSS Injection

Hỗ trợ trình duyệt / Tiền tố

Cho đến nay chúng ta mới chỉ xem xét cú pháp mới, nhưng CSS gradient đã xuất hiện được một thời gian. Hỗ trợ trình duyệt là tốt. Nơi mà nó trở nên phức tạp là cú pháp và tiền tố. Có ba cú pháp khác nhau mà các trình duyệt đã hỗ trợ. Đây không phải là tên gọi chính thức của chúng, nhưng bạn có thể nghĩ về nó như:

• Old: cách chỉ dành cho WebKit gốc, với những thứ như from () và color-stop ()
• Tweener: hệ thống góc cũ, ví dụ: “left”
• New: hệ thống góc mới, ví dụ: “to right”

Có một số chồng chéo trong đó. Ví dụ: khi một trình duyệt hỗ trợ cú pháp Mới, chúng có thể cũng hỗ trợ các cú pháp cũ hơn, bao gồm cả tiền tố. Cách tốt nhất là: nếu nó hỗ trợ Mới, hãy sử dụng Mới.

Vì vậy, nếu bạn muốn hỗ trợ trình duyệt sâu nhất có thể, một gradient tuyến tính có thể trông như thế này:

.gradient { /* Fallback (could use .jpg/.png alternatively) */ background-color: red; /* SVG fallback for IE 9 (could be data URI, or could use filter) */ background-image: url(fallback-gradient.svg); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */ background-image: -webkit-gradient(linear, left top, right top, from(red), to(#f06d06)); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background-image: -webkit-linear-gradient(left, red, #f06d06); /* Firefox 3.6 - 15 */ background-image: -moz-linear-gradient(left, red, #f06d06); /* Opera 11.1 - 12 */ background-image: -o-linear-gradient(left, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */ background-image: linear-gradient(to right, red, #f06d06); }

Đó là rất nhiều Code ở đó. Làm bằng tay sẽ dễ xảy ra sai sót và tốn nhiều công sức. Autoprefixer làm rất tốt với nó, cho phép bạn cắt bớt lượng mã đó trở lại khi bạn quyết định những trình duyệt nào sẽ hỗ trợ.

Mixin La bàn có thể thực hiện URI dữ liệu SVG cho IE 9 nếu điều đó quan trọng với bạn.

Xem thêm Xử lý và sử dụng chuỗi trong ngôn ngữ SAS

Để làm phức tạp mọi thứ thêm một chút, cách thức hoạt động của độ trong cú pháp Old và New có một chút khác biệt. Cách Old(và TWEENER – thường có tiền tố) xác định 0deg và từ trái sang phải và tiến hành ngược chiều kim đồng hồ, trong khi cách New(thường không có tiền tố) xác định 0deg là từ dưới lên trên và tiến hành theo chiều kim đồng hồ.

Ví dụ:

OLD (or TWEENER) = (450 – new) % 360

NEW = 90 – OLDOLD = 90 – NEW

OLD linear-gradient(135deg, red, blue)NEW linear-gradient(315deg, red, blue)

IE filters

Internet Explorer (IE) 6-9, mặc dù chúng không hỗ trợ cú pháp CSS gradient, nhưng cung cấp một cách lập trình để thực hiện gradient nền

/* "Invalid", but works in 6-8 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB); /* Valid, works in 8-9 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Có một số cân nhắc ở đây khi quyết định sử dụng cái này hay không:

• bộ lọc thường được coi là một thực tiễn không tốt cho hiệu suất,
• background-image ghi đè bộ lọc, vì vậy nếu bạn cần sử dụng bộ lọc đó để dự phòng, bộ lọc sẽ không hoạt động. Nếu một màu đồng nhất là một màu dự phòng có thể chấp nhận được (màu nền), thì khả năng là bộ lọc

Mặc dù các bộ lọc chỉ hoạt động với các giá trị hex, bạn vẫn có thể có được độ trong suốt alpha bằng cách đặt trước giá trị hex với lượng trong suốt từ 00 (0%) đến FF (100%).

Thí dụ:

rgba(92,47,90,1) == #FF5C2F5Argba(92,47,90,0) == #005C2F5A

Radial Gradients

Radial Gradient khác với tuyến tính ở chỗ chúng bắt đầu tại một điểm duy nhất và phát ra bên ngoài. Gradients thường được sử dụng để mô phỏng ánh sáng, như chúng ta biết không phải lúc nào cũng thẳng, vì vậy chúng có thể hữu ích để làm cho gradient có vẻ tự nhiên hơn.

Mặc định là màu đầu tiên bắt đầu ở (chính giữa) của phần tử và mờ dần đến màu cuối về phía cạnh của phần tử. Sự mờ dần xảy ra với tốc độ bằng nhau bất kể hướng nào.

div { height: 100px; background-color: red; background-image: radial-gradient( yellow, #f06d06 ); }

Bạn có thể thấy cách mà gradient đó tạo ra một hình elip, vì phần tử không phải là một hình vuông. Đó là mặc định (hình elip, là tham số đầu tiên), nhưng nếu chúng ta nói rằng chúng ta muốn một hình tròn, chúng ta có thể buộc nó phải như vậy:

.gradient { background-image: radial-gradient( circle, yellow, #f06d06 ); }

Lưu ý rằng gradient là hình tròn, nhưng chỉ mờ dần đến màu kết thúc dọc theo cạnh xa nhất. Nếu chúng tôi cần vòng tròn đó nằm hoàn toàn trong phần tử, chúng tôi có thể đảm bảo rằng bằng cách chỉ định chúng tôi muốn phần mờ dần kết thúc bởi “cạnh gần nhất” dưới dạng giá trị được phân tách bằng dấu cách khỏi hình dạng, như:

div { height: 100px; background-color: red; background-image: radial-gradient( circle closest-side, yellow, #f06d06 ); }

Các giá trị có thể có ở đó là: góc gần nhất, cạnh gần nhất, góc xa nhất, phía xa nhất. Bạn có thể nghĩ về nó như: “Tôi muốn gradient xuyên tâm này mờ dần từ điểm trung tâm đến __________ và ở mọi nơi khác sẽ lấp đầy để phù hợp với điều đó.”

Gradient xuyên tâm cũng không nhất thiết phải bắt đầu ở tâm mặc định, bạn có thể chỉ định một điểm nhất định bằng cách sử dụng “at ______” như một phần của tham số đầu tiên, như:

Tôi sẽ làm cho nó rõ ràng hơn ở đây bằng cách làm cho ví dụ thành hình vuông và điều chỉnh điểm dừng màu:

div { height: 200px; width: 200px; background-color: red; background-image: radial-gradient( circle at top right, yellow, #f06d06 50% ); }

Hỗ trợ của trình duyệt cho gradient xuyên tâm phần lớn giống như linear-gradient (), ngoại trừ một phiên bản Opera rất cũ, ngay khi họ bắt đầu hỗ trợ gradient, chỉ có tuyến tính chứ không phải hướng tâm.

Nhưng tương tự như tuyến tính, radial-gradient () đã trải qua một số thay đổi về cú pháp. Lại có: “Old”, “Tweener” và “New”.

/* Example of Old */ background-image: -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple)); /* Example of Tweener */ background-image: -webkit-radial-gradient(45px 45px, farthest-corner, #F00 0%, #00F 100%) repeat scroll 0% 0% rgba(0, 0, 0, 0); /* Example of New */ background-image: radial-gradient(circle farthest-side at right, #00F, #FFF);

Các dấu hiệu nhận biết là:

• Old: Có tiền tố là -webkit-, những thứ như from () và color-stop ()
• Tweener: Thông số đầu tiên là vị trí của trung tâm. Điều đó sẽ hoàn toàn bị phá vỡ ngay bây giờ trong các trình duyệt hỗ trợ cú pháp mới không có tiền tố, vì vậy hãy đảm bảo rằng bất kỳ cú pháp tweener nào cũng được đặt tiền tố.
• New: Thông số đầu tiên dài dòng, chẳng hạn như “vòng tròn góc gần nhất ở trên cùng bên phải”

Một lần nữa, tôi sẽ để Trình sửa lỗi tự động xử lý việc này. Bạn viết theo cú pháp mới nhất, nó thực hiện dự phòng. Các gradient xuyên tâm có nhiều tâm trí hơn là tuyến tính, vì vậy tôi khuyên bạn nên cố gắng làm quen với cú pháp mới nhất và tiếp tục với điều đó (và nếu cần, hãy quên những gì bạn biết về các cú pháp cũ hơn).

Conic Gradients

Một gradient conic tương tự như một gradient radial. Cả hai đều là sử dụng hình tròn và sử dụng tâm của các phần tử làm điểm nguồn cho các điểm stop color. Tuy nhiên, khi stop color của một gradient radial xuất hiện từ vị trí tâm của vòng tròn, một gradient conic sẽ đặt chúng xung quanh vòng tròn.

Minh họa sự khác biệt giữa gradient Conic (trái) và Radial (phải).

Chúng được gọi là “hình nón” vì chúng có xu hướng trông giống như hình dạng của một hình nón đang được nhìn từ trên xuống. Chà, ít nhất là khi có một góc riêng biệt được cung cấp và độ tương phản giữa các giá trị màu đủ lớn để tạo ra sự khác biệt.

Cú pháp gradient conic dễ hiểu hơn bằng tiếng Anh đơn giản:

Tạo một gradient conic nằm ở [một số điểm] bắt đầu với [một màu] ở một số góc và kết thúc bằng [một màu khác] ở [một số góc]

Ở cấp độ cơ bản nhất, nó trông giống như sau:

.conic-gradient { background: conic-gradient(#fff, #000); }

… Trong đó giả định rằng vị trí của gradient bắt đầu ở chính giữa phần tử (50% 50%) và được phân phối đều giữa các giá trị màu trắng và đen.

Chúng tôi có thể viết điều này theo một số cách khác, tất cả đều hợp lệ:

.conic-gradient { /* ví dụ về conic gradient */ background-image: conic-gradient(#fff, #000); background: conic-gradient(at 50% 50%, #fff, #000); background: conic-gradient(from 0deg, #fff, #000); background: conic-gradient(from 0deg at center, #fff, #000); background: conic-gradient(#fff 0%, #000 100%); background: conic-gradient(#fff 0deg, #000 1turn); }

Nếu chúng ta không chỉ định góc cho các màu, thì giả sử rằng gradient được chia đều giữa các màu, bắt đầu ở 0deg và kết thúc ở 360deg. Loại đó tạo ra một điểm dừng cố định trong đó các màu sắc tương phản với nhau ở 0deg và 360deg. Nếu màu bắt đầu của chúng ta bắt đầu ở một nơi khác trên vòng tròn, hãy nói một phần tư chặng đường ở 90deg, sau đó điều đó tạo ra một gradient mượt mà hơn và chúng ta bắt đầu có được phối cảnh hình nón thú vị đó.

.conic-gradient { background: conic-gradient(from 90deg, #fff, #000); }

Chúng ta có thể vui chơi với các gradient hình nón. Đối với các ví dụ, chúng tôi có thể sử dụng nó để tạo ra cùng một loại mẫu mà bạn có thể thấy trong công cụ chọn màu hoặc chỉ báo quả bóng bãi biển đang quay nổi tiếng của Mac:

.conic-gradient { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }

Hoặc, hãy thử một biểu đồ hình tròn đơn giản bằng cách thêm các điểm dừng cố định giữa ba giá trị màu:

.conic-gradient { background: conic-gradient(lime 40%, yellow 0 70%, red 0); }

Một mô hình minh họa một gradient hình nón mô phỏng một biểu đồ hình tròn ba màu đơn giản.

Conic Gradiant hỗ trợ trình duyệt

Repeating Gradients

Với trình duyệt ngày càng ít hỗ trợ đang Repeating các gradient. Chúng có cả dạng tuyến tính và dạng radial.

Có một mẹo, với các gradient không Repeating, để tạo gradient theo cách mà nếu nó là một hình chữ nhật nhỏ, nó sẽ xếp hàng với các phiên bản hình chữ nhật nhỏ khác của chính nó để tạo ra một mẫu Repeating. Vì vậy, về cơ bản tạo gradient đó và thiết lập kích thước nền để tạo ra hình chữ nhật nhỏ bé đó. Điều đó giúp bạn dễ dàng tạo ra các đường sọc, sau đó bạn có thể xoay hoặc bất cứ thứ gì.

.repeat { width: 100px; height: 100px; background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); }

Với epeating-linear-gradient(), bạn không cần phải dùng đến thủ thuật đó. Kích thước của gradient được xác định bởi điểm dừng màu cuối cùng. Nếu đó là 20px, kích thước của gradient (sau đó Repeating) là một hình vuông 20px x 20px.

.box { width: 200px; height: 200px; background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); }

Xem thêm Selenium IDE- xác định phần tử html cho testing website