Create Microsoft Logo With Just Little CSS3 and HTML.

As we all know Microsoft has changed their logo and revealed a new logo. The logo was evolved since 1975, first changed in 1980, then 1982 and again in 1987. After a long 25 years the logo remained unchanged as it appeared in 1987. The logo contains a Symbol of four colored squares and Logotype. This represents the Microsoft’s more-focused consumer product line; Windows 8(the light blue), Office (the orangey-red), Xbox (the light green), Windows Phone and Surface Tablets (the dark yellow). Professional PDF designers suggest that this logo is created by using Adobe Illustrator CS5.

Before starting our code snippet take a look at the previous versions of Microsoft logos.

Live DEMO

Microsoft

<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>

Just Paste Above Code In Body