css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
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

Messing around with 3d transforms and delayed transitions. Colours from http://colour.charlottedann.com/ and icons from http://symbolset.com/


  1. so cool! love this idea

  2. Thanks for OfficeColours, I recently added it to my web dev watch site (wildwebwatch.com), it's really cool. And grats for this pen, lovely idea, clean code, I like it ! :)

  3. thanks all! @Hugo double thanks for adding colours to your site, Wild Web Watch looks like such a handy resource :)

  4. I had not noticed before but the large and white text-shadow on the hover state makes it look like the background is a centered radial gradient. How cool is that, clever technique !

  5. crazy awesome mate.

    For bonus points why not use url selectors instead of nth-child
    a[href*="twitter"] { }

  6. That seems accurate to me, it would be a good use of attribute selectors.

  7. good point, that would be much more fitting for proper use; for this demo though I wanted to keep the html at a min so I'm just using hashed urls.

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

You must be logged in to comment.