단지 CSS와 HTML과 윈도우 8 로고 만들기

단지 CSS와 HTML을 사용하여 새로운 Windows 8 로고를 만듭니다. 이것은 CSS3 능력에 의해 가능하게된다.

A+ A-

당신이 알고있을 때, Microsoft는 Windows 로고의 주요 업데이트를 확인했습니다. 이 회사는 2001 년에 윈도우 XP의 출시 이후 Windows 로고의 일부가 된 4 색 플래그를 멀리하고있다.

윈도우의 새로운 로고는 하나의 단색으로 만든 네 개의 타일을 포함한다. 공식 색상은 밝은 파란색 것입니다하지만 색상은 사용자의 개인 선택에 따라 변경 될 수 있습니다. 타일 ​​관점을 조금 부여 된 텍스트의 왼쪽에 배치된다 "윈도우 8"

새로 스타일 Windows 로고

Windows 로고가 간단하게하고 웹 디자이너는 CSS3의 - 그래서 통해 더 많은 전력을 가지고있다 바와 같이,라는 매니아 Vasiliy Zubach는 단지 HTML과 CSS를 사용하여 Windows 8 로고를 만들었습니다! 코드는 완전히 CSS3를 지원하는 브라우저에서 제대로 작동해야 있습니다 ... 그리고 당연한 Internet Explorer는 그들 중 하나가 아닙니다 바랍니다. 그러나 그것은 (당신이 그 (것)의 최신 버전 제공) 아무 문제없이 다른 브라우저에서 작동합니다

여기에 트릭을 수행하는 코드는 다음과 같습니다

HTML 코드

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

Windows 로고의 디자인을위한 CSS

    .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

충적세

당신이 리눅스 연인이 있다면 최고의 우분투 대안 찾아요

의 뭔가 익숙해 보겠습니다; 기본적이지만 조금 오프 트랙! 혹시 리눅스와 우분투 용어와 혼동있어 적이 있습...

Gmail의받은 편지함에 서명을 추가하는 방법 - Gmail에서 구글 서명 추가

Google의받은 편지함 구글은 지난 몇 년에 출시했던 최고의 물건 중 하나였다. 그것은 통합받은 편지함에...

주간 기술 뉴스 : 노키아, 구글, 닌텐도

안녕하십니까, 그것은 금요일, 3 월 3 일이고 단지 언제나처럼 우리는 다시 우리의 주간 뉴스 검거에있어....

초보자를위한 라즈베리 파이 프로젝트 - 당신은 라즈베리 파이로 수행 할 수있는

라즈베리 파이는 낮은 전력의 라즈베리 파이 재단이 만든 싱글 보드 컴퓨터 시리즈입니다. 원래는 개발 도상국...

안드로이드 2017 모범 VPN - 안드로이드에 VPN을 사용하는 방법

사라는 VPN을이 기술에 savvies 해커 만 있었다 일입니다! 그리고, 우리는이 서비스에 대해 강의 충...

코멘트