Crearea Windows 8 Logo-ul numai cu CSS si HTML

Creați noul Windows 8 logo-ul folosind doar CSS si HTML. Acest lucru este posibil prin capacitățile CSS3.

A+ A-

După cum probabil știți, Microsoft a confirmat o actualizare majoră în Windows Logo. Compania este de a face departe cu steagul patru culori, care a fost o parte a Windows Logo de la lansarea Windows XP în 2001.

Noul logo - ul de Windows includ patru piese create cu o culoare solidă. Culoarea oficială ar fi de culoare albastru deschis, dar culoarea se poate schimba în funcție de opțiunile de personalizare utilizatorului. Placile au fost dat un pic de perspectivă și sunt plasate pe partea stângă a textului „Windows 8“

Restilizate logo-ul Windows

Deoarece logo - ul Windows a devenit mai simplu și designeri web au primit mai multă putere prin -SO CSS3, un entuziast numit Vasiliy Zubach a creat logo - ul Windows 8 folosind doar HTML si CSS! Vă rugăm să rețineți că codul trebuie să funcționeze corect numai în browsere care sprijină pe deplin CSS3 ... si nu este surprinzator, Internet Explorer nu este unul dintre ele. Dar ar trebui să funcționeze în alte browsere fără nici o problemă (cu condiția să aveți cea mai recentă versiune a acestora)

Aici este codul pe care nu truc:

Codul HTML

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

CSS pentru Proiectare 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 pentru Animație

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

Pentru a vizualiza demo a modului în care acest logo-ul CSS Windows caută, puteți vizita site-ul Visiliy lui. Este o implementare destul de elegant de logo-ul. Deși, simplificarea logo - ul a ajutat la punerea în aplicare CSS , dar CSS3 si HTML5 sunt foarte capabile de a crea magie .

Vă rugăm să nu posta comentarii pe aceasta. Vă mulțumim pentru utilizarea TechWelkin.

Ads

Acțiune