Windows 8 Logo in CSS

Windows 8 Logo Recreated in CSS

Microsoft recently unveiled a new logo for Windows 8 that does away with the colorful flag, first introduced with Windows XP in 2001, and instead uses flat, tile-like shapes done in one solid blue color.

The exact typeface that was used to design the logo is unknown though a quick search did reveal that Windows 8 font is very similar to Freight Sans and the Segoe family of sans-serif fonts.

Web developer Vasiliy Zubach has created a CSS version of the Windows 8 logo that uses no images and is written in pure CSS and HTML. Vasiliy also using CSS3 animations to add some motion to the Windows tiles and the whole thing looks exactly like the real logo.

See Demo

.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);
    }
}
​