Volume Control Rendered Completely in CSS


8 Responses

  1. Tom Giannattasio Tom Giannattasio

    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


    almost 3 years ago

  2. Tom Giannattasio Tom Giannattasio

    Oh yeah, the angle gradient is a webkit only kind of thing.

    almost 3 years ago

  3. Norm Norm

    Superb, this looks awesome! You have really opened my mind with what's possible with CSS. Keep up the awesome innovation :)

    almost 3 years ago

  4. Jeremy Wright Jeremy Wright

    The chrome light reflection on the dial looks great! Great work!

    almost 3 years ago

  5. Michel Bozgounov Michel Bozgounov


    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)? :)

    over 2 years ago

  6. Tom Giannattasio Tom Giannattasio

    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!

    over 2 years ago

  7. Michel Bozgounov Michel Bozgounov

    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). :)

    over 2 years ago

  8. Lukas Bugla Lukas Bugla

    Love it!

    over 2 years ago

keyboard shortcuts: previous shot next shot L or F like