CSS3: linear-gradient tuỳ chỉnh
Nếu bạn muốn có thêm khả năng điều khiển hướng của gradient thì bạn có thể định nghĩa góc thay cho việc định nghĩa hướng.
Cú pháp:
background: linear-gradient(ndeg, màu1, màu2, ..., màum);
, trong đó ndeg là góc bạn muốn điều khiển hướng (30deg, 45deg, 90deg, ...), góc được định hướng theo chiều kim đồng hồ nếu ndeg dương, ngược lại nếu nó âm; màu1 được hiểu là gốc kim đồng hồ, màum được hiểu là đầu kim đồng hồ.
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#goc1,#goc2,#goc3,#goc4,#goc5,#goc6,#goc7,#goc8{
height:150px;
width:20%;
color:#FFF;
text-align:center;
float:left;
}
#goc1{
background: linear-gradient(0deg, red, blue);
}
#goc2{
background: linear-gradient(90deg, red, blue);
}
#goc3{
background: linear-gradient(180deg, red, blue);
}
#goc4{
background: linear-gradient(270deg, red, blue);
}
#goc5{
background: linear-gradient(0deg, red, blue);
}
#goc6{
background: linear-gradient(-90deg, red, blue);
}
#goc7{
background: linear-gradient(-180deg, red, blue);
}
#goc8{
background: linear-gradient(-270deg, red, blue);
}
h1{
color:green;
width:100%;
float:left;
}
</style>
</head>
<body>
<h1>Xoay theo chiều kim đồng hồ</h1>
<div id="goc1">Xoay 0 độ</div>
<div id="goc2">Xoay 90 độ</div>
<div id="goc3">Xoay 180 độ</div>
<div id="goc4">Xoay 270 độ</div>
<h1>Xoay ngược chiều kim đồng hồ</h1>
<div id="goc5">Xoay 0 độ</div>
<div id="goc6">Xoay -90 độ</div>
<div id="goc7">Xoay -180 độ</div>
<div id="goc8">Xoay -270 độ</div>
</body>
</html>
Ví dụ 2:Ví dụ này sẽ sử dụng jQuery để điều khiển việc xoay hướng linear gradient bằng cách click chuột vào phần tử <div>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#goc{
height:150px;
width:20%;
color:#FFF;
text-align:center;
float:left;
background: linear-gradient(0deg, red, blue);
padding-top:50px;
box-sizing:border-box;
}
.goc1{
background: linear-gradient(0deg, red, blue) !important;
}
.goc2{
background: linear-gradient(90deg, red, blue) !important;
}
.goc3{
background: linear-gradient(180deg, red, blue) !important;
}
.goc4{
background: linear-gradient(270deg, red, blue) !important;
}
h1{
color:green;
width:100%;
float:left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var i=0;
$(document).ready(function(){
$("#goc").click(function(){
if(i==0){
i++;
$("#goc").addClass("goc2");
}
else if(i==1){
i++;
$("#goc").addClass("goc3");
}
else if(i==2){
i++;
$("#goc").addClass("goc4");
}
else if(i==3){
i=0;
$("#goc").removeClass("goc2");
$("#goc").removeClass("goc3");
$("#goc").removeClass("goc4");
$("#goc").addClass("goc1");
}
});
});
</script>
</head>
<body>
<h1>Xoay theo chiều kim đồng hồ</h1>
<div id="goc">Click đây!</div>
</body>
</html>