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!
over 1 year ago
Great stuff Juan! =)
@Peter Burdette thanks man! :)
@Nick Slater thanks brosef!
Incredibly inventive CSS
@Tyler Hansen thanks! Did some hackery, I think the output so far is looking good.
This is pretty darn solid. That's a pretty complex graphic to recreate with pure CSS. This gives me so many ideas ...
Nice job with the design and CSS, dude.
@David Silva well I didn't design it all, but I did "redraw it" persay in CSS.
holy crap cakes, that's some awesome css!
@Wayne Dahlberg thanks man, glad you like it :)
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.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter