Pure CSS3 Dropbox

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