Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it’s like the saved articles in my bookmarks folder are having a conversation. The conversation sitting in there now is all about CSS Gradients and I thought I’d link some of the more interesting pieces.
- Day 22: conic gradients — Manuel Matuzovic looked at conic gradients on Day 21 of his 100-day series about modern CSS, providing a nice high-level look at colors, angles, placement, and color stops. Then, on Day 22, he puts it use on the
::backdroppseudo-element. (By the way, Twitter unexpectedly suspended his account — let’s help right that ship if we can.)
- Do you really understand CSS radial-gradients? — Patrick Brosset has done guide-worthy work here and I’m honestly still working my way through it. But I apready appreciate his clear explanations and demos of things that I still muff up, like keywords for the size and shape of a radial gradient. I’m already linking this up in our own CSS Gradients Guide!
- CSS Halftone Patterns — Michelle Barker with a detailed breakdown of Ana Tudor’s “halftone” patterns. The effect is sorta like the dotted ink print of old school newspapers. While Ana uses Houdini under the hood for animation and hover effects, Michelle looks specifically at the halftone effect itself and how it’s constructed with a radial gradient. I especially love the way Michelle shows how to get from a straightforward grid of dots to one where the pattern is staggered a bit. And stick around to the end to see how she punctuates the effect with a
mask-imagethat uses a linear gradient to create a fading effect. I riffed with this pattern a bit, too, and wound up with something neat that looks like a runny ink blot filter.
- A Dashing Navbar Solution — Eric Meyer was given an interesting design challenge for a menu where a dotted line comes out of the “current page” link and becomes part of a larger dotted border along the left edge of the content container. Eric is always a great example of how to think like a front-end developer, and he does it here as he describes the alternate route he took using a linear gradient when he hit a snag with the standard approach of setting
border-style: dottedon the element.
- Masked Gradient Dashed Lines — Eric with a follow-up to that last link showing not only how he connected the dashes of a left border to the dashes of a raster image, but how his persnickety design eye convinced him to change his solution to mimic the lower resolution of the image’s dashes using two repeating linear background gradients as a
mask-imageon the background gradient. So nerdy and great!
I will add my little collection of gradients: https://github.com/Afif13/CSS-Pattern
I think I have to prepare a few articles to explore some of them :)
A modest contribution to gradients: a collection of flags of the world.
Apart from complex drawings, the rest is done thanks to gradients.
Another one – I wrote this a year ago where I create an animated CSS background generator:
That was a great article! Definitely a good resource.