Create Microsoft Logo With Just Little CSS3 and HTML.

By Pravin Purohit   Posted at  03:54   css 1 comment


As we all know Microsoft has changed their logo and revealed a new logo. The logo was evolved since 1975, first changed in 1980, then 1982 and again in 1987. After a long 25 years the logo remained unchanged as it appeared in 1987. The logo contains a Symbol of four colored squares and Logotype. This represents the Microsoft’s more-focused consumer product line; Windows 8(the light blue), Office (the orangey-red), Xbox (the light green), Windows Phone and Surface Tablets (the dark yellow). Professional PDF designers suggest that this logo is created by using Adobe Illustrator CS5.


Before starting our code snippet take a look at the previous versions of Microsoft logos.

Live DEMO

Microsoft


<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: 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>



Just Paste Above Code In Body

About the Author

Pravin Purohit is authour at hackmadeeasy. he is a web developer . he loves to develope new things . he is master at creating android apps and is a famouse internet marketer too. his new blog its http://TechTreat.in .
View all posts by: Pravin Purohit

1 comment:

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

Back to top ↑
Connect with Us

    Follow our updates

    Total Pageviews

Contact us

Name

Email *

Message *

Like us

Recent Comments

© 2011-2013 Hack Made Easy. All rights reserved.