How To Create Windows 8 Logo with HTML and CSS
Microsoft recently unveiled a new logo for Windows 8 that does away with the colorful flag, first introduced with Windows XP in 2001, and instead uses flat, tile-like shapes done in one solid blue color.
The exact type face that was used to design the logo is unknown though a quick search did reveal that Windows 8 font is very similar to Freight Sans and the Segoe family of sans-serif fonts.
I am not qualified to dissect the design of the new Windows 8 logo but there’s an active logo-redesign contest happening at 99Designs where over 200 logo designers have submitted several hundred variations of the Windows logo. Some of them are interesting, others not so much but the common theme is that designers want Microsoft to preserve the colors of the original logo in the metro tiles.
On a related note, Web developer Vasiliy Zubach has created a web version of the Windows 8 logo that uses no images and is written in pure CSS and HTML. Vasiliy also using CSS3 animations to add some motion to the Windows tiles and the whole thing looks exactly like the real logo.
This is the underlying CSS code that does the trick.