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,142,217,863 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
26 Responses (page 1 of 2)
Pro
Dustin Cartwright
You can view the real version here on Dropbox. It's an Apple wireless keyboard! Click on the paper and start typing, the keys will depress :). It heavily abuses the css3 box shadow attribute ha. It's a work in progress, and I could do a ton more with it. But I felt like sharing it today. Enjoy!
Thanks to Breefield for the javascript.
about 2 years ago
Wow.
about 2 years ago
That's simply amazing.
about 2 years ago
Pro
Dustin Cartwright
Thanks guys :).
about 2 years ago
Absolutely Outstanding! It would be even better if it typed onscreen!
about 2 years ago
Pro
Dustin Cartwright
@Jake I'm actually wanting it to. It would be nifty if when someone clicked a key, it would depress and the letter would appear above on the paper ha.
about 2 years ago
Pro
David Keegan
insane!
about 2 years ago
Pro
Jono Mallanyk
Truly amazing work.
about 2 years ago
fan-freakin-tastic dude. just tweeted about it via @particleteam.
about 2 years ago
Pro
Dustin Cartwright
Sweet, Thanks Cole! :D and thanks for the compliments guys.
about 2 years ago
Pro
Bady
wat that is awesome man :)
about 2 years ago
Pro
Rui Melo
Really impressive!
about 2 years ago
Pro
Gert Jan Lodder / Pixellod
Really amazing!
about 2 years ago
badass
about 2 years ago
Pro
Natan Nikolic
Marvelous! Why not use CSS3 gradient to replace the background image and have the entire thing made only with CSS. Kudos, mate!
about 2 years ago
Pro
Dustin Cartwright
@Natan, I thought about that, but I could see a drastic different in the browser rendered gradient, and using a background with one pre-rendered. So I went with the latter, purely for aesthetic reasons. :p
about 2 years ago
Pro
Natan Nikolic
http://dowebsitesneedtolookexactlythesameineverybrowser.com
:P
about 2 years ago
Pro
Dustin Cartwright
Ha yeah. I mean it just looked better in general with the gradient from photoshop :P. The one the browsers were rendering wasn't as well dithered as the background image. So I went with the latter ha.
about 2 years ago
Pro
Natan Nikolic
Maybe you should try creating it with this tool:
http://www.colorzilla.com/gradient-editor
about 2 years ago
Pro
Maykel Loomans
Neat stuff! Now you just need the correct font on it ;)
about 2 years ago
Pro
Charly Prioglio
This isn't a picture?? :O
about 2 years ago
Pro
Dustin Cartwright
Haha nope. It actually works :p.
about 2 years ago
sick :x
over 1 year ago
Rebound
Redesigned demo page
by Dustin Cartwright
Decided to redesign this demo for this particular experiment. Looks a lot more smooth now, and lends a lot of it's style to the Apple website too. Ditched the slow javascript typing script and went with the point of the demo. Low contrast, smooth gradients, and aluminum. Looks very nice. :)
over 1 year ago
Great idea, awesome man. :-)
over 1 year ago