Tutorial Cara Buat Logo Windows 8

Cara Buat Logo Windows 8 - Ini buat Anda yang ingin Mencoba coba buat Logo pada windows 8, kali ini Ali Bloggers akan bagikan Tutorial Cara Buat Logo Windows 8 dan silahkan disimak dibawah ini (kalau ngerti Juga :D)Võib Nagu te teate, Microsoft on kinnitanud suur uuendus Windows Logo. Ettevõte on kaotades 4-värvi lipu See on osa Windows logo käivitamisest alates Windows XP 2001.

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

Windows 8

CSS for Design

.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?