iPhone keyboard with CSS3 — no images

Yeap, this is yet another of those things that make no practical sense but are fun to make just to see whether it can actually be done. It’s also a proof of the fact that when I have too many things to do, I tend to procrastinate more. :P

Here it is (resize the window to get the narrow version ;)):

http://lea.verou.me/demos/iphone-keyboard/

It should look correct in Firefox 3.6, Chrome 4 and Safari 4. It looks best on Firefox 3.6 due to it’s ability to render subpixel distances, whereas other browsers just round everything to the closest pixel. It also looks best in computers with Helvetica installed (it’s installed by default on macs btw) but it should look sufficiently OK with Arial too, since it’s a rip-off of Helvetica ;) (the only problem with Arial is that the line-height of the buttons with the symbols will be slightly different since the custom font’s measurements are based on Helvetica Bold) Also, ironically, it doesn’t look ok in the iPhone!

For those of you that don’t use one of the aforementioned browsers as your primary and are way too bored to switch (or don’t even have them installed (!)), here are two screenshots from Firefox 3.6 (nicely cropped to only contain the keyboard):

Screenshot of the wide version

Screenshot of the narrow version

As for how it’s done, as you can easily see, most of it is run-of-the-mill for someone with a decent grasp on CSS3: media queries, CSS gradients, shadows, border-radiuses and RGBA. The only tricky part is the symbols for shift, backspace and international. I have to admit I cheated a bit here: I didn’t use images, but I used @font-face with a custom font that just contains these 3 symbols. The reasons behind that are that this way I wouldn’t have to create 2 versions of the symbols (light and dark, for pressed and normal states respectively) and that they are vector, so they scale (try zooming in).

Please note that there’s no functionality attached to it. It’s just an interface. I wasn’t interested at making an on-screen keyboard in general, I was just interested to see if a keyboard visually identical to iPhone’s is possible with CSS alone. If someone wants to actually use it and/or develop it further, you’re free to do so, as long as you keep the comment at the start of the css file. ;)

An interesting discussion about this could be “What would be the ideal markup to semantically style a keyboard?”. Personally, I just paid attention to the more pragmatic objectives of making the keys focusable, and keeping the complexity of the DOM tree to a minimum, so you might find it semantically wrong (I used a <ul> for the container, <li>s for the rows and <button>s for the keys) — but what is right actually in this case? Is a keyboard a list or a table of keys? I don’t think so…

  • http://twitter.com/LordPancreas Hugh Guiney

    Very nicely done! It may not be too far away from what Apple actually does to create their layout; I know they use CSS3 to style iTunes.

    As for the semantics, *probably* a table, since tables are for “tabular data”, and “tabular” according to Merriam-Webster means:

    “2 a : of, relating to, or arranged in a table; specifically : set up in rows and columns”

    For the keys themselves, two nested elements are supposed to represent an actual keyboard key: http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-kbd-element.

  • http://leaverou.me Lea Verou

    Thanks!

    I thought the same thing about tabular data at first. The thing is, they are set up in rows, but NOT in columns. The keys don’t align vertically in almost every keyboard I’ve ever seen, including iPhone’s. So, it violates Merriam-Webster’s definition.

    Thanks for the kbd element link, I would never think of that!
    It seems quite redundant though to use two elements to represent a key, and it’s not even focusable. :-( Usability should come before theoretical purity I think.

    PS: I fixed the links in your comment. I think WordPress accepts a subset of HTML for basic formatting, it doesn’t use any special language for that. :-)

  • http://jlix.net/ Sander Aarts

    Well done!

    About tables… “set up in rows and columns” is not the only requirement as that would argue for table layouts as well. the rows and columns should represent a semantic relation between the items in these rows and columns. This is not the case here, not even for the rows. The position of the characters is partly based on creating a usable keyboard and partly on technical issues in mechanical keyboards.

    I don’t think the kbd element is meant for this kind of online keyboards either. The examples given in the specification use it to refer to keys, not to mark up the keys in an interface itself. Perhaps you could have used this element in your post though when you were refering to the shift, backspace and international keys ;)

    • http://leaverou.me Lea Verou

      I agree with every single sentence in your comment.

      Kudos! :)

  • http://desandro.com David DeSandro

    This is AWESOME. I was comparing it to my iPhone and marvelling at all the details you managed to reproduce. On the contrary – having a “template” like this is especially practical for styling buttons and forms. I still feel like we need lots more of examples of CSS gradients, and I’m glad to have another stellar one here.

    Just a heads up: On Firefox 3.6 on a Mac, the P doesn’t fit on the top line. Tweaking #iphone-keyboard button to width: 8.6% seems to fix it. http://twitpic.com/13y0d5

  • http://leaverou.me Lea Verou

    Thank you David!

    I changed the width to 8.6%.But apart from that…does it really look that bad in a Mac? Aw, crap. The symbols look bloated for some reason, and the button paddings are way smaller. :-(
    I think perhaps using pixel measurements in everything would solve such issues, but then it would be less flexible… (now you can just change the overall width, and it still works)

  • http://www.addyosmani.com Addy Osmani

    Fantastic work, Lea. It’s great to see more people experimenting with CSS3 in this way. If you’ve seen the other recently created piece of CSS3 artwork (the Opera logo re-created entirely in CSS3), I would have to say the demo you created is far more impressive!.

    Well done. I might just feature this in an upcoming resource post on my site!

    • http://leaverou.me Lea Verou

      Thank you!

  • tree

    :)Nice,very pleased to learn from you.
    Beautiful code, beautiful people.

  • Pingback: HTML5 Experiment – Reversi « Brian Nickel’s Online Journal

  • Pingback: Blog SWL-Projekt » “Wow, Mona Lisa with pure CSS!”

  • http://www.twitter.com/ObjectifMars ObjectifMars

    Nice job.

    For accessibility purpose, it may be better to add glyphs (shift, globe for internationalization, backspace) in the right Unicode points: 2127 ( ⇧) or 240F (␏) for shift, 1F310 (🌐 Unicode 6 by the way) for the globe and 232B (⌫) for delete to the left. In addition the key to display the keyboard for numbers (currently just plain text 123) could be also a glyph attached to the Unicode point 1F522 (🔢 Unicode 6 again). You can find a glossary of each Unicode point and an example of the glyph for them in a pdf at http://www.unicode.org/charts/charindex.html

    I think it’s better to add a glyph to a unicode point whom has meaning, screen reader could understand them, and in case of FOUC it could be better. I doubt it because of lack of Unicode support of fonts on Windows and surely the new points of Unicode 6 which is the first to use a new plane are very recent.

    We can be even more accessible if we want : write the meaning of the key (backspace for example) in the button tag with a negative text-indent to hide it, and write the unicode point in a pseudo-element :after or :before. Downside we “loose” the presentation in browsers which don’t support pseudo-element.

    P.S. : try to modify current selector “.commentlist .avatar:hover” by “.commentlist .comment-body:hover .avatar”, it’s good to see a blog which play with a lot of CSS3 possibilities

  • http://www.lomejordetijuana.com Roberto

    Excellent. No use for it, but it’s good to know it can be done.

  • Alejandro Paredes

    hola, yo hice este, no había visto el tuyo :P
    http://codepen.io/ciw/pen/DyhrI