Recrear nuevo logo de Microsoft con CSS 3

Recientemente Microsoft ha renovado completamente su logotipo, que en parte comprende cuatro cuadrados que representan su paquete de productos insignia que comprende Windows, Office, Xbox y Windows Phone. Mediante CSS y HTML en pocas líneas de código podemos recrear este logotipo 🙂 veamos el código:

Código

<!-- dentro del body -->
<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>
<logo>Microsoft</logo>?

Si la fuente Segoe UI no está en su equipo, puede probar con Open Sans, una fuente de Google.

Vía Digital Inspiration