The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Pure CSS3 keyboard of glory.

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #31624

    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!


    How did you do the button animation without javascript? Also, the layout is really buggy in safari, looks like some width issue


    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….

    *disclaimer – when I say “animation” I probably mean “transition”.


    @noahgelman At first guess I would say it looks like :active with a transition.


    Thanks Christopher.

    @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;


    @aaronsliber I think there is something wrong with that link.


    Working now – Probably my internet connection being slow.


    Oh, yes. :active with transition makes good sense


    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
    is much good. Have bookmarked it for my next project.


    Why does the whole keyboard move up and down? Looks kinda weird and removing it would probably increase the framerate by quite a bit.


    @sl1dr, @mottie, @markthema3

    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.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.