umbrUI Radio Button
keyboard shortcuts: ← previous shot → next shot L or F like
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.
113,494,617,993 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
23 Responses
Pro
simurai
When there are checkboxes, radio buttons shouldn't be far away.
Update: They're live (Safari only).
over 2 years ago
You're crazy. :)
over 2 years ago
Pro
simurai
Haha.. and you're fast.. ;-)
over 2 years ago
Pro
Dain Kennison
i like where this is going. keep going there. i like that place.
over 2 years ago
Fucking nice dude, keep up the good work!
over 2 years ago
Pro
Nikh
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!
over 2 years ago
Pro
Farzad Ban
this is insane!
over 2 years ago
awesome work. Thought about trying transitions?
over 2 years ago
Pro
simurai
Thanks guys.
@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.
over 2 years ago
Pro
Aurélien Foutoyet
Bam ! You did it once again :)
Superb work.
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.
over 2 years ago
Ahh, I agree, I prefer clean markup as well. Would be good purely as an experiment though.
over 2 years ago
Pro
Ian Storm Taylor
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.
over 2 years ago
@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.
over 2 years ago
Pro
Morgan Allan Knutson
Can't...stop...clicking...
over 2 years ago
Pro
Ian Storm Taylor
@Liam
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.
over 2 years ago
Pro
Tuhin Kumar
@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.
over 2 years ago
Pro
simurai
@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.. ;-)
over 2 years ago
Pro
Branden Silva
Gorgeous work. I love clicking on them. Now if only Chrome and Firefox would get on the train to make these work o.O
over 2 years ago
Pro
Ian Storm Taylor
@Tuhin
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.
over 2 years ago
Rebound
umbrUI range slider
by simurai
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
Pro
Luke Ritchie
yip, your good!
over 2 years ago
Awesome stuff!
about 2 years ago
Rebound
Menu test
by Ricardo Arroyo
I wanted to test what a (Simurai) menu would look like.
almost 2 years ago