Windows 8 Metro Inspired Tiles with Javascript and CSS3
Posted: February 27th, 2013 | Author: Julia | Filed under: Creative Process, Tips and Tricks | Tags: css, javascript, tile, windows 8, windows 8 UI | 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 ))
Styling look & feel:
To stylish tiles I use ‘background-image’ property to create a nice gradient effect, draw borders and box shadow:
-
.blue {
-
background-color: #009fb2;
-
background-image: -o-linear-gradient(left , #00839a 0%, #00a1b3 100%);
-
background-image: -moz-linear-gradient(left , #00839a 0%, #00a1b3 100%);
-
background-image: -webkit-linear-gradient(left , #00839a 0%, #00a1b3 100%);
-
background-image: -ms-linear-gradient(left , #00839a 0%, #00a1b3 100%);
-
background-image: linear-gradient(left , #00839a 0%, #00a1b3 100%);
-
-
background-image: -webkit-gradient(
-
linear,
-
left top,
-
right top,
-
color-stop(0, #00839a),
-
color-stop(1, #00a1b3)
-
);
-
border-right: 1px solid #11a8b9;
-
border-left: 1px solid #118a9f;
-
border-top: 1px solid #099cb0;
-
border-bottom: 1px solid #099cb0;
-
-webkit-box-shadow: 1px 0 1px #065363;
-
-moz-box-shadow: 1px 0 1px #065363;
-
-ms-box-shadow: 1px 0 1px #065363;
-
-o-box-shadow: 1px 0 1px #065363;
-
box-shadow: 1px 0 1px #065363;
-
}
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):
-
$(document).ready(function () {
-
-
function TileAnimate() {
-
-
$(".tile-content").hover(function (event) {
-
event.stopPropagation();
-
-
if (!$(this).hasClass('.tile-content .content.one')) {
-
$(this).dequeue().stop().animate({ top: "-145px" });
-
}
-
}, function () {
-
$(this).addClass('animated').animate({ top: "0" }, "normal", "linear", function () {
-
$(this).removeClass('animated').dequeue();
-
});
-
});
-
}
-
TileAnimate();
-
-
});
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:
-
@media screen and (min-width: 43.75em){
-
.col1,.col2,.col3{
-
float:left;
-
margin-right:0.4%;
-
margin-left:0.4%;
-
width:49%;
-
}
-
}
-
@media screen and (min-width: 64em){
-
.col1,.col2,.col3{
-
float:left;
-
margin-right:0.4%;
-
margin-left:0.4%;
-
width:32%;
-
}
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
Easy to use, perfect set of colours, everything I needed.