Create Windows 8 Logo Only with CSS and HTML

As you might know, Microsoft has confirmed a major update in Windows Logo. The company is doing away with the four-color flag that has been part of Windows Logo since the launch of Windows XP in 2001.

The new logo of Windows include four tiles created with one solid color. The official color would be light-blue but the color could change depending upon user’s personalization choices. The tiles have been given a bit of perspective and are placed to the left side of the text “Windows 8”

Newly styled Windows Logo

As the Windows logo has become simpler and web designers have got more power through CSS3 –so, an enthusiast named Vasiliy Zubach has created the Windows 8 logo using only HTML and CSS! Please note that the code shall work properly only in browsers fully supporting CSS3… and not surprisingly, Internet Explorer is not one of them. But it should work in other browsers without any problem (provided you have the latest version of them)

Here is the code that does the trick:

HTML Code

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

CSS for Designing of Windows Logo

    .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 5s 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;
    }

CSS for Animation

    @-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);
    }
    }

To view the demo of how this CSS Windows logo looks, you can visit the Visiliy’s website. It’s a pretty neat implementation of logo. Although, simplification of logo has helped the CSS implementation but CSS3 and HTML5 are very much capable of creating magic.

Please do post your comments on this. Thank you for using TechWelkin.