Recreated Microsoft and Windows 8 Logo in CSS

Microsoft's Windows 8 and Microsoft's own logo are recreated with the help of CSS and HTML. Microsoft's logo is in very old design. But, Windows 8 logo is new and unique. View the CSS and HTML code here.

In past time, Microsoft uses four colors in the logo of Windows. But, in Windows 8 flat metro tiles are in solid blue color. Show these logos to your friends and impress them.

These logos are not created by any kind of software. These logos not contain any kind of picture. These are created by Vasiliy Zubach in pure CSS and HTML.

Microsoft's Logo :

In Microsoft's logo, four colors i.e.red, green, blue and yellow are in four boxes. Microsoft is written in 'Segoe UI' font. See this logo in the image below.

Copy and paste the CSS and HTML code anywhere in your blogger blog, website or WordPress :

Copy below CSS and HTML code of Microsoft's Logo.

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

logo:before {
    content: '';
    position: absolute;
    height: 0.100em;
    left: 10;
    box-shadow: 0.35em 0.35em 0 .35em #f8510c, 
                1.09em 0.35em 0 0.35em #7eba00, 
                0.35em 1.19em 0 0.35em #00a3f4, 
                1.09em 1.19em 0 0.35em #ffba00;     
}
</style>
<logo>Microsoft</logo>

Windows 8 Logo :

In Microsoft's Windows 8 logo, flat metro tiles are used in solid blue color. There are four boxes filled with solid blue color. Windows 8 is written in 'Arial' font. See the image below of this logo.

To put this logo in your website or blog, copy and paste the below CSS and HTML code :

Copy below CSS and HTML code of Windows 8 Logo.

<style type="text/css">

.window {
 position: relative;
 float: left;
 width: 145px;
 height: 95px;
 background: #00adef;
 -webkit-transform: perspective(400px) rotateY(-25deg);
 -moz-transform: perspective(400px) rotateY(-25deg);
 -ms-transform: perspective(400px) rotateY(-25deg);
 -o-transform: perspective(400px) rotateY(-25deg);
 transform: perspective(400px) rotateY(-25deg);
 -webkit-animation: windows_animation 3s infinite;
 -moz-animation: windows_animation 5s infinite;
 -ms-animation: windows_animation 5s infinite;
}
.window::after, .window::before {
 content: '';
 background: #fff;
 height: 100%;
 width: 9px;
 left: 50%;
 margin-left:-5px;
 top:0;
 position: absolute;
}
.window::before {
 left: 0;
 top: 50%;
 margin-top: -5px;
 margin-left: 0;
 height: 8px;
 width: 100%;
 position: absolute;
}
.logo_text {
 color: #00adef;
 font-size: 80px;
 padding-left: 20px;
 float: left;
        font-family:arial;
}
</style>



<div class="window">
</div>
<div class="logo_text">
Windows 8</div>

If you have any kind of problem about these logos and article, please tell us by using comments. Don't forget to share it with your friends.

KB Tricks

Recreated Microsoft and Windows 8 Logo in CSS

Labels