Microsoft’s New Logo Recreated in CSS

Microsoft recently unveiled a new corporate logo where four colored squares represent Windows, Office, Xbox and Windows Phone family of products.

The PDF document suggests that designers used Adobe Illustrator CS5 to create the original logo but @mohamedmansour shows us how to recreate the same logo using few lines of HTML and CSS3.

If the live demo doesn’t look right in your screen, the Segoe font is probably missing on your computer though some have suggested replacing Segoe with Open Sans, a Google Font.

Here’s the full code courtesy Mansour.

Microsoft

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

Microsoft’s New Logo Recreated in CSS