Cascading Style

May 12, 2024 12:35 PM

CSS (Cascading Style Sheets) is a ubiquitous markup language for describing the layout and design of a webpage separate from the content, typically specifying things like text formatting, background color, page alignment, etc. But as with emoticons and ASCII art before it, CSS can be repurposed to become the content. Enter CSS drawing, an intricate art form that uses the conventions of the language to create illustrations and even animation using only standard design elements. Some standout examples from around the web: A Single Div, where every new illustration is contained within one <div> tag; designer Lynn Fisher also has a previous version along with a whole catalog of "weird websites, niche data projects, and CSS experiments" - Another collection of single-div projects - Start a digital bonfire - The Simpsons (animated!) in CSS - 173 CSS drawings on Dribble - How I started drawing CSS Images - css-doodle, a web component for drawing patterns with CSS - Creating Realistic Art with CSS - The CSS Zen Garden, a collection of beautiful CSS stylesheets - CSS previously on MeFi
posted by Rhaomi (15 comments total)

Ugh, I'm afraid this just convinces me I will never be able to do half-competent web design again. I was decently capable in the CSS2 era, but this stuff is light-years beyond me.
posted by humbug at 1:47 PM on May 12

These are great, the css-doodle component looks like exactly what I need to get back into playing around with gen-art on coffee breaks.

The CodePen Spark newsletter is a great regular source of more wow in this vein - plus useful highlighting of the multitude of more workaday new, underused features in CSS.

CSS Doom Scroll (currently works in Chrome or Edge) is one from there that recently amazed me by doing exactly what it says on the link.
posted by protorp at 1:47 PM on May 12 [2 favorites]

Oh, this is fabulously cool - this whole collection!

I mostly wanted to say thanks for the link to the CSS Zen Garden, which is FULL of lovely, lovely designs (and a really admirable re-use policy described in the FAQ: The Zen Garden is about learning from other people’s work, but not using it uncompensated.)

I also thoroughly enjoyed the Simpsons in CSS site; just doing
right-click > Inspect
and selecting each div in turn was both entertaining and educational.

I use CSS in my work building websites but am far from a true expert, so for anyone else who has questions or wants to learn more, I'd like to share my favorite reference site, CSS Tricks.

Thank you so much for all of this, Rhaomi! It's a wonderful collection, and I greatly appreciate the care and enthusiasm behind it. Yay!
posted by kristi at 1:51 PM on May 12 [2 favorites]

I nominate Rhaomi for the World's Best CSS Developer award.
posted by JoeZydeco at 2:58 PM on May 12 [2 favorites]

Just no.
posted by thorny at 4:35 PM on May 12

I thought the CSS Zen Garden stopped accepting submissions a while back - maybe they started again? I guess they did have to move on from the blue.
posted by pulposus at 4:56 PM on May 12 [1 favorite]

Codepen, which is a playground for front-end development, recently had a community challenge for "CSS stunts". I am personally charmed by the orchids and the fishbowl!
posted by pollytropos at 5:38 PM on May 12

I haven't looked at the CSS Zen Garden in at least ten years. But I see that it's still trivial to break most of the designs with just a slight change to the content.
posted by Hatashran at 6:05 PM on May 12

Ugh, I'm afraid this just convinces me I will never be able to do half-competent web design again.

Don't worry, this is just hot-dogging. Fancy CSS doesn't make for a great website. Clear and functional UI does.
posted by grumpybear69 at 8:38 PM on May 12 [2 favorites]

I have one css expert in my feed and note an interesting technique now and then, all very clever and fun to think about. Then noticed a comment from her recently "when I actually try to move any of these from the center it breaks everything". So in practice she never uses the clever stuff. LfingL
posted by sammyo at 11:46 PM on May 12

I was decently capable in the CSS2 era, but this stuff is light-years beyond me.

I gather people mostly use Tailwind and whatnot now.
posted by snuffleupagus at 3:40 AM on May 13

I gather people mostly use Tailwind and whatnot now.

CSS professional here: this is a great way to start a war.

tl;dr: Some people use Tailwind and whatnot now. Other people feel it's a terrible anti-pattern. YMMV.
posted by foldedfish at 5:55 AM on May 13 [4 favorites]

Huh. Didn't realize it was that contentious.
posted by snuffleupagus at 8:21 AM on May 13

Heydon Pickering wrote a great little blog post recently about why Tailwind is terrible: What is Utility-First CSS?

You can’t really appreciate utility-first CSS until you have a decent understanding of CSS itself, so this article will principally be about that. However, paradoxically, the more you learn about CSS, the less you may appreciate utility-first CSS. You might begin to question why it should exist at all. It’s possible you’ll even start to question why you exist.

posted by adrienneleigh at 9:12 AM on May 13 [4 favorites]

I don't have a tag in this fight, but I haven't read a flame that good in years.

Why is this utility-first approach so popular at the moment? Partly because the designs we’re charged with coding often are f**ked and we need equally f**ked tools to wrangle them. Partly it’s because the f**ked tools we’ve adopted to write f**ked JavaScript don’t play so well with CSS or, for that matter, HTML. Mostly, it’s because developer insecurity and neophilia are easily exploited: “Have you ever written CSS you weren’t quite happy with? Well here’s a radical, paradigm-shifting, quasi-proprietary solution! You’ll never embarrass yourself again!”

It turns out, people in tech are particularly bad at distinguishing between paradigm shifts and paradigm sharts. That’s why we have nose-diving cryptocurrencies, dust-collecting monkey JPEG portfolios, and AI-generated children’s books teaching kids about pink, two-headed dinosaurs that never existed.

And with the Dickensian flair of 'Heydon Pickering,' it's just 😙🤌
posted by snuffleupagus at 1:09 PM on May 13 [5 favorites]