Nike Trophy Shelf

Dribbble-shelf

1 Attachment

13 Responses

  1. Juan Arreguin Juan Arreguin

    Been working on my portfolio page, little by little. Incorporating the things I use such as Instagram, Path, and my Nike Fuelband. Pulling stats and elements from all three.

    The Nike Fuelband stats page has a nice shelf displaying your trophies, but they are images. So I decided to recreate these shelves in CSS.

    Included is a jsFiddle that shows what I'm doing.

    Play with it

    All is a work in progress, working on simplifying the markup (current issues: fixed width, alignment issues, etc...)

    But for now enjoy!

    almost 2 years ago

  2. Peter Burdette Peter Burdette

    Great stuff Juan! =)

    likes

    almost 2 years ago

  3. Juan Arreguin Juan Arreguin

    @Peter Burdette thanks man! :)

    almost 2 years ago

  4. Nick Slater Nick Slater

    SICK!

    likes

    almost 2 years ago

  5. Juan Arreguin Juan Arreguin

    @Nick Slater thanks brosef!

    likes

    almost 2 years ago

  6. Tyler Hansen Tyler Hansen

    Incredibly inventive CSS

    likes

    almost 2 years ago

  7. Juan Arreguin Juan Arreguin

    @Tyler Hansen thanks! Did some hackery, I think the output so far is looking good.

    almost 2 years ago

  8. Joshua Sortino Joshua Sortino

    This is pretty darn solid. That's a pretty complex graphic to recreate with pure CSS. This gives me so many ideas ...

    likes

    almost 2 years ago

  9. David Silva David Silva

    Nice job with the design and CSS, dude.

    likes

    almost 2 years ago

  10. Juan Arreguin Juan Arreguin

    @David Silva well I didn't design it all, but I did "redraw it" persay in CSS.

    almost 2 years ago

  11. Wayne Dahlberg Wayne Dahlberg

    holy crap cakes, that's some awesome css!

    likes

    almost 2 years ago

  12. Juan Arreguin Juan Arreguin

    @Wayne Dahlberg thanks man, glad you like it :)

    almost 2 years ago

  13. Brentley Broughton Brentley Broughton

    Sweet! The CSS shelf is incredible. Impressive.
    How did you pull the Nike stats? Tried this earlier & it worked, but I think the way I was doing it broke with the new Nike+ site.

    likes

    almost 2 years ago

keyboard shortcuts: previous shot next shot L or F like