ตัวสร้างเงา CSS

เลื่อนแถบปรับแล้วตัวอย่างจะเปลี่ยนตาม ซ้อนหลายชั้นได้เมื่อเงาชั้นเดียวไม่พอ นั่นคือวิธีสร้างความลึกที่นุ่มและดูสมจริงแบบอินเทอร์เฟซจริง

ชั้น

ค่าสำเร็จรูป

วิธีใช้

  1. เลือกว่าจะใส่เงาให้อะไร ระหว่างกล่องกับข้อความ
  2. ตั้งระยะเยื้อง ความฟุ้ง และสี ตัวอย่างจะวาดใหม่ทันที
  3. เพิ่มชั้นเงาถ้าต้องการความลึก เงาจางสองหรือสามชั้นดูดีกว่าเงาหนักชั้นเดียว
  4. คัดลอกบรรทัด CSS ที่อยู่ใต้แผงควบคุม

สิ่งที่ควรรู้

ทำไมเงาข้อความจึงมีค่าให้ตั้งน้อยกว่า

พร็อพเพอร์ตี text-shadow รับเพียงระยะเยื้อง ความฟุ้ง และสี ส่วนการขยายและโหมดเงาด้านในเป็นของ box-shadow เท่านั้น การใส่ค่าเกินมาหนึ่งค่าทำให้ทั้งบรรทัดใช้ไม่ได้ เบราว์เซอร์จะทิ้งมันไปเงียบๆ และเงาก็หายไปทั้งอัน เมื่อสลับไปโหมดข้อความ เครื่องมือนี้จึงซ่อนสองตัวเลือกนั้น แทนที่จะหวังว่าเบราว์เซอร์จะมองข้ามให้

เงาจางหลายชั้นดีกว่าเงาหนักชั้นเดียว

เงาจริงไม่ได้เข้มเท่ากันทั้งผืน แต่เข้มตรงใต้วัตถุแล้วจางลงเมื่อห่างออกไป เงาชั้นเดียวที่ตั้งความฟุ้งไว้มากจะได้วงสีเทารอบๆ ขณะที่เงาสองหรือสามชั้นซึ่งเยื้องต่างกันและความทึบต่ำจะให้ความลึกแบบที่เห็นในอินเทอร์เฟซที่ทำมาอย่างดี เครื่องมือนี้เก็บทุกชั้นแยกจากกัน และบรรทัดที่คัดลอกไปจะเรียงชั้นตามลำดับ

คำถามที่พบบ่อย

ค่าการขยายทำอะไร

มันขยายหรือหดเงาก่อนที่จะใส่ความฟุ้ง ค่าติดลบจะดึงเงาเข้ามาด้านใน เงาจึงไม่ล้นออกด้านข้าง นั่นคือเคล็ดลับของเงาการ์ดที่ดูเรียบร้อย เพราะเงาควรอยู่ใต้กล่อง ไม่ใช่ล้อมรอบกล่อง

ทำเงาด้านในอย่างไร

ติ๊ก «เงาด้านใน» คำสั่ง inset จะปรากฏที่ต้นบรรทัดและเงาจะย้ายเข้าไปในกล่อง นิยมใช้กับปุ่มที่ถูกกดและช่องกรอกข้อมูล ซึ่งความลึกควรอ่านออกว่าเป็นรอยบุ๋ม ไม่ใช่การนูนขึ้น

ทำไมเงาของฉันมองไม่เห็น

ส่วนใหญ่เพราะตั้งความทึบไว้ที่ศูนย์ หรือตั้งระยะเยื้องและความฟุ้งเป็นศูนย์ทั้งคู่ เงาจึงซ่อนอยู่หลังกล่องพอดี อีกกรณีคือกล่องแม่ตั้ง overflow: hidden ไว้ และเงาตกออกไปนอกพื้นที่ที่มองเห็น

ใช้ได้กับทุกเบราว์เซอร์ไหม

ได้ ทั้ง box-shadow และ text-shadow เป็นมาตรฐานมาหลายปีแล้วและไม่ต้องใส่ prefix ค่าที่เครื่องมือนี้สร้างขึ้นเป็น CSS ล้วนโดยไม่มีส่วนขยายเฉพาะเบราว์เซอร์

เครื่องมือที่เกี่ยวข้อง