Create Microsoft's New Logo in CSS

Create Microsoft's New Logo in CSS
Microsoft has updated their logo after long 25 years. It has four colored squares which represent Windows, Office, Xbox and Windows Phone family of products. The professional PDf designers suggest that this logo is created by using Adobe Illustrator CS5, but Mohamed Mansour, professional software engineer in Microsoft explains us  how to recreate the same logo using both HTML and CSS3.

Before starting our code snippet we can take a look into the difference between both old Microsoft's logo and updated logo. See the below image to realize the difference which Microsoft bought back after long 25 years.


Microsoft updated logo



Now lets learn how to create this same logo using
HTML and CSS. You can see the live demo below. If you wanna know whether its real or not, just try to copy the Microsoft text from below.


Microsoft


Here is the both HTML and CSS Code created by Mohamed Mansour.

<logo>Microsoft</logo>

<style>
logo {
    font: bold 60px "Segoe UI";
    color: #747273;
    line-height: 1.5em;
    padding-left: 1.7em;
}

logo:before {
    content: '\2006';
    position: absolute;
    height: 0.095em;
    left: 0;
    box-shadow: 0.35em 0.35em 0 0.25em #f8510c, 
                1.05em 0.35em 0 0.25em #7eba00, 
                0.35em 0.97em 0 0.25em #00a3f4, 
                1.05em 0.97em 0 0.25em #ffba00;     
}
</style>


Now whats up? As I mentioned before designers used Adobe Illustrator CS5 to create the original logo. But I hope this post shows the real power of both HTML and CSS. So share your opinion about new Microsoft logo and this CSS trick via comment.