<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mastering linear gradients-2</title>
<style>
h1{
text-align:center;
}
div{
width:500px;
height:300px;
border:1px solid;
display:table;
margin:auto;
background:linear-gradient(purple 0%,yellow 70%,black 40%);
}
div p{
display:table-caption;
caption-side:bottom;
}
</style>
</head>
<body>
<h1>
when the linear gradient has a color-stop with position value less than the one precceding it.
</h1>
<div>
<p>here the color-stop "black" has a position value less than the precceding one "yellow-70%" which is insane and not in the ascending order that gradients should be built on therefore "black 40%" will be taking the <strong>biggest</strong> position value presceeding it,hence,black and yellow both are pure at 70%.</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.