Finally figured out a hack to fake angle gradients in CSS, woot!
Live version: http://attasi.com/experiments/volume/
Much inspired by Norm's awesome volume piece: http://dribbble.com/shots/210285-SImple-Dial
over 2 years ago
Oh yeah, the angle gradient is a webkit only kind of thing.
Superb, this looks awesome! You have really opened my mind with what's possible with CSS. Keep up the awesome innovation :)
The chrome light reflection on the dial looks great! Great work!
Here how it looks in:
-- Firefox 5/WIn
-- Safari 5/Win
-- Chrome 12/Win
I thought that for now, CSS3 supports only linear and radial gradients (or I am late in reading... again)? :)
Thanks Michel, you can certainly tell I designed this on a Mac, huh?
Yes, CSS3 only supports linear and radial gradients. I'm using 3D transforms to create the illusion of an angle gradient, hence the absence in less capable browsers.
Looks great in Safari and Chrome w/ 3D activated, haha!
I was making the tests on a laptop with a weak videocard. I suppose that 3D transforms are disabled by default in the browser, when the 3D options of the card are not capable of rendering them. So this should not be OS-dependent, rather, hardware dependent (I should do some more tests later). :)
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