<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mastering linear gradients-1 basics</title>
<style>
h1{
text-align:center;
}
div{
width:500px;
height:300px;
border:1px solid;
display:table;
margin:auto;
position:relative;
top:4em;
background:linear-gradient(purple,yellow);
}
div p{
display:table-caption;
caption-side:bottom;
}
div:after{
content:"purple color is spread over here and keeps spreading infinitely because the gradient line is infinitely going up.the same is happening down with yellow for the same reason.";
color:purple;
position:absolute;
top:-4em;
}
</style>
</head>
<body>
<h1>
the gradient line is infintly going on both sides
</h1>
<div>
<p>the gradient line is infinite: imagine the starting color-stop is infinietly making the gradient purple over the top end of the box and the ending color-stop is making it yellow below the bottom end.</p>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.