การทำงานของเครื่องมือสร้าง Box Shadow
เครื่องมือนี้ช่วยให้คุณสร้างเงาสำหรับองค์ประกอบการออกแบบเว็บ (box-shadow) ได้ตามต้องการ โดยการปรับแต่งค่าคุณสมบัติต่างๆ ผ่านแถบเลื่อน คุณสามารถซ้อนเลเยอร์เงาหลายชั้นเพื่อสร้างมิติความลึกที่ซับซ้อน และคัดลอกโค้ด CSS ไปใช้งานในโปรเจกต์ของคุณได้ทันที
การประมวลผลทั้งหมดเกิดขึ้นภายในเครื่องของคุณ โดยเงาทั้งหมดจะถูกเรนเดอร์ในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo
โครงสร้างและพารามิเตอร์ของ CSS Box Shadow
การสร้างเงาที่มีประสิทธิภาพจำเป็นต้องเข้าใจความสัมพันธ์ของค่าพารามิเตอร์ต่างๆ ซึ่งเครื่องมือนี้เปิดให้คุณปรับแต่งค่าได้แบบเรียลไทม์:
- ระยะแนวนอน (Horizontal offset): ควบคุมการขยับของเงาไปทางซ้ายหรือขวา มีช่วงปรับตั้งแต่ -50px ถึง 50px
- ระยะแนวตั้ง (Vertical offset): ควบคุมการขยับของเงาขึ้นหรือลง มีช่วงปรับตั้งแต่ -50px ถึง 50px
- ความเบลอ (Blur): ปรับขอบของเงาให้นุ่มนวลขึ้น มีช่วงปรับตั้งแต่ 0px ถึง 100px
- การแผ่กระจาย (Spread): ปรับขนาดของเงาให้ขยายออกหรือหดตัวลงก่อนที่จะเริ่มเบลอ มีช่วงปรับตั้งแต่ -50px ถึง 50px การตั้งค่าการแผ่กระจายเป็นค่าลบจะดึงเงาให้หดกลับเข้ามาด้านใน
- สีเงา: ตัวเลือกสีสำหรับกำหนดโทนสีของเงา
- ความโปร่งแสง (Opacity): แถบเลื่อนสำหรับปรับระดับความโปร่งใสของเงา
- เงาด้านใน (Inset): ตัวเลือกสำหรับเปลี่ยนทิศทางของเงาให้แสดงผลอยู่ภายในขอบขององค์ประกอบ
การซ้อนเลเยอร์เพื่อสร้างมิติความลึก
การใช้เงาเพียงชั้นเดียวอาจทำให้องค์ประกอบดูแบนและไม่สมจริงเมื่อเงาขยายใหญ่ขึ้น การซ้อนเลเยอร์เงาหลายชั้นช่วยให้คุณสร้างมิติความลึกที่มีความสมจริงสูงได้
เครื่องมือนี้จะเตรียมเลเยอร์ไว้ล่วงหน้าทั้งหมด 5 เลเยอร์ โดยเลเยอร์แรกจะมีค่าเริ่มต้นคือ 0 8 24 -4 และใช้สีดำโปร่งแสง 18% ส่วนเลเยอร์อื่นๆ จะถูกซ่อนไว้ในตอนเริ่มต้น คุณสามารถกดปุ่ม เพิ่มเลเยอร์ เพื่อสร้างเลเยอร์ใหม่ที่มีค่าเริ่มต้น หรือกดปุ่ม ลบเลเยอร์ เพื่อลบเลเยอร์ที่ไม่ต้องการออกได้ เมื่อมีการใช้งานหลายเลเยอร์ โค้ด CSS ที่สร้างขึ้นจะแสดงผลลัพธ์โดยคั่นแต่ละเลเยอร์ด้วยเครื่องหมายจุลภาค (,)
การประยุกต์ใช้งานในงานออกแบบเว็บ
คุณสามารถปรับแต่งค่าต่างๆ เพื่อตอบโจทย์การออกแบบที่หลากหลาย:
- เงาขนาดเล็กและแนบชิด: เหมาะสำหรับองค์ประกอบที่ต้องการให้ดูลอยขึ้นมาจากพื้นหลังเพียงเล็กน้อย
- เงาขนาดใหญ่และฟุ้งกระจาย: ช่วยสร้างความรู้สึกว่าองค์ประกอบนั้นลอยอยู่สูงขึ้นมามาก
- เอฟเฟกต์แบบกดบุ๋มลงไป: การเปิดใช้งาน เงาด้านใน (Inset) จะเปลี่ยนทิศทางเงาให้กลับเข้าไปด้านในองค์ประกอบ เหมาะสำหรับการออกแบบช่องกรอกข้อมูล (Input) หรือปุ่มที่กำลังถูกกด เพื่อให้ดูมีมิติยุบลงไป
คำถามที่พบบ่อย (FAQ)
Offset, Blur และ Spread ควบคุมอะไรบ้าง? Offset จะย้ายเงาไปทางซ้าย/ขวา และขึ้น/ลง, Blur จะช่วยให้ขอบเงานุ่มนวลขึ้น และ Spread จะขยายหรือย่อขนาดของเงาก่อนที่จะเบลอ การตั้งค่า Spread เป็นค่าลบจะดึงเงาให้แคบลง ซึ่งมีประโยชน์สำหรับการสร้างเงาที่คมและแนบชิดกับวัตถุ
ตัวเลือก Inset มีไว้ทำอะไร? เงาปกติจะตกกระทบอยู่ภายนอกองค์ประกอบ เหมือนแสงที่อยู่หลังการ์ดที่ลอยขึ้นมา ส่วนตัวเลือก Inset จะกลับทิศทางของเงาให้เข้ามาอยู่ด้านในแทน ทำให้องค์ประกอบดูยุบลงไป ซึ่งมีประโยชน์มากสำหรับช่องกรอกข้อมูล (Input) หรือปุ่มที่ถูกกด
ทำไมต้องซ้อนเลเยอร์เงามากกว่าหนึ่งชั้น? การใช้เงาเพียงเลเยอร์เดียวอาจทำให้ดูแบนเมื่อมีขนาดใหญ่ขึ้น ในความเป็นจริง มิติความลึกที่สมจริงมักเกิดจากการผสมผสานระหว่างเงาเข้มที่แคบและเงาจางที่กว้างกว่า การเพิ่มเลเยอร์ที่สองและปรับแต่งแต่ละเลเยอร์แยกกันจะช่วยให้ได้เอฟเฟกต์ที่ดูมีมิติยิ่งขึ้น