สร้างโลโก้ Windows 8 เท่านั้นที่มี CSS และ HTML

สร้างใหม่ Windows 8 โลโก้โดยใช้เพียง CSS และ HTML นี้จะทำไปโดยความสามารถในการ CSS3

A+ A-

ในขณะที่คุณอาจจะรู้ว่าไมโครซอฟท์ได้รับการยืนยันการปรับปรุงที่สำคัญใน Windows Logo บริษัท จะทำไปด้วยธงสี่สีที่ได้เป็นส่วนหนึ่งของโลโก้ของ Windows ตั้งแต่การเปิดตัวของ Windows XP ในปี 2001

โลโก้ใหม่ของ Windows รวมสี่กระเบื้องที่สร้างขึ้นด้วยสีทึบหนึ่ง สีอย่างเป็นทางการจะเป็นแสงสีฟ้า แต่สีอาจมีการเปลี่ยนแปลงขึ้นอยู่กับทางเลือกส่วนบุคคลของผู้ใช้ กระเบื้องได้รับบิตของมุมมองและจะอยู่ไปทางด้านซ้ายของข้อความ "Windows 8"

สไตล์ใหม่โลโก้ของ Windows

ในฐานะที่เป็นโลโก้ Windows ได้กลายเป็นง่ายและออกแบบเว็บได้มีอำนาจมากขึ้นผ่าน CSS3 -So, ผู้ที่ชื่นชอบการตั้งชื่อ Vasiliy Zubach ได้สร้างโลโก้ Windows 8 โดยใช้เพียง 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

หุ้น

ร้อนในสัปดาห์

เมื่อเร็ว ๆ นี้

ทางเลือกที่ดีที่สุดอูบุนตูที่มองหาถ้าคุณเป็นคนรักของลินุกซ์

ขอเริ่มต้นโดยได้รับคุ้นเคยกับบางสิ่งบางอย่าง; พื้นฐาน แต่บิ...

วิธีการเพิ่มลายเซ็นใน Gmail กล่องขาเข้า - เพิ่มลายเซ็นของ Google ใน Gmail

กล่องขาเข้าโดย Google เป็นหนึ่งในสิ่งที่ดีที่สุดของ Google ...

Weekly Tech News: Nokia, Google และนินเทน

สวัสดีครับทุกคนก็ศุกร์ 3 มีนาคมและเช่นเดียวเสมอเรากลับมาพร้...

โครงการ Pi ราสเบอร์รี่สำหรับมือใหม่ - คุณสามารถทำอะไรกับราสเบอร์รี่ Pi

ราสเบอร์รี่ Pi เป็นชุดของพลังงานต่ำคอมพิวเตอร์บอร์ดเดียวที่...

VPN ที่ดีที่สุดสำหรับ Android 2017 - วิธีการใช้ VPN ใน Android

ไปเป็นวันเมื่อ VPNs เพียงสำหรับเทคโนโลยี savvies และแฮกเกอร...

ความคิดเห็น