[button type=”bd_button btn_large” url=”https://knowmywork.com/demos/metro_style_tiles.html” target=”on” button_color_fon=”#FF0000″ button_text_color=”#ffffff” ]View Demo[/button][button type=”bd_button btn_large” url=”#” target=”on” button_color_fon=”#00ff00″ button_text_color=”#ffffff” ]Github Link[/button]
” I have been using Windows 8 for a while now, and the first thing that struck me as impressive about it was the metro style tiles built into the dashboard, and also I can bet that even if you did not like the windows 8 over windows 7 , you must have liked the start screen tiles effects. So I thought it would be really cool if I could create those animations and effects with CSS 3D transforms . And, here goes the tutorial on how I did that. “
You can view the demo on the link provided above and can find the source code on github through the link above.
Overview of the Design
The demo’s structure is pretty simple: The dashboard is a list of tiles, of three sizes, small, big, and 2xbig, floated inside 3 columns.Each tile inherits a common property through class:”tile” and size property through classes: “tile-2xbig” , “tile-big” or “tile-small” and then finally its unique properties through class name “tile” followed by unique number like “tile-1”.Below is code snippet of whole demo structure.
I will be explaining the CSS code(designing of metro tiles) by dividing it into different sections based on following points.
– The Demowrapper class
– Coloumns (class:col)
– Designing of tiles
– Different transforms and animations.
Lets talk about things one by one , starting with demowrapper class.
1. First, the styles for the demo wrapper, the container in which the whole demo will be contained. We’ll define general styles, and make sure to set a perspective to activate the 3D space, otherwise, the whole demo will look flat and two dimensional.
2. Now let’s start with the dashboard class. The first animation applied to the dashboard is fired when the page loads. The dashboard is initially hidden and translated to the right of the screen, and fades and translates in to position on page load.Dashboard contains the three columns in which tiles are floated.
3. The dashboard is divided into three columns, which takes the width of the screen according to the size of the screen i.e mobile reponsive. Cleafix property is also applied to floated elements to avoid collapsing. (NOTE: 1. I am assuming that you are familiar with the concept of collapsing, if not please read about it on google. 2.And also even if you not use clearfix here, you won’t find any difference since background color is white but it is recommended to use clearfix property.)
4. The most important part of css code here is the designing of tiles. There are three different classes applied to each tile, one class “.tile” provides common properties to all tiles, second class provides one of the three available sizes to each tile and the third & last one provides unique properties to each class(being different class for each tile). The code snippet of all three classes is shown below in order.
5. I have used four kind of animations/transforms in wide sense. One is change of background and text color which is covered in designing of tiles only.Second one is Sliding Tiles in shich when we hover over a tile the content of tile moves up(there are two classes for this “slideTextUp” & “slideTextLeft”).Third one is Rotating tiles in x and y plane(flipping effect) and the last one is tiles containg figure caption.I Will be talking about them one by one.
Regular tiles, with no special kind of animation, will change their background and text color on hover. In order to make sure the text is vertically centered in each tile, each one will contain a
div with a paragraph containing the text. We’ll use the table-cell display property to center this text vertically.
Tiles with text sliding inside of them will contain two
divs, each div will be like a “face” or a block inside the tile. These
divs are positioned absolutely, and moved on hover according to the direction of slide we want.For a tile’s text to slide up on hover, we’ll apply a class
A couple tiles have a different hover effect, they rotate to reveal the back face of the tile. This effect is a very simple and basic “card flip” effect.For this flipping effect, apply a
rotate3d class to the tile you want to flip. For a card with a vertical flip we’ll add a class
rotate3dY, and for a horizontal flip we’ll apply a class
rotate3dX (in addition to the
A single tile contain an image along with an image caption.When the tile is hovered,the caption slides.
6. One more concept which is covered is responsiveness. I have also included the code for different sized media screen according to which dashboard(columns) takes its shape.The code snippet is shown below.
1. I have covered only important sections of my code,it is possible that somethings are left. So you can go through the source code available on github for more dtailed analysis.
3. All kind of suggestions are welcomed. You can also improve my code on github by adding more classes or even changing it.
[button type=”bd_button btn_large” url=”https://knowmywork.com/demos/metro_style_tiles.html” target=”on” button_color_fon=”#FF0000″ button_text_color=”#ffffff” ]View Demo[/button] [button type=”bd_button btn_large” url=”#” target=”on” button_color_fon=”#00ff00″ button_text_color=”#ffffff” ]Github Link[/button]