CSS Stunts - A micro CSS blog from WorkShape.io

This week we're publishing a new experiment: www.cssstunts.com. Here's a little bit about What it is and Why we're doing this.

Why?

We are a recruitment platform for developers, but we are also developers too. Whilst our main focus remains Workshape.io, we are often experimenting with ways to iterate and innovate. Whenever possible we want to share these things with the community - CSS Stunts is one of those experiments and we think that people will find this interesting and fun - just like we do!

What?

On the premise of this philosophy, we're proud to present you CSS Stunts - the idea is simple: "A microblog of weekly, self-explanatory, utterly pointless CSS hacks".

The idea came while experimenting on the creation of an animated MacBook illustration (One of these that you see on landing page, showcasing the screenshots of products - you know the ones I'm talking about!) using (Or even abusing) only the power of CSS twirks - and the result was satisfying enough to think "Wait a minute, wouldn't it be great to have a collection of little, beautiful pointless things like that?"

CSS MacBook screenshot

Personally, I quite enjoy the concept of blogging, but I'm not too much into writing copy, what I do love is writing code, and found it an interesting concept to have a blog on which I could only publish snippets.

So this is it - Every week this "micro-snippet-css-blog" is gonna be updated with a new, fun, hacky CSS animation with the only goal of delighting the ones interested in seeing how far you can push CSS before breaking the web-continuum.

Check it out at www.cssstunts.com and subscribe for email updates if you enjoy this little side project from the WorkShape team.

Check it out

Technical notes

When it comes to CSS, browser support is always behind - and even though variables and various other capabilities that were previously exclusive to CSS preprocessors have been introduced, there's always a work overload involved into making sure they function correctly cross-browser or they do the job - tl;tr; we didn't wanna spend our days checking caniuse.com and repeatedly copy-paste our css attributes adding vendor prefixes - this is ment to be a bit of fun for us too.

Also, CSS preprocessors allow you to programmatically speed up your work with the use of mixins, loops, etc.. So we decided to use our favourite to write the hacks, and our favourite just happens to be Stylus used along with Nib - which we use to automatically compile vendor prefixes in our CSS.

The hacks published are displayed along with the HTML template in use, the Stylus source and the built CSS output - this decision is purely functional and saves us loads of time, it's not a political call and we have no interest in promoting the specific tool, but if you're an upset CSS purist, please send your complaints to /dev/null :) * Pun to be taken with a pinch of salt.

A taste of the hacks

Of course it wouldn't be nice to start the blog with just one post - so we worked ahead to produce the first three stunts: The CSS3 logo, a MacBook illustration and an animated Polaroid camera.

These are the screenshots of the completed hacks, just to give you a taste of the sort of snippets that we'll be publishing:

Stunts preview screenshot

We hope you enjoy checking out our hacks - and of course, don't forget to visit workshape.io, too :)

Signature