Took my sidebar design and made it in CSS.
The only image in there is the background.
There is another image that will be in the final but it is not being used in this shot (a noise texture for the top bar).
EDIT: Looking at the top bar now, I need to make it lighter.
Zero Gradients used. (Incase you couldn't tell... I really don't like CSS Gradients)
Icons used are the Pictos Web Font via @Fontface! (Thanks so much @Drew Wilson!)
Took this screenshot in Opera. The Chevrons(Play icons) have been rotated via CSS3 Transforms.
I've added a screenshot from Safari 5 (Mac) for comparison. (This also shows the hover state)
If you have any suggestions, comments or critiques I would love to hear them :)
keyboard shortcuts: ← previous shot → next shot L or F like Z toggle zoom
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–2015 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.