Membuat Logo Windows 8 Dengan CSS

SOMAZINGBLOG.COM - Membuat logo murni menggunakan CSS bukanlah hal yang mustahil.Sudah banyak contohnya, misal header logo DHF, dan kali ini kita juga akan menggunakan animasi keyframe.

CSS

.windows_8_logo_container {
padding: 50px 0;
background: #fff;
height: 150px;
}
.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);
-o-transform: perspective(400px) rotateY(-25deg);
-ms-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
-webkit-animation: windows_animation 5s infinite;
-moz-animation: windows_animation 5s infinite;
-ms-animation: windows_animation 5s infinite;
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;
font: 120px/150px 'Arial';
padding-left: 20px;
float: left;
}
@keyframes "windows_animation" {
0%,100% {
-webkit-transform: perspective(400px) rotateY(-25deg);
-moz-transform: perspective(400px) rotateY(-25deg);
-o-transform: perspective(400px) rotateY(-25deg);
-ms-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
    -webkit-transform: perspective(400px) rotateY(-35deg);
    -moz-transform: perspective(400px) rotateY(-35deg);
    -o-transform: perspective(400px) rotateY(-35deg);
    -ms-transform: perspective(400px) rotateY(-35deg);
    transform: perspective(400px) rotateY(-35deg);
 }
}
@-moz-keyframes windows_animation {
0%,100% {
-moz-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
   -moz-transform: perspective(400px) rotateY(-35deg);
   transform: perspective(400px) rotateY(-35deg);
 }
}
@-webkit-keyframes "windows_animation" {
0%,100% {
-webkit-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
   -webkit-transform: perspective(400px) rotateY(-35deg);
   transform: perspective(400px) rotateY(-35deg);
 }
}
@-ms-keyframes "windows_animation" {
0%,100% {
-ms-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
   -ms-transform: perspective(400px) rotateY(-35deg);
   transform: perspective(400px) rotateY(-35deg);
 }
}
-webkit-animation {
-webkit-transform: perspective(400px) rotateY(-25deg);
-moz-animation  {
-webkit-transform: perspective(400px) rotateY(-25deg);
-ms-animation  {
-webkit-transform: perspective(400px) rotateY(-25deg);
animation  {
transform: perspective(400px) rotateY(-25deg);
-moz-transform: perspective(400px) rotateY(-25deg);
-o-transform: perspective(400px) rotateY(-25deg);
-ms-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
    -webkit-transform: perspective(400px) rotateY(-35deg);
    -moz-transform: perspective(400px) rotateY(-35deg);
    -o-transform: perspective(400px) rotateY(-35deg);
    -ms-transform: perspective(400px) rotateY(-35deg);
    transform: perspective(400px) rotateY(-35deg);
 }

HTML

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

Windows 8

Tweet