Repeating Linear Gradient Background Image.It is therefore not mandatory to specify where the color should be placed on the gradient line. In fact, if you let W be the width of the gradient box, H its height, and A the gradient angle, then the length of the gradient line is:Ībs(W * sin(A)) + abs(H * cos(A)) Color stopsĬolor stops are organized in a coma-separated list where each item can be defined as: The point where that line crosses the gradient line is the start/end position (this is explained quite nicely in the specification).
Just draw a line that passes through the nearest corner and that is perpendicular to the gradient line. It’s easy to know where it starts and ends though. Therefore, in order to do this, the gradient line sometimes has to extend out of the gradient box. If we had made the gradient line only start and end at the edges of the box, then the color blue would have covered a greater area of the box, and the gradient wouldn’t have been spread out as much. But what the browser wants to do here (well, what the specification tells it to do) is make the top right corner exactly blue. We want a gradient from red to blue, at 45 degrees and because of the aspect ratio of the gradient box, the gradient line cannot pass through the top right corner.
Quite obviously, the angle of a linear-gradient is used to determine in which direction is the gradient going. This line is more easily explained when talking about the gradient angle, so more about this in the next section. In the gradient box, the line that passes through the center and along which color stops are distributed is called the gradient line. So, just remember when reading through the next sections that the gradient box isn’t always positioned and sized like the DOM element the gradient applies to. However, if you also use the CSS property background-size and set it to, say, 200px * 200px, then the gradient box will have this size and will be positioned at the top left corner of the DOM element by default, unless you also set background-position. Typically, when you apply a linear-gradient background-image to a DOM element, that area is the border-box of the element (which is the same area a background-color would be displayed, or where an image identified by a URL would). What gives a visible dimension to the gradient is its gradient box i.e.
The gradient boxĪ gradient image has not dimensions, it is infinite, unlike traditional background images. The function then accepts a list of color stops. The function accepts an optional first argument which determines the angle of the gradient, which can be expressed either as an angle with a unit (deg, rad, grad, turn) or as a side-or-corner keyword. First of all, let’s remind ourselves of the syntax allowed in the linear-gradient function: Still here? Alright, let’s go and have a look at some of the details of how linear-gradients actually work. So if you want more, I recommend this css-tricks article and MDN page. Want a nice gradient background on your site? background-image: linear-gradient(red, blue) BOOM, done!
0 kommentar(er)
