Creare logo Windows 8 solo con i CSS e HTML

Creare il nuovo logo di Windows 8 usando solo CSS e HTML. Ciò è reso possibile dalla capacità CSS3.

A+ A-

Come si può sapere, Microsoft ha confermato un importante aggiornamento in Windows Logo. La società sta facendo via con la bandiera a quattro colori che ha fatto parte del logo di Windows dal lancio di Windows XP nel 2001.

Il nuovo logo di Windows includono quattro tessere create con un colore solido. Il colore ufficiale sarebbe azzurro ma il colore potrebbe cambiare a seconda delle scelte di personalizzazione dell'utente. Le mattonelle sono state date un po 'di prospettiva e sono collocati sul lato sinistro del testo "Windows 8"

Di recente in stile Windows Logo

Come il logo di Windows è diventato più semplice e web designer hanno ottenuto più potere attraverso CSS3 -così, un appassionato di nome Vasiliy Zubach ha creato il logo di Windows 8 utilizzando solo HTML e CSS! Si prega di notare che il codice deve funzionare correttamente solo nei browser che supportano pienamente CSS3 ... e non a caso, Internet Explorer non è uno di loro. Ma dovrebbe funzionare in altri browser senza alcun problema (a patto di avere l'ultima versione di essi)

Ecco il codice che fa il trucco:

Codice HTML

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

CSS per la progettazione del logo di 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 per Animazione

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

Per visualizzare la demo di come questo logo CSS Windows cerca, si può visitare il sito web del Visiliy. Si tratta di una realizzazione abbastanza pulito del logo. Anche se, la semplificazione delle logo ha aiutato l'attuazione CSS ma HTML5 e CSS3 sono molto in grado di creare la magia .

Si prega di inviare i vostri commenti su questo. Grazie per aver usato TechWelkin.