CSS Design and style... the possibilitiesCSS Design and style... the possibilities

CSS Art - Windows Keyboard Layout

Windows Keyboard Layout

This example is from SEO Consultants.

The keyboard image effects that you see below showing a Windows Keyboard layout are being controlled through an external .css (Cascading Style Sheet) file. These are not actual images, but a carefully thought out list of CSS attributes that gives the appearance of a Windows Keyboard.

We've indicated upper and lower case keys using the forward slash (a/A). This Windows Keyboard layout is a work in progress.

I like the use of the <kbd> element to create an image of a Windows keyboard, it's kind of semantic don't you think?

Thanks for the use of the example!

 Esc   F1  F2  F3  F4   F5  F6  F7  F8   F9 F10F11F12 PrtScnPause

 `/~  1/!  2/@  3/#  4/$  5/%  6/^  7/&  8/*  9/(  0/)  -/_  =/+ Backspace

   Tab    q/Q  w/W  e/E  r/R  t/T  y/Y  u/U  i/I  o/O  p/P  [ / {  ] / }    \ / |   

  Caps Lock   a/A  s/S  d/D  f/F  g/G  h/H  j/J  k/K  l/L  ; / :  ' / "    Enter   

        Shift         z/Z  z/X  c/C  v/V  b/B  n/N  m/M , / <. / >/ / ?       Shift       

  Ctrl  Windows Key Start  Alt                                Space Bar                               Alt  Windows Application Key   Ctrl  

Related:

«« Working LCD Clock | CSS Border Art Index | UK Flag »»