Menu
I've seen vertical columns created in pure CSS with something like this:
div {
height: 300px;
background: linear-gradient(to right, #a2ea4c 200px, #07aa91 200px, #07aa91);
}<div></div>Is it possible to make a horizontal header of a fixed size in a similar manner as the above i.e. using only CSS?
** EDIT **
The below is a minimal example of what I'm trying to do. I wan't to set the background gradient on the html tag in order to have different overscroll colors on the top and bottom of the page, with variable, sometimes transparent content in the middle. When using variable content to fill up the page, the gradient fills the page completely with the first color. As in the below example.
html {
background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}
div {
height: 300px;
width: 20%;
margin: 0 auto;
background: teal;
}<html>
<body>
<p> Lorem ipsum sit amet</p>
</body>
</html>(If you switch the p-tag for a div-tag, you'll see that the gradient works as expected)
919
The first parameter to the linear-gradient function is the direction in which the gradient should be applied. In the snippet in question, it is to right and so the output looks like columns. To change it to look like rows, just change the direction to to bottom like in the below snippet.
You can read more about linear-gradient and its arguments here.
div {
height: 300px;
background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}<div></div>Below is an explanation of the gradient itself for better understanding:
linear-gradient, that is, the colors change linearly in straight lines.to bottom which means that the 0% (or 0px) is at the top of the container and 100% is at the bottom of the container.#a2ea4c 200px indicates that the gradient would have the color as #a2ea4c till the 200px mark from top.#07aa91 200px indicates that at the 200px mark, the gradient's color suddenly changes from #a2ea4c to #07aa91. This makes it a hard-stop gradient as there is no gradual color change.#07aa91 means that the color stays the same from the 200px mark till the end of the gradient.The gradient that is provided in the second snippet is not being visible due to the following reasons:
#a2ea4c only for the first 200px but the p element's height is 300px.p tag is by default a block level container and when there is no special CSS styling, it takes 100% width.p tag covers the entire area of the gradient that has a different color.If you replace the p tag with div (and thereby result in your custom CSS get applied), the gradient would be visible because the width then becomes only 20%.
html {
background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}
div {
height: 300px;
width: 20%;
margin: 0 auto;
background: teal;
}<div>Lorem ipsum sit amet</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
