CSS Tip: Windows 8 Metro Tile
MetroDue to the simplicity and somewhat clean design of the Windows 8 Metro tiles, they can be easily replicated using relatively simple CSS 3 and HTML 5 techniques. Before we start delving into the ins and outs of CSS and HTML, I will say that this is a basic tutorial that should be relatively easy to follow. However, I will assume a basic knowledge of HTML and CSS i.e. you understand what I mean by tags.
First things first I suggest you make an easily accessible directory on your desktop for example and name it something suitable such as ‘Metro’. Although this obviously isn’t 100% needed it is a good practice to get into when writing code. It means that when you re-visit your code in the future you will have some idea of were everything is.
Create a new file and save it as index.htm in the root of the directory that you made earlier and enter the code below:
If you can’t be bothered to write this back out by hand, you are in luck as the paste bin can be found here.
The most important aspect of this Metro Tile is achieved through the use of CSS. The latest features of CSS 3 such as transitions and keyframe animations allow us to replicate the function of a typical Windows 8 tile.
I will now briefly explain the above CSS to ensure that you understand what this does rather than simply copying it into a document to achieve the end result. The first section of this CSS simply changes the highlight colour on the document to be transparent or clear. This is really necessary to achieve the end result however it just makes the end result a little more immersive and less like a typical web page.
In the next section of the CSS we customise the body element of the HTML document. In this case we set a background colour of #008E8E to simulate that of a typical Windows 8 background colour. Next we set the font of the document to use Segoe UI, which is the official font of Windows 8. Please note that your PC will have to have this font installed for it to work, if not simply use a suitable replacement such as Verdana. I also added a little padding just to make the overall result look a little cleaner.
Now we can move on to the most important part of the tutorial, styling the Windows 8 themed tile itself. In this instance we specify a width of 210 pixels and a height of 118 pixels, there is a good reason in why I use these rather particular dimensions which I will explain later on in the post. The image we will be using has a .png extension and therefore the image is transparent meaning any background colour we specify in the CSS will effectively shine through. The example image used in this tutorial can be downloaded below, simply right click and select save as and save it to the root of the directory that we made at the beginning of this tutorial.
The last part of the tile CSS that needs explaining is the transitions. You have probably noticed that we have four lines all pretty much displaying the same content background-position 2s. However, each of these lines have a different prefix pertaining to their relative browsers. This is very important when it comes to cross-browser compatibility so it is always important to keep in mind.
The reason why the height of the tile element had to be precisely 118 pixels was because the image we are using is effectively two images combined into a sort of sprite like image. When we hover over the original image, the World of Warcraft wallpaper, the image slides down to reveal the second image, the World of Warcraft logo.
The paste bin for the CSS can be found here.
The End Result
The finished product can be downloaded as a .zip file (Metro).