Rate this post
Cũng giống như bạn hoàn toàn có thể khai báo nền của một thành phần là một màu như nhau trong CSS, bạn cũng hoàn toàn 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 tiễn, sẽ tốt hơn cho việc trấn áp 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 hoàn toàn có thể trấn áp mọi góc nhìn của cách điều đó xảy ra, từ hướng đến sắc tố ( bao nhiêu tùy thích ) đến nơi những biến hóa màu đó xảy ra. Hãy cùng trải qua toàn bộ .
Các bài viết liên quan:
Tóm Tắt
Gradients là hình nền
Trong khi khai báo một màu như nhau sử dụng thuộc tính background-color trong CSS, những gradient sử dụng background-image. Điều này có ích theo 1 số ít cách mà tất cả 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
Gradient tuyến tính
Có lẽ loại gradient thông dụng và hữu dụng nhất là linear-gradient ( ). “ Trục ” chuyển sắc hoàn toàn 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 {
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 đó hoàn toàn có thể là loại màu mà bạn thường sử dụng : Hex, những màu được đặt tên, rgba, hsla, v.v.
Xem thêm CSS là gì ? cách hoạt động giải trí 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ổ trợ vào đầu của hàm linear-gradient ( ) khởi đầu bằng từ “ tới ”, cho biết hướng, ví dụ điển hình như “ sang phải ” :
div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
red, #f06d06
);
}
Cú pháp “ đến ” này cũng hoạt động giải trí cho những góc. Ví dụ : nếu bạn muốn trục của gradient khởi đầ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 hoàn toà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 vắn, 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 như đinh rằng nó là 45 °, bạn hoàn toàn có thể khai báo rằng :
.gradient {
background-image:
linear-gradient(
45deg,
red, #f06d06
);
}
Bạn cũng không bị số lượng giới hạn chỉ với hai màu. Trên thực tiễn, bạn hoàn toà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 hoàn toàn có thể khai báo nơi bạn muốn bất kể màu đơn cử nào “ khởi đầ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 nhiều khoảng trống, nhưng bắt đầu chỉ có một chút ít màu đỏ, bạn hoàn toà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ó khuynh 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 hoàn toàn có thể làm cho một màu như nhau ngay lập tức đổi khác thành một màu giống hệt khác. Điều này hoàn toàn có thể hữu dụng để khai báo nền có độ cao rất đầy đủ mô phỏng những 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 thông tin CSS Injection
Hỗ trợ trình duyệt / Tiền tố
Cho đến nay tất cả chúng ta mới chỉ xem xét cú pháp mới, nhưng CSS gradient đã Open được một thời hạn. 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à những trình duyệt đã tương hỗ. Đây không phải là tên gọi chính thức của chúng, nhưng bạn hoàn toà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ó 1 số ít chồng chéo trong đó. Ví dụ : khi một trình duyệt tương hỗ cú pháp Mới, chúng hoàn toàn có thể cũng tương hỗ những cú pháp cũ hơn, gồm có cả tiền tố. Cách tốt nhất là : nếu nó tương hỗ Mới, hãy sử dụng Mới .
Vì vậy, nếu bạn muốn tương hỗ trình duyệt sâu nhất hoàn toàn có thể, một gradient tuyến tính hoàn toàn 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 của con người. Autoprefixer làm rất tốt với nó, được cho phép bạn cắt bớt lượng mã đó trở lại khi bạn quyết định hành động những trình duyệt nào sẽ tương hỗ .
Mixin La bàn hoàn toàn có thể thực thi 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 từ SAS
Để làm phức tạp mọi thứ thêm một chút ít, phương pháp hoạt động giải trí của độ trong cú pháp Old và New có một chút ít độc lạ. Cách Old ( và TWEENER – thường có tiền tố ) xác lập 0 deg và từ trái sang phải và thực thi ngược chiều kim đồng hồ đeo tay, trong khi cách New ( thường không có tiền tố ) xác lập 0 deg là từ dưới lên trên và thực thi theo chiều kim đồng hồ đeo tay .
Ví dụ :
OLD (or TWEENER) = (450 – new) % 360
NEW = 90 – OLD
OLD = 90 – NEW
OLD linear-gradient(135deg, red, blue)
NEW linear-gradient(315deg, red, blue)
IE filters
Internet Explorer ( IE ) 6-9, mặc dầu chúng không tương hỗ cú pháp CSS gradient, nhưng cung ứng một cách lập trình để thực thi 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:
Xem thêm: Khối finally trong Java
- 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ù những bộ lọc chỉ hoạt động giải trí với những giá trị hex, bạn vẫn hoàn toà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) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A
Radial Gradients
Radial Gradient khác với tuyến tính ở chỗ chúng mở màn 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ư tất cả chúng ta biết không phải khi nào cũng thẳng, vì thế chúng hoàn toàn có thể có ích để làm cho gradient có vẻ như tự nhiên hơn .
Mặc định là màu tiên phong mở màn ở ( chính giữa ) của thành phần và mờ dần đến màu cuối về phía cạnh của thành phần. Sự mờ dần xảy ra với vận 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 hoàn toàn có thể thấy cách mà gradient đó tạo ra một hình elip, vì thành phần không phải là một hình vuông vắn. Đó là mặc định ( hình elip, là tham số tiên phong ), nhưng nếu tất cả chúng ta nói rằng tất cả chúng ta muốn một hình tròn trụ, tất cả chúng ta hoàn toàn 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 trụ, 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 trọn vẹn trong thành phần, chúng tôi hoàn toàn có thể bảo vệ 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ị hoàn toàn 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 hoàn toàn có thể nghĩ về nó như : “ Tôi muốn gradient xuyên tâm này mờ dần từ điểm TT đến __________ và ở mọi nơi khác sẽ lấp đầy để tương thích với điều đó. ”
Gradient xuyên tâm cũng không nhất thiết phải mở màn ở tâm mặc định, bạn hoàn toà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ố tiên phong, 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ắn và kiểm soát 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 nhiều giống như linear-gradient ( ), ngoại trừ một phiên bản Opera rất cũ, ngay khi họ khởi đầu tương hỗ gradient, chỉ có tuyến tính chứ không phải hướng tâm .
Nhưng tương tự như như tuyến tính, radial-gradient ( ) đã trải qua 1 số ít đổi khác 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 hóa giải quyết và xử lý việc này. Bạn viết theo cú pháp mới nhất, nó triển khai dự trữ. Các gradient xuyên tâm có nhiều tâm lý hơn là tuyến tính, thế cho nên tôi khuyên bạn nên cố gắng nỗ lực làm quen với cú pháp mới nhất và liên tục với điều đó ( và nếu cần, hãy quên những gì bạn biết về những cú pháp cũ hơn ) .
Conic Gradients
Một gradient conic tựa như như một gradient radial. Cả hai đều là sử dụng hình tròn trụ và sử dụng tâm của những thành phần làm điểm nguồn cho những điểm stop color. Tuy nhiên, khi stop color của một gradient radial Open 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ự độc lạ giữa gradient Conic ( trái ) và Radial ( phải ) .
Chúng được gọi là “ hình nón ” vì chúng có khuynh 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ối thiểu là khi có một góc riêng không liên quan gì đến nhau được phân phối và độ tương phản giữa những giá trị màu đủ lớn để tạo ra sự độc lạ .
Cú pháp gradient conic dễ hiểu hơn bằng tiếng Anh đơn thuần :
Tạo một gradient conic nằm ở [ 1 số ít điểm ] khởi đầu với [ một màu ] ở 1 số ít góc và kết thúc bằng [ một màu khác ] ở [ một số ít góc ]Ở Lever 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 mở màn ở chính giữa thành phần ( 50 % 50 % ) và được phân phối đều giữa những giá trị màu trắng và đen .
Chúng tôi hoàn toàn có thể viết điều này theo một số ít cách khác, toàn bộ đề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 tất cả chúng ta không chỉ định góc cho những màu, thì giả sử rằng gradient được chia đều giữa những màu, mở màn ở 0 deg và kết thúc ở 360 deg. Loại đó tạo ra một điểm dừng cố định và thắt chặt trong đó những sắc tố tương phản với nhau ở 0 deg và 360 deg. Nếu màu mở màn của tất cả chúng ta khởi đầ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 ở 90 deg, sau đó điều đó tạo ra một gradient mượt mà hơn và tất cả chúng ta khởi đầu có được phối cảnh hình nón mê hoặc đó .
.conic-gradient {
background: conic-gradient(from 90deg, #fff, #000);
}
Chúng ta hoàn toàn có thể đi dạo với những gradient hình nón. Đối với những ví dụ, chúng tôi hoàn toàn có thể sử dụng nó để tạo ra cùng một loại mẫu mà bạn hoàn toà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 trụ đơn thuần bằng cách thêm những điểm dừng cố định và thắt chặt giữa ba giá trị màu :
.conic-gradient {
background: conic-gradient(lime 40%, yellow 0 70%, red 0);
}
Một quy mô minh họa một gradient hình nón mô phỏng một biểu đồ hình tròn trụ ba màu đơn thuần .
Conic Gradiant hỗ trợ trình duyệt
Repeating Gradients
Với trình duyệt ngày càng ít tương hỗ đang Repeating những gradient. Chúng có cả dạng tuyến tính và dạng radial .
Có một mẹo, với những 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 những 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 size nền để tạo ra hình chữ nhật nhỏ bé đó. Điều đó giúp bạn thuận tiện tạo ra những đường sọc, sau đó bạn hoàn toàn có thể xoay hoặc bất kỳ 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ủ pháp đó. Kích thước của gradient được xác lập bởi điểm dừng màu ở đầu cuối. Nếu đó là 20 px, kích cỡ của gradient ( sau đó Repeating ) là một hình vuông vắn 20 px x 20 px .
.box {
width: 200px;
height: 200px;
background:
repeating-radial-gradient(
circle at 0 0,
#eee,
#ccc 50px
);
}
Xem thêm Selenium IDE – xác lập thành phần html cho testing website
Share this:
Like this:
Like
Xem thêm: Ép kiểu trong Java | How Kteam
Loading …
Related
Source: https://final-blade.com
Category: Kiến thức Internet
