CSS Gradients
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Gradient</title>
<style>
body {
background-image: url(milky-way.jpg);
}
div#box1 {
border: 3px solid crimson;
background-image: linear-gradient(180deg,cyan,red,green,pink,purple);
background-size: cover;
height: 300px;
font-size: xx-large;
text-align: center;
vertical-align: auto;
}
div.box2 {
border: 15px solid black;
background-image: linear-gradient(red,yellow);
height: 350px;
}
div#box1:hover {
border: 30px solid transparent;
border-radius: 0 100px 0 ;
border-image: url(border1.jpg) 30% round;
background-image: linear-gradient( to right , rgba(255, 0, 0,0), rgba(255, 0, 0,1.0));
}
div.box2:hover {
background-image: repeating-linear-gradient(to bottom right,crimson 5%,black 8%,dodgerblue 10%,silver 12%,lightgreen 15%,yellow 18%);
border-radius: 0px 50px 300px 25px;
border-top-right-radius: 80px;
border-bottom-left-radius: 300px;
text-align: center;
font-size: xx-large;
}
div.box3 {
border: 50px solid transparent;
border-image: url(border1.jpg) 300 round;
height: 500px;
width: 700px;
text-align: center;
font-size: xx-large;
background-image: radial-gradient(circle at 90% 100%,red ,transparent);
}
div.box4 {
border: 50px solid transparent;
border-image: url(border1.jpg) 300 round;
height: 500px;
width: 700px;
text-align: center;
font-size: xx-large;
background-image: repeating-radial-gradient(farthest-side at 65% 55%,yellow ,red 10%,transparent 15%);
}
</style>
</head>
<body>
<h2>Linear Gradient</h2>
<div id="box1">This is a 1st box.</div>
<div class="box2">This is a 2nd box for Radial Gradient.</div>
<h2>Radial Gradient</h2>
<div class="box3">This <b>is</b> a 3rd box for Radial Gradient.</div> <br><br>
<div class="box4">This <b>is</b> a 4th box for Radial Gradient.</div>
</body>
</html>
No comments:
Post a Comment