user profile image

A quick css/js version of the windows 8 UI. []


  1. This is blinking on all mouseovers.

  2. it doesn't do that on my hosted version. probably something in codepen

  3. Nice. Getting a little clipping issue on the left boxes. Can't work out why though.

  4. yeah, its because the slider's container starts there, were as the right side has some padding, so the boxes have some space to expand

  5. O okay, could we not just get rid of the overflow:hidden on the ul then and add a positive padding with a negative margin then? Like this? Not perfect but you get the idea.

  6. ahh perfect. thanks for that

  7. Really nice!

  8. Nice looking demo! Question - was this originally written in SASS and then the generated style copied here? I ask because the :hover transitions are unnecessarily repeated for each of the colors, instead of applied to a common class, which is easy to miss with @extend vs @include.

  9. Yeah I wrote this using SASS. I pasted the uncompressed version of the CSS. I used both @extend, @include and a few mixins to make life a bit easier

  10. Codepen accepts SASS (gear toggle) - would rather see the clever version anyway :)

  11. Awesome

  12. try adding this to your code:

    • { -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; }
  13. Freaking cool!

  14. Nice job! Just add backface-visibility: hidden; -webkit-backface-visibility: hidden; to prevent blinking, I think it's currently supported with -webkit-.

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

You must be logged in to comment.