Windows 8 is a part of Microsoft Windows family. As
we all know that Microsoft has revealed the new Windows 8 logo. I would say
this is the first major redesign in 22 years. And since most of us
use Windows
every day, that’s a fairly big deal.
Microsoft hired high-powered design consultancy Pentagram. The Windows
8 logo was designed by designer, Paula Scher at Pentagram.
(Credit: Microsoft)
OK that was an another
story. Now move on to this tutorial, here we will see the power of CSS with how
to recreate the Windows 8 logo.
Also See: Recreate Microsoft New Logo
Below is a code snippet
to recreate Windows 8 logo using CSS:
<style type="text/css">
.windows_8_logo_container {
padding: 100px 0;
background: #fff;
height: 150px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.window {
position: relative;
float: left;
margin-left: 50px;
width: 200px;
height: 150px;
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: 10px;
left: 50%;
margin-left:-5px;
top:0;
position: absolute;
}
.window::before {
left: 0;
top: 50%;
margin-top: -5px;
margin-left: 0;
height: 10px;
width: 100%;
position: absolute;
}
.logo_text {
color: #00adef;
line-height: 150px;
font-size: 130px;
padding-left: 20px;
float: left;
}
</style>
<div class="windows_8_logo_container">
<div class="window"></div>
<div class="logo_text">Windows 8</div>
</div>
{ 1 comments... read them below or add one }
good one :)
Post a Comment