The New Microsoft Logo Done Using ONLY CSS

That’s pretty hard-core UI , the new Microsoft logo done entirely with CSS. No images, no convoluted HTML…just plain CSS.

logo {
    font: 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;     
}

If you create an html page with:

<logo>Microsoft</logo>

you will see this.

You can play around here for more results: http://jsfiddle.net/ 

Note that the logo increases/shrinks according to the length of the text

( yeah, I know…doesn't look good on Apple )

Go ahead and have fun!

By Edge Pereira