I've always loved the minimal Apple wireless keyboard and the pixel perfect WebOS keyboard. I had some free time today so i made a mashup of both. I'll make a black version soon.
@Louie Mantia Cool, I didn't know they we're using VAG, I'll see how it looks. I ran into trouble with the alignment of the ⌘ using Gotham. I wasn't looking to match the type up initially, I was using Proxima Nova before switching to Gotham.
The sharp, clean, edges are what makes it special for me, personally. I didn't want any blurry edges that broke the pixel grid. Toning down on the inner and outer borders of the keys might help.
@Levi Wintering You can absolutely make something pixel precise without the lines being too contrasty. I'm not suggesting that you should have blurry edges, but if you tone down the shadows and highlights and it'll look nicer.
24 Responses
Pro
Levi Wintering
I've always loved the minimal Apple wireless keyboard and the pixel perfect WebOS keyboard. I had some free time today so i made a mashup of both. I'll make a black version soon.
about 1 year ago
Pro
Nathan Walker
Well, it's definitely pixel-perfect.
about 1 year ago
i love this its fantastic!
about 1 year ago
Pro
Alex Parker ⇢ ☁
I want
about 1 year ago
nicely done :D
about 1 year ago
Pro
Dennis Covent
Love this!
about 1 year ago
Pro
Aaron Sananes
Excellent work!
about 1 year ago
Pro
Helder Oliveira
even better than the original! :)
about 1 year ago
Pro
Alex King
wow...i dig it!!!!
about 1 year ago
Pro
Kyle Gray
Spot on!
about 1 year ago
Pro
John ♖♜
So simple and yet sooooo awesommmmeee
about 1 year ago
Pro
Louie Mantia
Looks like you're using Gotham Rounded or something, but the font on Apple's keyboards is VAG Rounded.
Also, even though your keys are neatly pixel-aligned, they are perhaps too sharp, especially along the bottom edges.
about 1 year ago
Pro
Levi Wintering
@Louie Mantia Cool, I didn't know they we're using VAG, I'll see how it looks. I ran into trouble with the alignment of the ⌘ using Gotham. I wasn't looking to match the type up initially, I was using Proxima Nova before switching to Gotham.
The sharp, clean, edges are what makes it special for me, personally. I didn't want any blurry edges that broke the pixel grid. Toning down on the inner and outer borders of the keys might help.
Thanks for the feedback Louie.
And a big thinks to everyone else too!
about 1 year ago
Pro
Mathieu Berenguer ▲▼▲
Nice work !
about 1 year ago
Thanks for liking the WebOS keyboard :)
about 1 year ago
great job!
about 1 year ago
Beautiful!
about 1 year ago
Beautiful! I just think the font could be a bit bigger...
about 1 year ago
Pro
Louie Mantia
@Levi Wintering You can absolutely make something pixel precise without the lines being too contrasty. I'm not suggesting that you should have blurry edges, but if you tone down the shadows and highlights and it'll look nicer.
about 1 year ago
Pro
Levi Wintering
@Louie Mantia I took your advice and played around with it a bit. I agree, it looks a little nicer. Thanks for the constructive feedback!
about 1 year ago
Rebound
Hello!
by Sutherland Boswell
Levi's shot inspired me to practice some of what I've been learning in jQuery. Hope you don't mind!
The keyboard itself is created entirely from CSS, so it doesn't quite live up to the amazing look of the original but it's fun to play around with.
about 1 year ago
Pro
Garrett Godsey
gorgeous!
about 1 year ago
Whoa there.
8 months ago
Rebound
Apple Keyboard
by Prince Siflah .T
Got inspired by you Levi and tried to do a photorealistic version of the apple keyboard, hope you don't mind :)
7 months ago