Pure CSS, no images at all. 2x Inside.
Animated CSS3 version here - http://heldfree.com/play/dropbox/
Please view in Safari :)
Font used is 'Archivo Narrow' from Google Web fonts as 'Franklin Gothic Standard' wasn't readily available for use.
This work revealed subtle differences in the way Safari & Chrome differ in rendering larger gradients and shadows. I recommend viewing this in latest Safari because -
1. it anti-aliases the skewed edges
2. it renders bigger inset shadows and gradients without noticeable bands
3. Colors really vary on both browsers, even though they are based on the same rendering engine
As much as the state or the art brings optimism (specially availability of many such tricks on mobile safari), my experiments expose tiny quirks at unexpected places.
Sass mixins helped reduce & manage a lot of complexity. Extending it with ruby functions helped add randomness. Mixins helped reduce effort duplication. See here https://github.com/heldfree/heldfree.github.com/blob/master/play/dropbox/sass/screen.scss
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.