มาทำรูป 8 bit ด้วย css กันเถอะ
เคยเข้าไปเล่นตามเว็บไซต์ต่างประเทศบ่อย ๆ กับการทำ Template รูปขึ้นมา แล้วให้เราเข้าไปตกแต่งรูปตัวเอง แต่งหน้าตา เหมือนได้เล่นเกมเดอะซิมอย่างไงอย่างงั้น ก็เลยอยากบอกว่าพวกเราเองก็ทำได้นะ ยิ่งหากใครคิดจะเอามาประยุกต์ใช้กับสินค้าของบริษัท หรือเอาไปใช้ในการโปรโมตสินค้าก็ทำได้ ติดต่อจ้างพวกเรามาได้เลย! หรือ มาลองอ่านดูบทความนี้ดูก็ได้ กับการทำรูป 8 bit ง่าย ๆ ที่คุณอาจจะคิดไม่ถึง กับการใช้งานแค่ box shadow เท่านั้น
วันนี้เราจะมาลองสร้างโลโก้ Logo บริษัทเป็นภาพ 8 bit ให้ดูกัน
ขั้นตอนแรก
ขั้นตอนแรก มองภาพที่เราจะวาดให้เป็น grid หรือจะลองเอาตารางไปวางไว้ที่ภาพโลโก้
หรือเข้า photoshop ไปที่เมนู view > show > grid
ก็จะได้ภาพของช่องตาราง
จากนั้นเขียน 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;
}จะได้หน้าเว็บที่มีแค่พื้นหลังสีเทาๆ
เสร็จแล้วประกาศคลาส twin_bg_bit ขึ้นมาเลยตามที่เราตั้งไว้ในตอนแรก
<body>
<div class="twin_bg_bit"></div>
</body>กำหนดขนาดให้เป็น 10px อาจจะมากหรือน้อยกว่านี้ก็ได้ ขนาดนี้มันผลทำให้ภาพโดยรวมที่เรามองเห็นมีขอบเล็กลง ดังตัวอย่างข้างล่างที่ได้เปลี่ยนจาก 10px เป็น 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 หน้าใหม่จะได้หน้าเว็บที่มีจุดเป็นกล่องสีเหลี่ยมขึ้นมาเท่าขนาดที่เรากำหนด
จากนั้นเพิ่ม 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;
}
แล้วถ้าหากเราเพิ่ม
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 แถวตามภาพด้ายนล่าง
จากภาพร่างเราวางไว้ว่าจะทำ 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;
}ผลลัพธ์ที่ได้
ใส่ส่วน 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;
}ผลลัพธ์ที่ได้จะเป็นอีกแถวหนึ่ง
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,เราก็จะทำไปเรื่อยจนครบตามแบบที่เรากำหนดไว้
ผลลัพธ์ที่ได้จะเป็นดังภาพ
ตัวอย่างโค้ด
Github และ Codepen.io
อ้างอิงข้อมูล box shadow จาก https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
มันไม่ยากใช่มั้ยล่ะ หรือหากใครคิดว่ามันยาก หรือต้องการลูกเล่นอะไรเพิ่มเติมในการใช้หลักการแบบนี้เพื่อโปรโมตสินค้าหรือบริษัท ลองทักมาคุยกันได้นะครับ
📌สนใจติดต่อ📌
💻 twinsynergy.co.th
📱 063-789-9059
