<div style="width: 94px;height:44px;background-image: linear-gradient( to right,#0059dd 0px,#0059dd 3px,#000000 0px,#000000 91px, #0059dd 91px);"></div>
0, 3px, 0, 91px, 91px.
Are you allowed to have 0 as a value to gradient, and what does the 0 mean?
Does the 0 mean for the color to keep going until there’s a stop?
And how come, #0059dd 91px isn’t 94px?
Is this linear gradient acceptable with 0 in it, or are 0’s not acceptable?
Or is this not the correct way of doing it?
<div style="width: 266px;height:44px;background-image: linear-gradient( to right,#0059dd 0px,#0059dd 3px, #000000 0,#000000 86px, #0059dd 0, #0059dd 89px, #000000 0, #000000 177px,#0059dd 0, #0059dd 180px,#000000 0, #000000 263px,#0059dd 0, #0059dd 266px"></div>
What’s the difference between these?
And are 0 acceptable as a practice when you add it to linear gradient the way I have?
<div style="width: 260px;height:44px;background-image: linear-gradient( to right,#000000 0,#000000 83px, #0059dd 0, #0059dd 86px, #000000 0, #000000 174px,#0059dd 0, #0059dd 177px,#000000 0, #000000 260px); "></div>
or maybe like this:
<div style="width: 260px;height:44px;background-image: linear-gradient( to right,#000000 83px, #0059dd 0, #0059dd 86px, #000000 0, #000000 174px,#0059dd 0, #0059dd 177px,#000000 0); "></div>
and this:
<div style="width: 260px;height:44px;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );"></div>
What is it you want the zero to do?
In the code it seems to keep the color moving forward until it hits a stop point.
Linear gradients aren’t really a “seems to” thing. You’ll save yourself a lot of time once you have some understanding beyond guessing at what does what.
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The 0 is the starting point, then the next number is where the color stops.
No?
As long as the number is less than the finishing number of the section before then you get a perfect colour stop. So if the previous colour finishes at 86px then the next one can start at 86px or less - even zero.
If a color stop or color hint has a position that is less than the specified position of any color stop or color hint before it in the list, set its position to be equal to the largest specified position of any color stop or color hint before it.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.