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.
But in this post shows the real power of both HTML and CSS3. Mohamed Mansour shows us how to recreate the same logo
using few lines of HTML and CSS3.
You can see a live demo right from here.
Here is the code below :
<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>
{ 0 comments... read them below or add one }
Post a Comment