It’s been a short while since I’ve performed round with making inventive stuff with CSS only for enjoyable. My journey to State of the Browser convention on the weekend jogged my memory why I really like the net and the inventive neighborhood round it. In case you haven’t already, it is best to try Hidde’s abstract of the convention. Each speak was completely high-quality (and a few had been downright jaw-dropping — Katie Fenn’s stay Daft Punk efficiency particularly!).
Sophie has written a beautiful put up on why it is best to go to conferences, and I couldn’t agree extra. She features a checklist of nice internet conferences to swimsuit any finances. Attending and talking at conferences has been 100% price it for me!
Now, on with the inventive stuff. I typically discover myself pondering of inventive concepts (for drawing, portray, writing — something!) however discover myself with an entire lack of time to execute them. So having the ability to create one thing tremendous fast is very interesting, and sometimes serves as a catalyst for sparking new concepts and spending time on one thing greater. No, I’m not speaking about generative AI! A part of the explanation I really like the net is that, for me, it’s a medium that enables me house to experiment and make stuff rapidly, and the outcome can simply be refactored, redesigned or thrown away if I don’t prefer it.
One factor I fairly take pleasure in at house is making small collages with scrap paper — simply gluing a number of random shapes in a delightful strategy to create totally different patterns and compositions. I take pleasure in being restricted by no matter I occur to have at hand, and seeing whether or not I could make one thing that appears good. I had the concept of redesigning my private website, utilizing compositions of straightforward geometric shapes as a motif (who is aware of whether or not I’ll get round to doing this!). As a little bit of a brainstorm, and to scratch the inventive itch, I got here up with the concept of making a easy composition utilizing three CSS gradients, then remixing them with customized properties to see what totally different outcomes I may generate whereas retaining the identical really feel.
To stop myself getting carried away and spending hours tweaking issues, I made a decision to restrict myself in an analogous strategy to having just some scraps of paper to play with. Every composition has the identical base color background, and similar three background gradients that may be adjusted in a restricted method with customized properties. The colors can’t be assorted, only some particulars like the scale and place of the circle (made with a radial gradient), or the angle and width of the linear gradient. No further components or pseudo-elements are allowed.
Right here’s the outcome!
See the Pen
Gradient background composition train by Michelle Barker (@michellebarker)
on CodePen.
This was a very enjoyable train in composition and creativity inside slim limits. I’m undoubtedly going to check out some extra concepts.
