<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mastering linear gradients-1</title>
<style>
h1{
text-align:center;
}
div{
width:500px;
height:300px;
border:1px solid;
display:table;
margin:auto;
background:linear-gradient(purple 50%,yellow 70%);
}
div p{
display:table-caption;
caption-side:bottom;
}
</style>
</head>
<body>
<h1>
when the first color-stop does not start from 0%-it starts from any where above 0% over the gradient line.
</h1>
<div>
<p>the area from 0% to 50% won't be uncovered without any color-stop.the first color-stop specified will be covering it.specifing the position 50% or any heigher value greater than 0% and not giving the first color-stop with position 0% value will not cause the left area with no color.</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.