Shapes of CSS
May 30, 2012 7:28 AM   Subscribe

A large selection geometric shapes, all created with just one HTML element & CSS. An interesting take on geometry. Includes Space Invader.

Note that it does not work in every browser, but all examples work in Chrome.
posted by Deathalicious (30 comments total) 48 users marked this as a favorite
 
Oh god it's like LOGO all over again. Move that turtle!
posted by Riptor at 7:34 AM on May 30, 2012 [12 favorites]




Fortran plotter commands, logo, webgl, svg, canvas... the last two are even supported by all the major browsers.
posted by idiopath at 7:56 AM on May 30, 2012


The Sriracha Rooster is cool, but it's not the same thing. HTML5 canvas can be used to draw anything. The elements in the original link are drawn by applying CSS properties such as borders and drop shadows to a single HTML element. These CSS properties were certainly not designed with such complex drawings in mind, so it's considerably more impressive than drawing with canvas.
posted by oulipian at 7:59 AM on May 30, 2012 [3 favorites]


A whole lot of the fancier ones do not work in IE. Interesting - the interpretation or implementation?

A whole lot of the fancier ones do not work in IE, aka, the story of my life.
posted by tilde at 8:09 AM on May 30, 2012 [2 favorites]


Some of these are pretty damn clever. Using the different border side properties to get simple diagonal lines is so simple but I know I never would have thought of it.
posted by cirrostratus at 8:16 AM on May 30, 2012


Oh god it's like LOGO all over again. Move that turtle!

I was thinking just that.
posted by TwelveTwo at 8:20 AM on May 30, 2012


That Sriracha rooster is all sorts of bad-assery.
posted by slogger at 8:40 AM on May 30, 2012


It's also pretty interesting how some of them use the :before and :after pseudo-elements to basically get 3 elements with the html footprint of one. This is a trick I could actually see myself using in real life cases.

Also, that space invader using box-shadow to allow straight up pixel drawing seems like cheating compared to all the other ones. Apparently, you could have a single element with a 100 kilobytes of text for it's box-shadow property to display the Mona Lisa without using any image files.
posted by cirrostratus at 8:55 AM on May 30, 2012


These are cool and after figuring out what made all of them tick I googled for some more and came up with these pure CSS icons, which are basically the same thing as these but set up in a way to show how they actually might be potentially really useful in some cases.
posted by cirrostratus at 9:10 AM on May 30, 2012 [7 favorites]


Yeah I was about to comment on the space invader one. Using drop shadows and offsets to create pixels is pretty ingenious.

I think the Yin-yang was the most surprising.

A lot of these aren't always that useful in real life though. If you wanted, say, some text inside 12 point burst or whatever, it may not 'expand' around text the way you might want it too. Or, if you want to put a border around the whole thing, or a shadow, or a gradient across the whole thing or whatever it becomes completely impossible.

In other words, if you're hacking CSS effects to create shapes, well, then you can't apply CSS effects to those shapes. So you're stuck with solid colors, if that's what you want. Or else you have to completely re-do the hack at which point it just becomes easier to just make a graphic anyway.
posted by delmoi at 9:17 AM on May 30, 2012 [1 favorite]


I kept expecting the last one to be really cartoonishly complicated, like the Mona Lisa or something.
posted by brundlefly at 9:34 AM on May 30, 2012


Works on Safari for iPad but the Fancy View Source thing does not.

Very clever stuff. Some don't work in IE because they use non-standard CSS extensions, but I haven't checked all of them.
posted by jeffamaphone at 9:56 AM on May 30, 2012 [1 favorite]


If you don't care about IE6 support, use data: URIs to actually embed images directly in your html. I did this in a web-controlled jukebox project and it works dandy on firefox and the android browser (the only two I care about), which was nice after it turned out I'd written myself into a bit of a corner with respect to being able to serve images as separate files…
posted by jepler at 10:03 AM on May 30, 2012


I just IM'd this to a developer pal and got this response...

"hahaha- that just opened in IE and every shape was a square- LOL"
posted by Senor Cardgage at 10:06 AM on May 30, 2012 [5 favorites]


Apparently, you could have a single element with a 100 kilobytes of text for it's box-shadow property to display the Mona Lisa without using any image files.

3.3 megabytes
posted by moift at 10:36 AM on May 30, 2012 [9 favorites]


3.3 megabytes

Wow. That page brings Fx13 to its knees, but it eventually soldiers on. Chrome 21 simply crashes and burns with a sadface.
posted by Rhomboid at 10:45 AM on May 30, 2012 [1 favorite]


moift, that's probably the most impressive possible demo of CSS!
posted by fredludd at 10:51 AM on May 30, 2012


3.3 megabytes

Oh me, oh my. I figured the CSS Mona Lisa would crash browsers, and boy did it.

I didn't expect it to be 3 friggin MB though. Sheesh.
posted by cirrostratus at 11:05 AM on May 30, 2012


You can do some very clever things with just CSS. I've recently used the alice.js library to add some small animation effects to a javascript dice game; it uses CSS3 effects to do hardware accelerated animation on existing HTML/CSS elements.

Here's a demo of some of the effects you can do. Works in chrome and firefox, not tested in other browsers.
posted by ArkhanJG at 11:10 AM on May 30, 2012 [3 favorites]


I didn't expect it to be 3 friggin MB though

I didn't make any attempt to compress it, I just took Firebug's verbose representation of the attribute with all unnecessary spaces and unit qualifiers on zero values. It gzips down to a paltry 590K, so there's quite a bit of fluff. (original JPG: 26k)
posted by moift at 11:27 AM on May 30, 2012


This is from css-tricks.com. Chris coyier, the designer who runs the site, keeps it updated very regularly. It's a great site if you're into this kind of stuff. I visit every other day or so for new stuff, and constantly use it as a reference. Well worth bookmarking.
posted by Benny Andajetz at 11:37 AM on May 30, 2012


Should I be this happy that all of this works perfectly running Ubuntu/Firefox? Even the Mona Lisa was not an issue and loaded in under three seconds.
posted by halfbuckaroo at 1:52 PM on May 30, 2012


Yeah, actually, Mona Lisa loaded just fine for me on Windows XP in FF12 on a six year old system. If it's crashing anyone's browser there's probably something wrong.
posted by XMLicious at 2:17 PM on May 30, 2012


I didn't have any issue with the Mona Lisa until I tried to look at the code in firebug - even then it was just some delay.
posted by owtytrof at 2:28 PM on May 30, 2012


The Mona Lisa is just a tremendous amount of individually defined pixels ala the space invader. It's basically <div, style=", and then 3,441,812 characters (including spaces).
posted by postcommunism at 2:33 PM on May 30, 2012


Mona Lisa thing worked fine for me, loaded pretty quickly in chrome as well.
posted by delmoi at 2:39 PM on May 30, 2012


Mona Lisa froze my chrome for about 10-15 seconds and then everything was dandy.
posted by elwoodwiles at 2:41 PM on May 30, 2012


The Sriracha Rooster drawn entirely in HTML5 canvas.

Was this done by waxpancake?
posted by klausman at 3:39 PM on May 30, 2012


Was this done by waxpancake?

No klausman, the rooster was done by me. I sent Andy a tweet thinking that it might be something he would be interested in seeing. It should be noted this was something I made almost a year ago. It was almost more difficult for to get the code to show in Wordpress than it was to actually create the rooster.
posted by hubs at 6:58 PM on May 30, 2012


« Older Measuring the Universe   |   Eric Wynalda’s carefully crafted “eff you” to... Newer »


This thread has been archived and is closed to new comments