![]() ![]() Perfect! It’s visually the same result as in the repeating-linear-gradient version. See the Pen simple linear-gradient pattern – step 4 by Ana Tudor ( on CodePen. This all adds up to a diagonal of 1.5em, which means we need to change the background-size to 1.5em/sqrt(2) 1.5em/sqrt(2): Going from the top left corner to the bottom right corner, we now have half a black stripe (. This is because the diagonal computations don’t work out right anymore. It’s still not what we want because now the blue stripes are too narrow. See the Pen simple linear-gradient pattern – step 3 by Ana Tudor ( on CodePen. Each of these will be half the width of the initial black stripe in the middle (so half of. This means adding a small black stripe at the beginning of the gradient line and one at the end. We have to fill out those corners with black. If we zoom in, it becomes more obvious what the problem is and what we need to do about it. See the Pen simple linear-gradient pattern – step 2 by Ana Tudor ( on CodePen. It’s a little closer now, but it still doesn’t look good. 25em wide black stripe in the middle? Let’s try that! background: linear-gradient(135deg, See the Pen simple linear-gradient pattern – step 1 by Ana Tudor ( on CodePen. Hmm, this doesn’t look like what we wanted to achieve… This brings us to the following code: background: linear-gradient(135deg, #000. 75em, then the edge of the background-size square is going to be. The diagonal of a square is the square edge times √2 and, if we know the diagonal is. We’ll make the background a small square with a diagonal adding up to the width of a black stripe (. Now let’s try to achieve the same with plain linear-gradient and background-size. See the Pen simple repeating-linear-gradient pattern by Ana Tudor ( on CodePen. 5em = the blue stripe width = 2*.25em = twice the black stripe width). 25em along the gradient line, then a blue stripe from. If you need a refresher on how linear gradients and their angles work, check out this explanation (ignore the part about the old syntax, we have now left that behind). The gradient starts from the top left corner at an angle of 135°. 25em, the code to get this effect with repeating-linear-gradient is: background: repeating-linear-gradient(135deg, It has black and blue stripes, blue stripes being twice as wide as the black ones. We start by recreating the following pattern: Simple stripes pattern I used repeating linear gradients precisely because it turned out normal linear gradients were not enough. Some of these styled range inputs had striped fills or rulers, so they required using gradients, particularly repeating linear gradients, quite a bit. ![]() Also: if I never have to style another range input again, it will be too soon. Warning: while I did learn a lot creating them, I never went back to apply what I learned along the way to the sliders I had already coded, so, with the exception of the last few, I wouldn’t really recommend them as a good resource. But in early February, while working on a canvas demo, I fell into the trap of styling the control panel for that demo and ended up reproducing over 100 slider designs I found online, each with the (self-imposed) restriction that I should use just one range input per slider. Until this year, I was also convinced they’re useless. Vinyl record with repeating-radial-gradient They have saved me from having to write tens of stops inside a regular radial-gradient when I wanted to reproduce the look of a vinyl record with CSS. Their cousin, repeating radial gradients, definitely come in handy. It all started with this question Keith Clark recently asked on twitter.ĬSS repeating-linear-gradients, do we need these? Can’t the same thing be achieved with a linear-gradient and background-size? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |