cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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.

Comments

  1. 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.
Loading...
Loading...