Erstellen von Windows 8 Logo nur mit CSS und HTML

Erstellen Sie das neue Windows 8-Logo nur CSS und HTML verwenden. Dies wird ermöglicht durch CSS3 Fähigkeiten.

A+ A-

Wie Sie vielleicht wissen, hat Microsoft ein großes Update in Windows-Logo bestätigt. Das Unternehmen ist dabei mit dem Vier-Farben-Flagge entfernt, die Teil des Windows-Logo seit dem Start von Windows XP im Jahr 2001 war.

Das neue Logo von Windows sind vier Fliesen mit einer Farbe erstellt. Die offizielle Farbe wäre hellblau, aber die Farbe ändern auf Benutzer-Personalisierung Entscheidungen je könnte. Die Fliesen wurden ein wenig Perspektive gegeben und sind auf der linken Seite des Textes platziert "Windows 8"

Neu gestalteten Windows-Logo

Da das Windows - Logo einfacher und Webdesigner mehr Leistung durch CSS3 -so bekommen haben geworden ist, ein Enthusiast namens Vasiliy Zubach hat die Windows 8 - Logo nur mit HTML und CSS erstellt! Bitte beachten Sie, dass der Code ist in allen Browsern unterstützen CSS3 vollständig richtig funktionieren nur, ... und nicht überraschend, Internet Explorer ist nicht einer von ihnen. Aber es sollte ohne Probleme auch in anderen Browsern (vorausgesetzt, Sie die neueste Version von ihnen haben)

Hier ist der Code, der Trick:

HTML - Code

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

CSS für die Gestaltung von 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 für 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);
    }
    }

Um die Demo, wie diese CSS Windows-Logo sieht anzuzeigen, können Sie die Visiliy Webseite besuchen. Es ist eine ziemlich saubere Umsetzung von Logo. Obwohl, eine Vereinfachung der Logo hat die CSS - Implementierung geholfen , aber CSS3 und HTML5 sind sehr viel in der Lage Magie zu schaffen .

Bitte posten Sie Ihre Kommentare zu diesem Thema. Vielen Dank für die Verwendung von TechWelkin.