Metro Style CSS

Would you like metro style?

Left style

Right style

On my view, metro style is very simple but beautiful that’s enough. Why don’t you try it on your website or anywhere you want?

Let’s bring metro style to your website😀

Firstly, we need some HTML codes

<div class="metro">
 <ul class="left">
 <li class="color0">Content 1</li>
 <li class="color1">Content 2</li>
 <li class="color2">Content 3</li>
 </ul>
 <ul class="right">
 <li class="color2">Content 4</li>
 <li class="color1">Content 5</li>
 <li class="color0">Content 6</li>
 </ul>
</div>

Note

The cell that spans two rows must be in color0 class

Next, we need CSS to decorate HTML codes to become metro style.

.metro {
	color:#fff;
	position:absolute;
	left:50%;
	top:0px;
	margin-left:-500px;
	width:1000px;
 }
.metro .color0 {
	background:#0072bc;
	width:400px;
	height:450px;
 }
.metro .color1 {
	background:#cd4900;
	width:400px;
	height:200px;
}
.metro .color2 {
	background:#008641;
	width:400px;
	height:200px;
}
.metro ul {
	list-style:none;
}
.metro li {
	padding:20px;
	overflow:auto;
}
.metro li:hover {
	opacity:0.8;
}
.metro .left .color0 {
	float:left;
}
.metro .left .color1 {
	margin-left:450px; /*400px (width) + 2*20px (padding) + 10px (spacing)*/
}
.metro .left .color2 {
	margin-left:450px;
	margin-top:10px; /*spacing*/
}
.metro .right .color1, .metro .right .color2 {
	float:left;
}
.metro .right .color1 {
	margin-left:-440px; /*400px (width) + 2*20px (padding)*/
	margin-top:250px; /*200px (height) + 2*20px (padding) + 10px (spacing)*/
}
.metro .right .color0 {
	margin-left:450px;
}

Is there anything to do?

No, that’s all. Have fun with it😀

Tags: , , , , ,

About ninjapro

It is better to feel by yourself about me

6 responses to “Metro Style CSS”

  1. overlord290131 says :

    You should create a demo page😀. I’m too lazy to type all your code. I only need demonstration

  2. dolphin information says :

    This is really fascinating, You’re a very professional blogger. I’ve joined your feed and sit up for looking for extra of your magnificent post. Additionally, I’ve shared your web site in my social networks

  3. hiteshgoldeneyeHitesh says :

    Very nice post, very simple way to learn how to create metro UI. Thank you so much!!

  4. Johne455 says :

    Hey very nice site!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds alsoI am happy to find a lot of useful info here in the post, we need work out more techniques in this regard, thanks for sharing. . . . . . ddbagfeeddac

  5. Johnd506 says :

    Valuable information. Lucky me I found your site by accident, and I am shocked why this accident did not happened earlier! I bookmarked it. fkkfbecdcgda

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: