featured ebook
Tai & The Keys Of Trust
Discovering The Update Framework

AN ILLUSTRATED OPEN-SOURCE ADVENTURE

What happens when a trusted key is stolen, a shortcut goes too far, or the safeguards meant to protect us are put to the test?

Join Tai the TUF Elephant and friends in a colourful adventure through Orynthia, where the ideas behind The Update Framework become part of the story.

Also included: our Blank to Built Creator System, with editable resources that take you from reading the story to creating something of your own.

100 SALES FOR INKSCAPE

Created entirely with Inkscape. Get the book + Blank to Built Creator System bundle and help us give back. 15% of the first 100 bundle sales supports the project.

Digital Ebook
Instant Access
Original Design

Ideas You Can Use

Our Creator Store is where we bring together the things we make, test, and explore across design, illustration, writing, and the web. You’ll find editable resources, guides, tutorials, CSS experiments, and other creative tools designed to be useful as they are, but flexible enough to build on, adapt, and make your own.

css funstuff

Small web experiments with real source code you can pull apart and play with.

CSS Funstuff - Cards (Header)
1 / 2

css funstuff: cards

Create stylish, customizable cards using pure HTML and CSS.

read dev article

css funstuff - cards

Cards are one of those things that seem simple until you start playing with them. This set takes the basic UI card and has a little more fun with it, using pseudo-elements to move the background independently of the content. That means you can rotate it, scale it, shift the colour around, and generally make things more interesting without sending the text along for the ride.

The download includes the examples from the article, along with some extra variations you can pull apart, tweak, or use as a starting point for something of your own.

It’s useful if you want a card design that feels a bit less generic, or if you just want a practical example of how pseudo-elements can do more than sit behind a heading or add a decorative flourish. Sometimes the quickest way to get comfortable with a technique is to see it doing something you’d actually want to use.

CSS Funstuff - Animated Halfway Borders (Header)
1 / 2

css funstuff: animated halfway borders

Create animated borders that grow smoothly from the halfway point using pure CSS.

read dev article

css funstuff - animated halfway borders

Sometimes one tiny CSS change is enough to make something unexpectedly fun. In this case, adding border-radius to a border on just one side of an element gives you a curved “halfway” border. Animate it, and suddenly there’s a lot more to play with.

The download gives you the source from the tutorial, ready for you to change the shape, speed, colour, timing, or just see what else you can get out of the idea.

It’s a small effect, but that’s part of the appeal. You can drop it onto a button, link, heading, or other UI element without rebuilding half your interface around it. It’s the kind of detail that can make something feel more deliberate without making the design noisy.

CSS Funstuff - Animated Waveforms (Header)
1 / 2

css funstuff: animated waveforms

Build and customize your own animated waveform visualizer using pure CSS.

read dev article

css funstuff - animated waveforms

How much of a waveform can you fake with plain old CSS? Turns out, quite a bit. A handful of divs, Flexbox, keyframes, and a few custom properties are enough to get the bars moving at different speeds and create the effect.

The full project takes it a little further with a slider and some JavaScript so you can change the animation speed on the fly. Grab the source, mess with the timing, add more bars, or see what else you can make it do.

It’s also a nice example of several small web techniques working together without becoming a giant project. If you’ve wanted to get a better feel for animation timing, CSS variables, or how CSS and a little JavaScript can interact, this gives you something visual and immediate to experiment with rather than another abstract demo.

Your cart is empty

Items you add will appear here.