Créer Windows 8 Logo uniquement avec CSS et HTML

Créer le nouveau Windows 8 logo en utilisant uniquement CSS et HTML. Ceci est rendu possible par les capacités CSS3.

A+ A-

Comme vous le savez peut-être, Microsoft a confirmé une mise à jour majeure de Windows Logo. La société est en train de faire disparaître le drapeau à quatre couleurs qui a fait partie de Windows Logo depuis le lancement de Windows XP en 2001.

Le nouveau logo de Windows comprend quatre tuiles créées avec une couleur unie. La couleur officielle serait bleu clair mais la couleur peut changer selon les choix de personnalisation de l'utilisateur. Les tuiles ont été données un peu de perspective et sont placés sur le côté gauche du texte "Windows 8"

Nouvellement style Windows Logo

Comme le logo Windows est devenu plus simple et concepteurs de sites Web ont obtenu plus de puissance grâce à CSS3 -SO, un passionné nommé Vasiliy Zubach a créé le logo Windows 8 en utilisant seulement HTML et CSS! S'il vous plaît noter que le code doit fonctionner correctement que dans les navigateurs supportant entièrement CSS3 ... et sans surprise, Internet Explorer est pas un d'entre eux. Mais il devrait fonctionner dans d'autres navigateurs sans aucun problème (à condition d'avoir la dernière version d'entre eux)

Voici le code qui fait le tour:

code HTML

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

CSS pour la conception de 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 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);
    }
    }

Pour voir la démonstration de la façon dont ce logo CSS Windows recherche, vous pouvez visiter le site Web du Visiliy. Il est une application très soignée de logo. Bien que, la simplification du logo a contribué à la mise en œuvre de CSS , mais CSS3 et HTML5 sont très bien capables de créer la magie .

S'il vous plaît ne pas poster vos commentaires à ce sujet. Merci d'utiliser TechWelkin.

Ads

Partager