meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Spinning the Web

Can CSS create art?  That’s a question I set out to explore recently, and I like to think that the answer is yes.  You can judge for yourself: Spinning the Web, a gallery on Flickr.

cnn

To be clear, when I say “Can CSS create art?” I don’t mean that in the sense of wondering if art, or artful designs, can be accomplished with CSS.  I think we all know the answer there, and have known at least since the Zen Garden got rolling.  What I’m doing here is using some basic CSS to generate art, using web sites as the medium.  For the series I linked, I spun all of the elements on a page using transform: rotate() to see what resulted.  Any time I saw something I liked, I took a screenshot.  After I was done, I winnowed the shots down to the best ones.

As some of you old-schoolers will probably have recognized, I’m absolutely following in the footsteps of Joshua Davis here, and in fact my working title for this effort was “Once Upon a Browser”.  I saw Josh speak years ago, and clearly remember his description of how he generated a lot of his art.  My process is almost identical, albeit with a bit less automation and computational complexity.

Because this is me, I built a little commentary joke into the first images in the series.  It’s not terribly subtle, but with luck one or two of you will get the same chuckle I did.

I’m already thinking about variants on this theme, so there may be more series to come.  In the meantime, as I surf around I’ll stop every now and again to spin what I see.  I’ll definitely mention any new additions via Twitter, and new series both there and here.  And of course if you follow me on Flickr, you’ll see new pieces as they go up.

I hope you enjoy them half as much as I enjoyed creating them.  And if anyone wants to use the originals as desktop wallpapers, as Tim proposed, feel free!

14 Responses»

    • #1
    • Comment
    • Fri 3 Jun 2011
    • 1131
    Rob L. wrote in to say...

    I really enjoyed looking at these!

    So, it sounds like just manually applied rotate transforms to specific elements via Firebug/Web Inspector? If you haven’t done it already, this weekend I may be tempted to write a bookmarklet to randomly fetch DOM elements and rotate them by random amounts, so you can just run it repeatedly until you like the output…

    • #2
    • Comment
    • Fri 3 Jun 2011
    • 1135
    Eric Meyer wrote in to say...

    That’s pretty much what I did, Rob, at least the bookmarklet bit. I apply the transform to the body and all descendants instead of random elements, but having the transform apply to random elements (instead of all of them) is one of the variants I’ve considered.

    • #3
    • Comment
    • Fri 3 Jun 2011
    • 1208
    André Luís wrote in to say...

    What’s that I hear? Is it a bookmarklet baking in the oven?

    Great gallery, Eric.

    • #4
    • Comment
    • Fri 3 Jun 2011
    • 1629
    Tim Shortt wrote in to say...

    Some of these actually make pretty good desktop wallpapers too (in addition to this just being fun and interesting).

    • #5
    • Comment
    • Fri 3 Jun 2011
    • 1641
    Eric Meyer wrote in to say...

    Feel free to use any of them for that purpose, Tim! In fact, I’ll update the post to make that an open offer.

    • #6
    • Pingback
    • Wed 8 Jun 2011
    • 0149
    Received from Some links for light reading (8/6/11) | Max Design

    [...] Spinning the Web [...]

    • #7
    • Comment
    • Wed 8 Jun 2011
    • 1018
    Dan Freeman wrote in to say...

    Great stuff here. I get the transforming/rotating, but how are you chopping images up? It looks like there are pieces transformed that aren’t the full image.

    • #8
    • Comment
    • Wed 8 Jun 2011
    • 1103
    Eric Meyer wrote in to say...

    Dan, the “chopping” you see occurs either because elements overlap each other, or because an element’s parent is set to overflow: hidden and parts of the element rotate into the overflow area. I saw some fascinating results where things lined up just so, like in microsoft3.

    • #9
    • Pingback
    • Fri 10 Jun 2011
    • 0905
    Received from Friday Focus 06/10/11: Three ways to 3D | Devlounge

    [...] – Spinning the Web “What I’m doing here is using some basic CSS to generate art, using web sites as the [...]

    • #10
    • Comment
    • Tue 14 Jun 2011
    • 1101
    Dave wrote in to say...

    Great work. It’s incredible the control you have over a pages’ content using CSS – I’ve never used the transform function for anything before but I may have a tinker with this now! :)

    • #11
    • Comment
    • Sat 18 Jun 2011
    • 0721
    fipe wrote in to say...

    Awesome work. It’s getting to the point where i’m starting to wonder where we’d be without CSS.
    I shall be using them as wallpapers, many thanks.

    • #12
    • Comment
    • Tue 23 Aug 2011
    • 0141
    Doster wrote in to say...

    Really beautiful Eric! Definitely this is art! Are you considering release the code?

    • #13
    • Comment
    • Mon 25 Jun 2012
    • 1050
    Bojan Bjelic wrote in to say...

    Hi, played around and created the bookmarklet based on your idea, seen a couple of guys in the comments asking about it as well.
    Here’s the link to the my blog post, and to GitHub.
    Eric – I’ve written that this is based on your idea, let me know if this is all right with you.
    Cheers, Bojan

    • #14
    • Comment
    • Mon 25 Jun 2012
    • 1622
    Eric Meyer wrote in to say...

    Very cool, Bojan—thank you so much for creating it and publishing it for others to use! (And for the link back, too.)

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


June 2011
SMTWTFS
April August
 1234
567891011
12131415161718
19202122232425
2627282930  

Sidestep

Feeds

Extras