14/08/2018, 12:26
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 Gradient trong CSS Linear Gradient trong CSS 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): ...
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 Gradient trong CSS
Linear Gradient trong CSS
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 Gradient trong CSS
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 Gradient trong CSS
<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à:
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để 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 code24h.com:
