All geek questions in one place

Horizontal sharp background gradient with a certain length of the first color

I saw 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 the same way as above using only CSS?

** EDIT **

Below is a minimal example of what I'm trying to do. I don’t want to set the background gradient in the html tag to have different scroll colors at the top and bottom of the page, with variable, sometimes transparent content in the middle. When using variable content to fill the page, the gradient completely fills the page with the first color. As in the example below.

 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 the div tag, you will see that the gradient works as expected)

+5
source share
1 answer

The first parameter of the linear-gradient function is the direction in which the gradient should be applied. In the fragment in question, this is to right , and therefore the output looks like columns. To change it to look like lines, just change the direction to to bottom , as in the snippet below.

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 a better understanding:

  • Gradient is linear-gradient , i.e. colors linearly change in straight lines.
  • The direction to bottom means that 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 will have a color like #a2ea4c to the 200px mark on top.
  • #07aa91 200px indicates that with the 200px sign, the color of the gradient suddenly changes from #a2ea4c to #07aa91 . This makes it a hard-stop gradient, since a gradual color change does not occur.
  • #07aa91 means that the color remains the same from the 200px mark to the end of the gradient.

The gradient indicated in the second fragment is not displayed for the following reasons:

  • The gradient has a color like #a2ea4c only for the first 200px, but the height of the element is p 300px.
  • The p tag is by default a block-level container, and when there is no special CSS style, it takes up 100% of the width.
  • Thus, the p tag covers the entire gradient area with a different color.

If you replace the p tag with a div (and thereby bring your custom CSS request), the gradient will be visible, because the width 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>
+6
source

Source: https://habr.com/ru/post/1236811/

More articles:


All Articles