Hello all, I've been messing around with webkit css3 and trying to push it to the limits... something I wouldn't dare do on a production site. This is just for fun and experimentation. Experimentation started with making nice buttons, but eventually grew into creating a full keyboard with a range of keyframed animations, from button presses to shadows. Anyways, check it out and let me know what you think.
Webkit browsers only, 100% code - no images, 110% ridiculous.
You are right - 110% ridiculous, impractical and wasted a few hours... I LOVE IT!! :-) If you don't push the limits, you will never find your way past them. I bet you learnt a few things creating this.
Thanks clokey2k. I started running into a few snags with making some css3 buttons with gradients. I wanted a horizontal patterned gradient under several other rgba gradients, and learned that you can declare multiple attributes for -webkit-background-size. I finished my button after that breakthrough, threw it in my trusty 'assets/experiments' directory, and started adding to it day after day.
I think I'm satisfied for now, but if I were to continue I may bind keys through jQuery so you could bang on your keyboard and watch the keys press on the screen while saying something like, "hur, hur, it workz!" From there, I'd probably make a CSS3 LCD screen that your typed words could show up on, add a cap lock light indicator, and enable shift+ shortcuts. I'm already experiencing a frame-rate drop with this experiment, so I'm pretty sure it would look terrible for most people at that point.
So I started with one little problem to solve, and this is what happened. Sometimes I love the internet too much. Speaking of love, Happy V-Day everyone!
Thanks Noah, I had declared "font-weight: 700" with a native font, and before I went to an @font-face implementation. Declaration dropped.. spacing fixed. As for the box-shadows not showing up on the keyboard element, I have no idea. If I turn the animation off through firebug lite in safari 5, then the box-shadows show up. To the bat cave to do some research...
Also, Noah, which animation are you referring to; the shadows underneath the keys, the gloss gradient when you press, or the actual pressing? The button press animation is something I figured out a while ago. I could tell you, but would be doing you an injustice, as Dan Cederholm of SimpleBits has recently published an article via Typekit. Here you go....
@everyone - If you're looking for the buttons specifically, I've got some code up on jsfiddle. It's not commented, but there is less code to sort through;
Nice one aaronsilber, but I actually viewed the css3keyboard demo in latest version of firefox 4.0.1 But was not getting what all are saying. Then thaught that some property's are not supported here. And then checked in chrome. Just want to say awesome work. Also the link http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/ is much good. Have bookmarked it for my next project.
I've only recently seen that particular keyboard - I was actually inspired by a button I had made with css3 animations on :active - and it turned into a full keyboard.
This keyboard was never really meant to 'make sense.' It was mostly exploration on my part and being really curious as to how far CSS3 could go. Chris Coyier had made a comment once that CSS3 animations should be used instead of javascript animations for every possible application since CSS3 animations are hardware driven. Given that concept, I thought I would throw as much as possible at this experiment - hence the floating keyboard and the shifting key shadows and so on. I have no frame rate issues at home, but that could differ depending on the capabilities of your machine.
Overall, my motto is; If you're experimenting in order to learn something new, you might as well create something cool while doing it.
Webkit browsers only, 100% code - no images, 110% ridiculous.
http://meetaaronsilber.com/csskeyboard/
If you don't push the limits, you will never find your way past them. I bet you learnt a few things creating this.
I think I'm satisfied for now, but if I were to continue I may bind keys through jQuery so you could bang on your keyboard and watch the keys press on the screen while saying something like, "hur, hur, it workz!" From there, I'd probably make a CSS3 LCD screen that your typed words could show up on, add a cap lock light indicator, and enable shift+ shortcuts. I'm already experiencing a frame-rate drop with this experiment, so I'm pretty sure it would look terrible for most people at that point.
So I started with one little problem to solve, and this is what happened. Sometimes I love the internet too much. Speaking of love, Happy V-Day everyone!
http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/
*disclaimer - when I say "animation" I probably mean "transition".
@everyone - If you're looking for the buttons specifically, I've got some code up on jsfiddle. It's not commented, but there is less code to sort through;
http://jsfiddle.net/jXBN6/45/
Just want to say awesome work.
Also the link http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/
is much good. Have bookmarked it for my next project.
I've only recently seen that particular keyboard - I was actually inspired by a button I had made with css3 animations on :active - and it turned into a full keyboard.
This keyboard was never really meant to 'make sense.' It was mostly exploration on my part and being really curious as to how far CSS3 could go. Chris Coyier had made a comment once that CSS3 animations should be used instead of javascript animations for every possible application since CSS3 animations are hardware driven. Given that concept, I thought I would throw as much as possible at this experiment - hence the floating keyboard and the shifting key shadows and so on. I have no frame rate issues at home, but that could differ depending on the capabilities of your machine.
Overall, my motto is; If you're experimenting in order to learn something new, you might as well create something cool while doing it.