CSS3: linear-gradient thẳng góc
Giải phóng thời gian, khai phóng năng lực
Gradient trong CSS3 sẽ cho phép bạn hiển thị quá trình chuyển đổi giữa hai hoặc nhiều màu sắc khác nhau một cách mượt mà.
Trước đây để làm được điều này bạn phải sử dụng ảnh, tuy nhiên điều này sẽ tốn thời gian download cũng như tốn băng thông và độ mượt màu sắc không cao. Giờ đây bạn sẽ có thêm công cụ là gradient trong CSS3 và bạn sẽ thấy được khả năng của nó sau khi tìm hiểu xong phần kiến thức về Linear Gradient và Radial Gradient.
Trình duyệt hỗ trợ
Hàm |
Trình duyệt hỗ trợ |
||||
linear-gradient() |
IE10+ |
FF16+ |
Chrome26+ |
Safari5.2+ |
Opera12.1+ |
radial-gradient() |
IE10+ |
FF16+ |
Chrome26+ |
Safari5.2+ |
Opera12.1+ |
repeating-linear-gradient() |
IE10+ |
FF16+ |
Chrome26+ |
Safari5.2+ |
Opera12.1+ |
repeating-radial-gradient() |
IE10+ |
FF16+ |
Chrome26+ |
Safari5.2+ |
Opera12.1+ |
Để tạo linear gradient bạn cần chọn hướng và sử dụng ít nhất hai màu, nếu bạn không chọn hướng cho gradient thì hướng mặc định là hướng xuống dưới.
Cú pháp tổng quát của linear gradient
background: linear-gradient(hướng, màu1, màu2, ..., màun);
, trong đó có 4 hướng thẳng góc là trên-dưới (đây là hướng mặc định), dưới-trên, trái-phải và phải-trái.
Linear Gradient theo hướng trên-dưới
Đây là hướng mặc định của linear gradient, vì vậy cú pháp sẽ là:
background: linear-gradient(màu1, màu2, ..., màun);
Hoặc:
background: linear-gradient(to bottom, màu1, màu2, ..., màun);
Ví dụ dưới đây sẽ tạo linear gradient theo hướng xuống dưới, trong đó màu bắt đầu là màu 'red', màu kết thúc là màu 'blue':
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
background: -webkit-linear-gradient(red, blue); /* Safari */
background: -o-linear-gradient(red, blue); /* Opera */
background: -moz-linear-gradient(red, blue); /* Firefox */
background: linear-gradient(red, blue); /* hoặc: background: linear-gradient(to bottom, red, blue); */
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng xuống dưới, bắt đầu là màu 'red', kết thúc là màu 'blue'</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng dưới-trên (lên trên)
Cú pháp:
background: linear-gradient(to top, màu1, màu2, ..., màun);
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
background: linear-gradient(to top, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng lên trên, bắt đầu là màu 'red', kết thúc là màu 'blue'</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng trái-phải
Cú pháp:
background: linear-gradient(to right, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
background: linear-gradient(to right, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng sang phải, bắt đầu là màu 'red', kết thúc là màu 'blue'</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng phải-trái (hướng sang trái)
Cú pháp:
background: linear-gradient(to left, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
background: linear-gradient(to left, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng sang trái, bắt đầu là màu 'red', kết thúc là màu 'blue'</p>
<div id="grad1"></div>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực