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:


you will see

You can play around here for more results: 


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



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

Go ahead and have fun!


1 comment:

  1. Jonas - FortalezaSeptember 12, 2012

    Caramba!!! Muito massa. nao sabia q dava pra fazer tudo isso usando so HTML.