มาทำรูป 8 bit ด้วย css กันเถอะ12 August 2020Programing

มาทำรูป 8 bit ด้วย css กันเถอะ

เคยเข้าไปเล่นตามเว็บไซต์ต่างประเทศบ่อย ๆ กับการทำ Template รูปขึ้นมา แล้วให้เราเข้าไปตกแต่งรูปตัวเอง แต่งหน้าตา เหมือนได้เล่นเกมเดอะซิมอย่างไงอย่างงั้น ก็เลยอยากบอกว่าพวกเราเองก็ทำได้นะ ยิ่งหากใครคิดจะเอามาประยุกต์ใช้กับสินค้าของบริษัท หรือเอาไปใช้ในการโปรโมตสินค้าก็ทำได้ ติดต่อจ้างพวกเรามาได้เลย! หรือ มาลองอ่านดูบทความนี้ดูก็ได้ กับการทำรูป 8 bit ง่าย ๆ ที่คุณอาจจะคิดไม่ถึง กับการใช้งานแค่ box shadow เท่านั้น

วันนี้เราจะมาลองสร้างโลโก้ Logo บริษัทเป็นภาพ 8 bit ให้ดูกัน

ขั้นตอนแรก

logo twin to logo twin 8 bit

ขั้นตอนแรก มองภาพที่เราจะวาดให้เป็น grid หรือจะลองเอาตารางไปวางไว้ที่ภาพโลโก้

drawing twin 8 bit

หรือเข้า photoshop ไปที่เมนู view > show > grid

photoshop : how to display grid layout

ก็จะได้ภาพของช่องตาราง

result photoshop show grid layout
300

จากนั้นเขียน element สำหรับจุดที่เราต้องการทำรูป

<div class=”twin_bg_bit”></div>

จะได้ตามภาพด้านล่าง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/8bit.css">
</head>
<body>
    <div class="twin_bg_bit"></div>
</body>
</html>

สร้างไฟล์ style สำหรับวางโค้ด css ในตัวอย่างใช้ชื่อว่า 8bit.css

มาเริ่มการเขียน css กัน เพื่อที่จะได้เห็นรูปที่เราทำชัดขึ้น เนื่องจากว่าเรามีการใช้สีขาวด้วยดังนั้นจึงเปลี่ยนโค้ด body เป็นสีเทา

