Uus logo Windows sisaldab 4 plaadid loodud ühevärviline.Ametlik värv oleks sinine, kuid värvi muutus sõltuvalt Could kasutaja personaalse valikuid.Plaadid on antud perspektiivi ja on paigutatud vasakule küljele tekst "Windows 8"
Newly styled Windows Logo
Logo on muutunud lihtsamaks ja veebidisainerid on saanud rohkem võimu läbi CSS3-nii, entusiast nimega Vasiliy Zubach Windows 8 loonud logo kasutada ainult HTML ja CSS! Pange tähele, et kood töötab korralikult ainult täielikult toetada CSS3 brauserid ... Pole ime, et Internet Explorer ei ole üks neist. Aga see peaks töötama teiste brauseritega ilma igasuguste probleemideta (Kui teil on viimane versioon neist)
Siin on kood, mis trikk:
HTML Part
CSS for DesignWindows 8
.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 5s 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;
}
CSS for Animation@-webkit-keyframes windows_animation {
0%, 100% {
-webkit-transform: perspective(400px) rotateY(-25deg);
}
50% {
-webkit-transform: perspective(400px) rotateY(-35deg);
}
}
@-moz-keyframes windows_animation {
0%, 100% {
-moz-transform: perspective(400px) rotateY(-25deg);
}
50% {
-moz-transform: perspective(400px) rotateY(-35deg);
}
}
@-ms-keyframes windows_animation {
0%, 100% {
-ms-transform: perspective(400px) rotateY(-25deg);
}
50% {
-ms-transform: perspective(400px) rotateY(-35deg);
}
}
Kira Kira Paham dan Ngerti gak gan Cara Buat Logo Windows 8 nya?
