When there are checkboxes, radio buttons shouldn't be far away.
Update: They're live (Safari only).
over 2 years ago
You're crazy. :)
Haha.. and you're fast.. ;-)
i like where this is going. keep going there. i like that place.
Fucking nice dude, keep up the good work!
This is insane. You'r harnessing the power of CSS3 like the US and USSR did with nuclear energy during the cold war. All that means, this is simply kickass!
this is insane!
awesome work. Thought about trying transitions?
@Liam Yeah, transitions would be really cool, but it seems that :before and :after pseudo classes can't be animated. I could add extra DIVs to the markup, but I think it's also cool that they are made without any extra markup. Hmm.. Maybe I'll try another button with a transition.
Bam ! You did it once again :)
I agree with you concerning the markup.
To me, the interesting part of your work were to keep a clean markup, no extra divs, semantic coding.
It's really cool you did a great job !
ps : the most difficult thing is to stay more than 30sec on your page without to click.
Ahh, I agree, I prefer clean markup as well. Would be good purely as an experiment though.
These are awesome. Maybe it's only me, but the rotation feels a bit too exaggerated.
Also, transitions don't really make sense for this type of button.. they would just add unnecessary waiting time.
@Ian I'd say these are the only buttons I've seen lately that does make sense for transitions. It's not like these buttons are usable as they are anyway, they only render correctly in Safari 5. Also, considering it's a switch the transition should probably only last 1/4 of a second or less.
I'm not really sure why these buttons merit transitions. Even in real life, these types of buttons (like the ones you saw on tape recorders) barely had a transition. They snapped from on to off quick as anything. So why add some now just because we can?
Just noticed another thing... the highlight on the top of the buttons from the color of the glow doesn't really make sense realistically.
@Ian Actually it does, though not to the extent @simurai took it. The light source is at the top so when the button is pressed, a part of it is above the plane of the tape, making it directly exposed to the source of light. Hence we need that glow. But I am not sure if it would be that sharp.
@Ian & @Liam (confusing.. hehe..) Yeah, the pressing down should be instant, otherwise it feels heavy. But I guess it depends on the player.. I can remember one that when the buttons got released into the up state, they had a smooth transition instead of snapping.. but yeah.. without any extra markup.. not really possible yet.
Something I might can try is that it comes back up a bit from the :active to the :checked state. I think that's how they used to work.. just a little snapping back.. not sure if you know what I mean.
@Ian Yeah, the top glow is a little tacky.. ;-)
Gorgeous work. I love clicking on them. Now if only Chrome and Firefox would get on the train to make these work o.O
Yeah sorry I wasn't so clear. I agree that the light should hit that part, but I don't think it should be color-tinted (really obvious on the record button).
All this being said of course, these things are really nice.
The last of the umbrUI series, at least for a while. ;-)
Unfortunately I had to add an extra span for the icons because the :before and :after pseudo classes don't seem to work on a range input element. ;-(
See the demo (Safari or Chrome)
over 2 years ago
yip, your good!
about 2 years ago
by Ricardo Arroyo
I wanted to test what a (Simurai) menu would look like.
almost 2 years ago
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