Repeating-conic-gradient(#000 0% 25%, #eee 0% 50%)Īgain, not only is the code simpler to understand, but we’ve also gone from 229 bytes to only 83 bytes in the compiled CSS, reducing it by almost two-thirds! Half-Rombes The half-rombes pattern This repetition in the second half of the interval means we can use a repeating-conic-gradient(), which gives us the following code (bringing the compiled CSS from 263 bytes down to only 73 bytes – that’s reducing it by over 70%): $s: 60px A pattern cell with a conic gradient’s hard stops at every 25%, starting from the default at 12 o’clock and repeating after 50% ( demo). A quarter of it is black, the next quarter is dirty white and then we have repetition (the same black and then dirty white quarter slices once more). Looking at the square highlighted in deeppink in the illustration above, we see that, in this case, our conic gradient starts from the default position at 12 o’clock. Just like in the previous case, we draw vertical and horizontal lines in order to better see the rectangles defined by the background-size. Let’s see how we can simplify this CSS when replacing these linear gradients with a conic one! Linear-gradient(45deg, black 25%, transparent 25%, This pattern above is created with two linear gradients: background-color: #eee We can see it in action in the Pen below:ĬodePen Embed Fallback Checkerboard The checkerboard pattern We’re using the double position syntax as that’s also well supported these days. Not only does the code look simpler, but we’ve also gone from 260 bytes to 103 bytes, reducing the code needed to get this pattern by more than half. This means our pyramid pattern can be reduced to: $s: 20px A pattern cell with a conic gradient’s hard stops at every 25% starting from 45° w.r.t. However, in our case, we want to offset the start of the gradient by 45° in the clockwise direction and afterwards make every one of the four shades occupy a quarter (25%) of the available space around the midpoint of our square box. Highlighting the pattern’s cellsīy default, conic gradients start from 12 o’clock and go clockwise. In this case, it’s pretty obvious we have square boxes and where their limits are, but it’s a really useful technique for more complex patterns. What I like to do when coding repeating patterns is draw equidistant vertical and horizontal lines delimiting the rectangular boxes defined by the background-size. Using conic-gradient(), we can now get the same result in a much simpler manner, with a single background layer instead of four! So don’t worry if you don’t understand how those gradients manage to create the pyramid pattern because, one, it is complicated and, two, you don’t even need to understand that! It took me a while to get it, even though gradients are one of the CSS features I’m most comfortable with. It’s not easy to just look at this and understand how it all adds up to give us the pyramid pattern. That’s quite a bit of CSS and perhaps even a bit intimidating. The pattern above uses four linear gradients: background: So let’s take a few linear-gradient() patterns from the gallery created by Lea Verou about a decade ago and see how we can now simplify them with conic-gradient! Pyramid The pyramid pattern One thing I particularly like about conic gradients is just how much they can simplify background patterns. While some of the demos in this article work just fine when using a polyfill, some use CSS variables inside the conic gradient and therefore require native support for this feature. With that enabled, now we can test our CSS including conic gradients in Firefox as well. Starting with Firefox 75, released on the April 7, we can go to about:config, look for the flag and set its value to true (it’s false by default and all it takes to switch is double-clicking it). For those who have missed the big news, Firefox now supports conic gradients!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |