เครื่องมือสร้างเงา CSS (box-shadow, text-shadow)

ปรับ box-shadow, text-shadow และ filter: drop-shadow() ด้วยแถบเลื่อน ซ้อนเงาได้หลายชั้น และให้โค้ด CSS ใช้สำหรับกำหนดความลึกของการ์ดหรือปุ่ม ลักษณะกดลงแบบ inset หรือเส้นขอบตัวอักษร โดยดูตัวอย่างสดไปพร้อมกัน

วิธีใช้

1. ที่ "ชนิด" เลือก box-shadow, text-shadow หรือ filter: drop-shadow
2. ในแต่ละชั้นภายใต้ "ชั้นของเงา" ตั้งค่า "ระยะเลื่อน X", "ระยะเลื่อน Y", "ความเบลอ", "การกระจาย" (เฉพาะ box-shadow), "สีเงา" และ "ความทึบ" เปิด "ด้านใน" หากต้องการเงาด้านใน
3. กด "เพิ่มชั้น" หรือ "ทำสำเนา" เพื่อเพิ่มชั้น และใช้ลูกศรเพื่อจัดลำดับใหม่ หากเอาเครื่องหมายถูกของชั้นใดออก ชั้นนั้นจะถูกตัดออกไปชั่วคราว
4. ในตัวอย่างด้านซ้าย ตั้งค่า "พื้นหลัง", "สีการ์ด", "ความมนของมุม" และ "ขนาดการ์ด" ให้ใกล้เคียงกับหน้าจอจริงของคุณ
5. หากต้องการ เลือกจุดเริ่มต้นจาก "พรีเซ็ต" แล้วกด "คัดลอก" ข้างช่อง CSS

หลักการทำงาน

• เงา box-shadow หนึ่งชั้นเขียนในรูปแบบ "[inset] x y ความเบลอ การกระจาย สี" การกระจายค่าบวกทำให้เงาใหญ่ขึ้น ค่าลบทำให้เงาเล็กลง ส่วน text-shadow ไม่มีการกระจายและ inset
• filter: drop-shadow() สร้างเงาตามรูปทรงที่มองเห็น (ไอคอน PNG หรือ SVG) ไม่ใช่ตามกล่อง และฟังก์ชันหลายอันที่เขียนต่อกันจะซ้อนทับกัน
• สีจะเขียนเป็น HEX เมื่อทึบ และเป็น rgb(r g b / a) ในกรณีอื่น ความลึกที่ดูเป็นธรรมชาติมักมาจากเงาสองถึงสามชั้นที่มีความทึบต่ำและความเบลอเพิ่มขึ้นทีละชั้น
• ชั้นของเงาและการตั้งค่าตัวอย่างจะถูกเก็บไว้ในเบราว์เซอร์นี้

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

ค่าใน box-shadow เรียงลำดับอย่างไร

ระยะเลื่อน X, ระยะเลื่อน Y, ความเบลอ, การกระจาย, สี และใส่ inset ไว้หน้าสุดหากต้องการเงาด้านใน ตัวอย่างเช่น box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)

จะทำให้การ์ดมีเงาที่ดูเป็นธรรมชาติได้อย่างไร

ซ้อนเงาสองถึงสามชั้นที่ความทึบ 10 ถึง 20 เปอร์เซ็นต์ แล้วเพิ่มระยะเลื่อนแนวตั้งและความเบลอขึ้นทีละขั้น พรีเซ็ต "ยกปานกลาง" และ "นุ่มนวล 5 ชั้น" สร้างขึ้นด้วยวิธีนี้

text-shadow ทำเส้นขอบตัวอักษรได้หรือไม่

ได้ เงาสี่อันที่ความเบลอเป็นศูนย์ในสี่ทิศทาง (1px 1px, -1px -1px, 1px -1px, -1px 1px) จะรวมกันเป็นเส้นขอบบาง พรีเซ็ต "เส้นขอบตัวอักษร" ทำแบบนั้นพอดี

box-shadow กับฟิลเตอร์ drop-shadow ต่างกันอย่างไร

box-shadow สร้างเงาให้กล่องสี่เหลี่ยมของอิลิเมนต์ ส่วนฟิลเตอร์ drop-shadow สร้างเงาตามรูปทรงที่มองเห็น สำหรับไอคอนหรือ SVG บนพื้นหลังโปร่งใส drop-shadow คือตัวเลือกที่เหมาะสม