How To Design an Awesome Windows 8 Logo With CSS3 and HTML

Image may be NSFW.
Clik here to view.Microsoft recently unveiled its new logo redesign of Windows 8 with a cool solid blue tiles. This new redesigned logo doesn’t have the old color flags in them. They have used a single color to design both the fonts and the tiles. The previous logos of Windows had the color flag which was part of Windows since the launch of Windows XP in 2001.

A web enthusiast named Vasiliy Zubach has designed the this nice logo using only CSS3 and HTML. The design not just the static logo of Windows 8, but it has an animated titles.
The creative designer says that he has done the design in 5 min.

Did you see the demo on the designer’s page? Was it cool?

Lets see the magical code behind this design:

HTML Markup:

<div class="windows_8_logo_container">
 <div class="window"></div>
 <div class="logo_text">Windows 8</div>
 </div>

CSS:

<style>
.windows_8_logo_container { 
padding: 100px 0; 
background: #fff; height: 150px; 
-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px; 
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px; 
box-shadow: rgba(0,0,0,0.3) 0 1px 2px; 
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
}
.window { 
position: relative; float: left; 
margin-left: 50px; 
width: 200px; 
height: 150px; 
background: #00adef; 
-webkit-transform: perspective(400px) rotateY(-25deg); 
-moz-transform: perspective(400px) rotateY(-25deg); 
-ms-transform: perspective(400px) rotateY(-25deg); 
-o-transform: perspective(400px) rotateY(-25deg); 
transform: perspective(400px) rotateY(-25deg); 
-webkit-animation: windows_animation 3s infinite; 
-moz-animation: windows_animation 5s infinite; 
-ms-animation: windows_animation 5s infinite; 
} 
.window::after, .window::before { 
content: ''; background: #fff; 
height: 100%; 
width: 10px; left: 50%; margin-left:-5px; top:0; position: absolute;
} 
.window::before { 
left: 0; top: 50%; 
margin-top: -5px; margin-left: 0; height: 10px; 
width: 100%; 
position: absolute; 
}
.logo_text { 
color: #00adef;
line-height: 150px; 
font-size: 130px; 
padding-left: 20px; float: left;
} 
@-webkit-keyframes windows_animation { 
0%, 100% { 
-webkit-transform: perspective(400px) rotateY(-25deg); 
} 50% { 
-webkit-transform: perspective(400px) rotateY(-35deg); 
} 
} 
@-moz-keyframes windows_animation { 
0%, 100% { 
-moz-transform: perspective(400px) rotateY(-25deg); 
} 50% { 
-moz-transform: perspective(400px) rotateY(-35deg); 
} 
} 
@-ms-keyframes windows_animation { 
0%, 100% { 
-ms-transform: perspective(400px) rotateY(-25deg); 
} 50% { 
-ms-transform: perspective(400px) rotateY(-35deg); 
} 
} 
</style>

DEMO on my own Page. Have a look Image may be NSFW.
Clik here to view.

Best viewed on latest versions of Chrome, Safari, Firefox. 
Doesn’t work on IE.

Thanks for looking at this article. See you guys later with some more interesting articles.
Thanks again for reading. Have a great day.

~iTechColumn

Image may be NSFW.
Clik here to view.