Tworzenie logo Windows 8 tylko z CSS i HTML

Tworzenie nowego logo Windows 8 używając tylko CSS i HTML. Jest to możliwe dzięki możliwości CSS3.

A+ A-

Jak pewnie wiecie, Microsoft potwierdziła istotną aktualizację w logo Windows. Firma rezygnacji z flagą czterech kolorów, która była częścią logo Windows od czasu uruchomienia systemu Windows XP w 2001 roku.

Nowe logo Windows należą cztery płytki utworzone z jednym kolorem. Oficjalna kolor byłby jasnoniebieskie ale kolor może ulec zmianie w zależności od opcji personalizacji użytkownika. Płytki zostały podane trochę perspektywy i są umieszczone po lewej stronie tekstu "systemu Windows 8"

Nowo urządzone logo Windows

Jako logo Windows stała się prostsza i projektantów stron internetowych posiadają większą moc poprzez CSS3 -Więc entuzjastą imieniem Wasilij Zubach stworzył logo Windows 8 używając tylko HTML i CSS! Należy pamiętać, że kod powinien działać poprawnie tylko w przeglądarkach pełni wspierających CSS3 ... i nic dziwnego, Internet Explorer nie jest jednym z nich. Ale to powinno działać w innych przeglądarkach bez problemu (pod warunkiem, że masz najnowszą wersję nich)

Oto kod, który załatwia sprawę:

kod HTML

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

CSS Projektowanie logo Windows

    .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 dla animacji

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

Aby zobaczyć demo, jak wygląda to logo CSS systemu Windows, można znaleźć na stronie internetowej Visiliy użytkownika. To całkiem miłe realizacja logo. Mimo, uproszczenie logo pomogło wdrożenie CSS ale CSS3 i HTML5 są bardzo zdolne do tworzenia magii .

Proszę nie pisać swoje uwagi na ten temat. Dziekujemy za korzystanie TechWelkin.