@mohamedmansour nos avisa de que Microsoft recientemente ha creado un nuevo logo corporativo de Windows, que parece haber sido realizado con Adobe PDF Illustrator CS5. El logotipo en principio está realizado en PDF, pero nosotros podemos adaptarlo para CSS, de una manera fácil y rápida, como os mostraré a continuación.

 

Código HTML

 

 <logo>Microsoft</logo>

Código CSS

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

Hay que tener en cuenta que si no tenemos la fuente Segoe instalada en nuestro ordenador, no se verá exactamente como en el ejemplo del artículo, por lo que tendremos que sustituirla en el archivo CSS por “Open Sans”, una fuente de Google que se le parece mucho.

Ver ejemplo de su funcionamiento