About design and nearby

Windows 8 Metro Inspired Tiles with Javascript and CSS3

Posted: February 27th, 2013 | Author: | Filed under: Creative Process, Tips and Tricks | Tags: , , , , | 1 Comment »

After Windows 8 release there is nobody all over the world who is indifferent to the platform interface and functionality. Some people like it, some ones count advantages and disadvantages. And I decide to play a little with the tiles-based interface and produce a sweet design.

You can place any content you need into tiles, actually, tiles represent your app or sub modules.
With css3 and a touch of javascript I produced (I hope) simple, sufficient and responsive solution ))

Windows 8 Metro Inspired Tiles

Styling look & feel:
To stylish tiles I use ‘background-image’ property to create a nice gradient effect, draw borders and box shadow:

  1. .blue {
  2.   background-color: #009fb2;
  3.   background-image: -o-linear-gradient(left , #00839a 0%, #00a1b3 100%);
  4.   background-image: -moz-linear-gradient(left , #00839a 0%, #00a1b3 100%);
  5.   background-image: -webkit-linear-gradient(left , #00839a 0%, #00a1b3 100%);
  6.   background-image: -ms-linear-gradient(left , #00839a 0%, #00a1b3 100%);
  7.   background-image: linear-gradient(left , #00839a 0%, #00a1b3 100%);
  8.  
  9.   background-image: -webkit-gradient(
  10.                linear,
  11.                 left top,
  12.                 right top,
  13.                 color-stop(0, #00839a),
  14.                 color-stop(1, #00a1b3)
  15.             );
  16.   border-right: 1px solid #11a8b9;
  17.   border-left: 1px solid #118a9f;
  18.   border-top: 1px solid #099cb0;
  19.   border-bottom: 1px solid #099cb0;
  20.   -webkit-box-shadow: 1px 0 1px #065363;
  21.   -moz-box-shadow: 1px 0 1px #065363;
  22.   -ms-box-shadow: 1px 0 1px #065363;
  23.   -o-box-shadow: 1px 0 1px #065363;
  24.   box-shadow: 1px 0 1px #065363;
  25.   }

Some javascript to add interaction:
Also I decide to apply a hover effect, the idea is to show hidden content by mouse hover over (I use jQuery .animate() method to make it sleek):

  1. $(document).ready(function () {    
  2.  
  3.           function TileAnimate() {
  4.  
  5.               $(".tile-content").hover(function (event) {
  6.                   event.stopPropagation();
  7.  
  8.                   if (!$(this).hasClass('.tile-content .content.one')) {
  9.                       $(this).dequeue().stop().animate({ top: "-145px" });
  10.                   }
  11.               }, function () {
  12.                   $(this).addClass('animated').animate({ top: "0" }, "normal", "linear", function () {
  13.                       $(this).removeClass('animated').dequeue();
  14.                   });
  15.               });
  16.           }
  17.           TileAnimate();          
  18.  
  19.       });

Responsivity:
The concept is to build the page with 3 vertical columns .col1,.col2,.col3 (every column contains tiles). I set the ‘float:left;’ prorerty for every column.
These three columns will change their width according to the browser window size, I assign different stylesheets through media queries:

  1. @media screen and (min-width: 43.75em){
  2.   .col1,.col2,.col3{
  3.     float:left;
  4.     margin-right:0.4%;
  5.     margin-left:0.4%;
  6.     width:49%;    
  7.   }
  8. }
  9. @media screen and (min-width: 64em){
  10.   .col1,.col2,.col3{
  11.     float:left;
  12.     margin-right:0.4%;
  13.     margin-left:0.4%;
  14.     width:32%;
  15.   }

Live example: view the example >>

Feel free to customize the page! You can download the package here.

Related post: Animated Metro Inspired Welcome Page with Javascript and CSS3

Share Button

Check Related Posts:

One Comment on “Windows 8 Metro Inspired Tiles with Javascript and CSS3”

  1. 1 Thomas said at 3:44 pm on October 14th, 2015:
    Reply  |  Quote

    Easy to use, perfect set of colours, everything I needed.


Leave a Reply


  • − 7 = one

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now