Создание логотипа Windows 8 только с помощью CSS и HTML

Создайте новый логотип Windows 8, используя только CSS и HTML. Это стало возможным благодаря возможности CSS3.

A+ A-

Как вы знаете, Microsoft подтвердила крупное обновление в ОС Windows Logo. Компания покончив с флагом с четырьмя цветами, которая была частью с логотипом Windows с момента запуска Windows XP в 2001 году.

Новый логотип Windows , включают в себя четыре плитки , созданных одним сплошным цветом. Официальный цвет будет светло-синий, но цвет может меняться в зависимости от выбора персонализации пользователя. Плитки были даны немного перспективы и помещены в левой части текста "Windows 8"

Новый стиль с логотипом Windows

По мере того как логотип для Windows стала проще и веб - дизайнеры получили больше власти через CSS3 -Так энтузиаст по имени Василий Зубач создал 8 логотип Windows , используя только HTML и CSS! Обратите внимание, что код должен работать правильно только в браузерах, поддерживающих CSS3 полностью ... и не удивительно, что Internet Explorer не является одним из них. Но он должен работать в других браузерах, без каких-либо проблем (при условии, что у вас последняя версия из них)

Вот код, который делает трюк:

HTML код

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

CSS для Проектирование с логотипом 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 для анимации

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

Чтобы просмотреть демонстрацию того, как этот логотип CSS для Windows выглядит, вы можете посетить веб-сайт Visiliy в. Это довольно аккуратный реализация логотипа. Несмотря на то , упрощение логотипа помогло внедрение CSS , но CSS3 и HTML5 очень способные создавать магию .

Пожалуйста, оставьте свои комментарии по этому поводу. Благодарим Вас за использование TechWelkin.

Ads

Поделиться

последний

Лучшие альтернативы Ubuntu искать, если вы Linux Lover

Давайте начнем знакомство с чем-то; простой, но немного не ...

Как добавить подпись в Gmail Входящие - Добавить подпись Google в Gmail

Входящие с помощью Google была одна из лучших вещей, которы...

Еженедельно Tech News: Nokia, Google и Nintendo

Привет всем, это Пятница, 3 марта, и так же, как всегда, мы...

Raspberry Pi Проекты для начинающих - Что вы можете сделать с Raspberry Pi

Raspberry Pi представляет собой серию малой мощности, одноп...

Лучший VPN для Android 2017 года - Как использовать VPN в Android

Прошли те дни, когда виртуальные частные сети были только д...

Комментарии