How to Create the Microsoft Logo using CSS

In this article, I"ll show you a simple way of creating the Microsoft Logo above using only pure CSS. You won't use Photoshop or Corel Draw just CSS. Isn't that amazing?
Copy the following code into your text editor and save it as logo.html
Open up the new document in your web browser and presto, you're good to go.

 <logo>Microsoft</logo>

<style>
logo {
    font: bold 60px "Segoe UI";
    color: #747273;
    line-height: 1.5em;
    padding-left: 1.7em;
}

logo:before {
    content: '\2006';
    position: absolute;
    height: 00.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>

Posted By Unknown2:01:00 pm

2

Continue Reading