user profile image

Another experiment into CSS circles I built for a feature on the upcoming www.barrelny.com redesign.

The sticky is made from two seperate circles (front and back), which are moved and masked inversely on :hover (by the circle wrapper elements). A rotation is also applied to mimic realistic motion. Gradients are applied to the front and back to give the illusion of depth.


  1. vorillaz @TheodoreVorillas on

    Pure awesomeness

  2. Patrick, I can't count the ways that this is providing me with wonder and entertainment right now. I made it into a song: "PEEL me...HELLO!!! PEEL me...HELLO!!!" Take THAT, Dr. Seuss!!!!

  3. Hello, this afternoon I saw your work via twitter and I did not realize who the author was. I wanted to tell you that using the overflow for masking is a nice solution. I'd like to translate this sort of project-experiment I wrote last year into js (For now it is in as3): http://youtu.be/fOwuMOne9hQ (please don't care about the quality of the intro). I wonder if you are interested in sharing some ideas.

  4. Hey Roriz - your video looks great, and I was actually thinking about trying a square version of this! I will try to mock something up - I think it's definitely possible!

  5. I'll try to carve out time to make the code a little more presentable before creating a git archive for my as3 version. Otherwise, I think that it will get cobwebs. I'll let you know. I remember when I worked on it I encountered some difficulties in irregular shapes before finding a solution. For the square there should be no big problems :). I hope to keep in touch, then.

  6. Hey Patrick, been quite sometime since you shared this pen but wanted to say it's a great piece of work! I've been trying to adapt this for a rectangle layout, have you had luck? I've come close but no luck.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.