Buat Windows 8 Logo hanya dengan CSS dan HTML

Buat baru Windows 8 logo hanya menggunakan CSS dan HTML. Hal ini dimungkinkan oleh kemampuan CSS3.

A+ A-

Seperti yang anda ketahui, Microsoft telah mengkonfirmasi update besar pada Windows Logo. Perusahaan ini melakukan jauh dengan bendera empat warna yang telah menjadi bagian dari Logo Windows sejak peluncuran Windows XP pada tahun 2001.

Logo baru Windows termasuk empat ubin dibuat dengan satu warna solid. Warna resmi akan cahaya biru tapi warnanya bisa berubah tergantung pada pilihan personalisasi pengguna. Ubin telah diberi sedikit perspektif dan ditempatkan ke sisi kiri teks "Windows 8"

Baru ditata Logo Windows

Sebagai logo Windows telah menjadi lebih sederhana dan web designer sudah mendapat lebih banyak kekuatan melalui CSS3 -jadi, seorang penggemar bernama Vasiliy Zubach telah menciptakan Windows 8 logo hanya menggunakan HTML dan CSS! Perlu diketahui bahwa kode harus bekerja dengan baik hanya dalam browser sepenuhnya mendukung CSS3 ... dan tidak mengherankan, Internet Explorer tidak salah satu dari mereka. Tetapi harus bekerja di browser lain tanpa masalah (asalkan Anda memiliki versi terbaru dari mereka)

Berikut adalah kode yang melakukan trik:

Kode HTML

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

CSS untuk Merancang Windows Logo

    .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 untuk Animasi

    @-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);
    }
    }

Untuk melihat demo tentang bagaimana logo CSS ini Windows terlihat, Anda dapat mengunjungi website Visiliy ini. Ini adalah implementasi cukup rapi dari logo. Meskipun, penyederhanaan logo telah membantu pelaksanaan CSS tapi CSS3 dan HTML5 sangat banyak mampu menciptakan sihir .

Jangan mengirim komentar Anda tentang hal ini. Terima kasih telah menggunakan TechWelkin.