07/05/2018, 15:10
Gradient trong CSS
Gradient là gì ? Gradient biểu thị sự kết hợp của hai hay nhiều màu, như dưới đây:− Các loại Linear Gradient(down/up/left/right/diagonally) Radial Gradient Linear Linear Gradient được sử dụng để sắp xếp hai hay nhiều màu trong các định dạng tuyến, ví dụ như dạng từ ...
Gradient là gì ?
Gradient biểu thị sự kết hợp của hai hay nhiều màu, như dưới đây:−
Các loại
- Linear Gradient(down/up/left/right/diagonally)
- Radial Gradient
Linear
Linear Gradient được sử dụng để sắp xếp hai hay nhiều màu trong các định dạng tuyến, ví dụ như dạng từ trên xuống dưới (Top to Bottom):
Top to bottom
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Kết quả là:
Left to right
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Kết quả là:
Diagonal trong CSS
Diagonal bắt đầu từ góc trái trên cùng và góc phải dưới cùng.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Kết quả là:
Multi color trong CSS
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id="grad2"></div>
</body>
</html>
Kết quả là:
Radial
Radial Gradient xuất hiện tại vị trí trung tâm.
<html>
<head>
<style>
#grad1 {
height: 100px;
awidth: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Kết quả là:
Repeat Radial
<html>
<head>
<style>
#grad1 {
height: 100px;
awidth: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Kết quả là:
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
