- This topic is empty.
-
AuthorPosts
-
February 14, 2011 at 3:22 pm #31624
Historical Forums User
ParticipantHello 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.
February 14, 2011 at 4:05 pm #60383clokey2k
ParticipantYou 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.February 14, 2011 at 4:52 pm #60377ParticipantThanks 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!
February 14, 2011 at 5:51 pm #60366noahgelman
ParticipantHow did you do the button animation without javascript? Also, the layout is really buggy in safari, looks like some width issue
February 14, 2011 at 7:21 pm #60370ParticipantThanks 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…
February 14, 2011 at 7:28 pm #60371ParticipantAlso, 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….
http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/
*disclaimer – when I say “animation” I probably mean “transition”.
February 15, 2011 at 3:10 am #60326jamygolden
Member@noahgelman At first guess I would say it looks like :active with a transition.
February 15, 2011 at 11:24 am #60215ParticipantThanks 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;
February 15, 2011 at 11:32 am #60210Member@aaronsliber I think there is something wrong with that link.
February 15, 2011 at 12:27 pm #60191MemberWorking now – Probably my internet connection being slow.
February 15, 2011 at 7:35 pm #60098ParticipantOh, yes. :active with transition makes good sense
May 26, 2011 at 7:20 am #75267hirenkhambhayta
MemberNice 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.May 27, 2011 at 10:35 pm #75140markthema3
ParticipantWhy does the whole keyboard move up and down? Looks kinda weird and removing it would probably increase the framerate by quite a bit.
June 2, 2011 at 12:33 pm #74527Participant@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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.