html, body {
    background: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

จะได้หน้าเว็บที่มีแค่พื้นหลังสีเทาๆ

set default background colors display html

เสร็จแล้วประกาศคลาส twin_bg_bit ขึ้นมาเลยตามที่เราตั้งไว้ในตอนแรก

<body>
    <div class="twin_bg_bit"></div>
</body>

กำหนดขนาดให้เป็น 10px อาจจะมากหรือน้อยกว่านี้ก็ได้ ขนาดนี้มันผลทำให้ภาพโดยรวมที่เรามองเห็นมีขอบเล็กลง ดังตัวอย่างข้างล่างที่ได้เปลี่ยนจาก 10px เป็น 13px

logo twin 8 bit with size border 13px
html, body {
    background: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.twin_bg_bit {
    position: relative;
    width: 10px;
    height: 10px;
    background: white;
}

ตอนนี้พอเรา reload หน้าใหม่จะได้หน้าเว็บที่มีจุดเป็นกล่องสีเหลี่ยมขึ้นมาเท่าขนาดที่เรากำหนด

div twin display background width hight for logo twin 8 bit

จากนั้นเพิ่ม box-shadow: 0rem 0rem 0 0 #fff;

ลงไปใน .twin_bg_bit

ผลลัพธ์ที่ได้ยังไม่มีอะไรเปลี่ยนแปลง

html, body {
    background: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.twin_bg_bit {
    position: relative;
    width: 10px;
    height: 10px;
    background: white;
    box-shadow: 0rem 0rem 0 0rem #fff;
}
first box shadow display for logo twin 8 bit

แล้วถ้าหากเราเพิ่ม 

box-shadow: 0rem 0rem 0 0rem #fff,   1rem 0rem 0 0 #fff;

html, body {
    background: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.twin_bg_bit {
    position: relative;
    width: 10px;
    height: 10px;
    background: white;
    box-shadow: 0rem 0rem 0 0rem #fff,
    1rem 0rem 0 0 #fff;
}

 ผลลัพธ์ที่ได้ก็จะเปลี่ยนไปแล้ว เพราะตอนนี้ box-shadow ใหม่ขยับจาก 0rem เป็น 1rem เหมือนเป็นการขยับกล่องไป 1 แถวตามภาพด้ายนล่าง

second box shadow display for logo twin 8 bit

จากภาพร่างเราวางไว้ว่าจะทำ 12 column จากโค้ดข้างบนเราเริ่มที่ 0rem ไปจนถึง 11rem ก็จะเท่ากับเราได้มา 1 row 12 column ภาพของแถวแรกที่เราได้วาดไว้

html, body {
    background: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.twin_bg_bit {
    position: relative;
    width: 10px;
    height: 10px;
    background: white;
    box-shadow: 0rem 0rem 0 0rem #fff,
    1rem 0rem 0 0 #fff,
    2rem 0rem 0 0 #fff,
    3rem 0rem 0 0 #fff,
    4rem 0rem 0 0 blue,
    5rem 0rem 0 0 blue,
    6rem 0rem 0 0 blue,
    7rem 0rem 0 0 blue,
    8rem 0rem 0 0 #fff,
    9rem 0rem 0 0 #fff,
    10rem 0rem 0 0 #fff,
    11rem 0rem 0 0 #fff;
}

ผลลัพธ์ที่ได้

first row box shadow for logo twin 8 bit

ใส่ส่วน row ที่สองเราจะกำหนดค่า 0rem – 11rem ไว้เหมือนเดิม แต่ขยับมาเล่น box-shadow ตัวเลขคอลัมถัดไปกัน

จาก 0rem 0rem 0 0 #fff ไปเป็น 0rem 1rem 0 0 #fff และก็เขียนไล่มาให้ครบ 12 ค่าเหมือนเดิม จะได้ดังภาพ

html, body {
    background: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.twin_bg_bit {
    position: relative;
    width: 10px;
    height: 10px;
    background: white;
    box-shadow: 0rem 0rem 0 0rem #fff,
    1rem 0rem 0 0 #fff,
    2rem 0rem 0 0 #fff,
    3rem 0rem 0 0 #fff,
    4rem 0rem 0 0 blue,
    5rem 0rem 0 0 blue,
    6rem 0rem 0 0 blue,
    7rem 0rem 0 0 blue,
    8rem 0rem 0 0 #fff,
    9rem 0rem 0 0 #fff,
    10rem 0rem 0 0 #fff,
    11rem 0rem 0 0 #fff,

    /* row 2 */
    0rem 1rem 0 0 #fff,
    1rem 1rem 0 0 #fff,
    2rem 1rem 0 0 blue,
    3rem 1rem 0 0 blue,
    4rem 1rem 0 0 blue,
    5rem 1rem 0 0 blue,
    6rem 1rem 0 0 blue,
    7rem 1rem 0 0 blue,
    8rem 1rem 0 0 blue,
    9rem 1rem 0 0 blue,
    10rem 1rem 0 0 #fff,
    11rem 1rem 0 0 #fff;
}

ผลลัพธ์ที่ได้จะเป็นอีกแถวหนึ่ง

second row box shadow for logo twin 8 bit

Row ที่ 3 ก็ยังคงเขียนแบบเดียวกับ row ที่ 2 เพียงแค่ปรับตัวเลขจาก 0rem 1rem 0 0 #fff เป็น 0rem 2rem 0 0 #fff นั่นหมายความว่า

box-shadow: เงาแนวแกน x  เงาแนวแกน Y ความฟุ่ง ขนาดเงา สี

ถ้าเป็น box shadow ปกติที่เราใช้กันคุณสมบัติจะเป็นแบบข้างล่าง

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
  • เลขค่าแรก คือเงาแนวนอน ค่าบวกจะเป็นเงาด้านขวา ค่าติดลบจะเป็นเงาด้านซ้าย
  • เลขตัวที่สอง คือเงาแนวตั้ง ค่าบวกจะเป็นเงาด้านล่าง ค่าติดลบจะเป็นเงาด้านบน
  • เลขตัวที่สาม คือค่าการเบลอ ว่าจะเบลอประมาณไหน เริ่มจากค่าคือ ศูนย์ และเป็นค่าบวก
  • เลขตัวที่สี่ คือขนาดของการขยายตัวของการเบลอ (a spread distance) ใช้เป็นค่า บวกเท่านั้น
  • สีของเงา
  • inset คือคำสั่งให้เงาเว้าเข้ามาในวัตถุ ปกติเงาที่ได้จะให้ความรู้สึกวัตถุนั้นนูนขึ้น

ดังนั้นเวลาที่เราเขียน row 3 จะเปลี่ยนแค่ตัวเลขลำดับที่สองดังนี้

    /* row 3 */
    0rem 2rem 0 0 #fff,
    1rem 2rem 0 0 blue,
    2rem 2rem 0 0 blue,
    3rem 2rem 0 0 blue,
    4rem 2rem 0 0 blue,
    5rem 2rem 0 0 blue,
    6rem 2rem 0 0 blue,
    7rem 2rem 0 0 blue,
    8rem 2rem 0 0 blue,
    9rem 2rem 0 0 blue,
    10rem 2rem 0 0 blue,
    11rem 2rem 0 0 #fff,

เราก็จะทำไปเรื่อยจนครบตามแบบที่เรากำหนดไว้

drawing twin 8 bit

ผลลัพธ์ที่ได้จะเป็นดังภาพ

result logo twin 8bit

ตัวอย่างโค้ด

Github และ Codepen.io

อ้างอิงข้อมูล box shadow จาก https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

มันไม่ยากใช่มั้ยล่ะ หรือหากใครคิดว่ามันยาก หรือต้องการลูกเล่นอะไรเพิ่มเติมในการใช้หลักการแบบนี้เพื่อโปรโมตสินค้าหรือบริษัท ลองทักมาคุยกันได้นะครับ

📌สนใจติดต่อ📌
💻 twinsynergy.co.th
📱 063-789-9059

ก่อนหน้า
ถัดไป