เครื่องมือสร้าง CSS Shadow สำหรับการ์ดเว็บไซต์
เครื่องมือสร้าง CSS Shadow
เครื่องมือสร้าง CSS Box Shadow พร้อมตัวอย่างการ์ด | We.Inc
สร้าง CSS box-shadow แบบหลายชั้นและดูตัวอย่างบนการ์ดบริการกับการ์ดราคา ทั้งพื้นหลังสว่างและมืด พร้อมสถานะโฟกัสที่มองเห็นได้ คัดลอก CSS หรือคอมโพเนนต์การ์ดพร้อมใช้งาน
ตัดสินเงาจากสี่เหลี่ยมสีเทาเพียงอย่างเดียวได้ยาก ที่นี่คุณปรับ box-shadow แบบหลายชั้นและดูผลบนการ์ดบริการกับการ์ดราคาได้ ทั้งหน้าสว่างหรือมืด พร้อมวงแสดงโฟกัสแป้นพิมพ์ที่ทดสอบด้วย Tab ได้ คัดลอก CSS หรือคอมโพเนนต์การ์ดทั้งชุดเมื่อได้แบบที่ต้องการ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีการส่งสิ่งที่คุณพิมพ์ไปยัง We.Inc หรือบุคคลอื่น และข้อมูลจะหายไปเมื่อปิดแท็บ
- เริ่มจากค่าที่ตั้งไว้หรือปรับเลเยอร์แรก: ระยะเยื้องแนวนอนและแนวตั้ง ความเบลอ การกระจาย สี ความทึบ และ inset
- เพิ่มได้สูงสุด 5 เลเยอร์ เงาหลายชั้น (ชั้นหนึ่งคมชัดและอีกชั้นกว้างนุ่ม) ดูเป็นธรรมชาติกว่าเงาขนาดใหญ่ชั้นเดียว
- สลับตัวอย่างระหว่างหน้าสว่างกับหน้ามืด กด Tab เพื่อย้ายโฟกัสไปยังปุ่มบนการ์ด แล้วตรวจว่าวงแสดงโฟกัสยังมองเห็นได้
- ระบบตรวจจะแจ้งเมื่อเงาจางเกินไปบนพื้นหลังที่เลือก และเมื่อคอนทราสต์ข้อความบนการ์ดต่ำกว่า WCAG AA
- คัดลอกคำสั่ง box-shadow หรือคอมโพเนนต์การ์ดทั้งชุดที่มี HTML และ CSS
- บนพื้นหลังมืด เงาแทบมองไม่เห็น ให้ใช้สีการ์ดที่สว่างขึ้นเล็กน้อยหรือเส้นขอบบาง ๆ เพื่อแยกการ์ดแทน
- ปรับสีเงาให้เอนเข้าหาสีพื้นหลัง แทนการใช้สีดำสนิท เพื่อให้ดูนุ่มนวลขึ้น
- อย่าใช้เงาเพียงอย่างเดียวเพื่อแสดงโฟกัส ควรใช้เส้นขอบ outline ที่ชัดเจนด้วย
- ค่าความเบลอขนาดใหญ่ใช้ทรัพยากรในการวาดมากกว่า หลีกเลี่ยงการทำภาพเคลื่อนไหวกับรายการยาว ๆ
- ใช้ระดับเงาหนึ่งหรือสองแบบทั่วทั้งเว็บไซต์ เพื่อให้ความลึกมีความหมาย
คำถามที่พบบ่อย
คุณสมบัติ CSS box-shadow ทำงานอย่างไร
box-shadow รับค่าระยะเยื้องแนวนอน ระยะเยื้องแนวตั้ง รัศมีความเบลอ (ไม่บังคับ) การกระจาย (ไม่บังคับ) และสี รวมถึงคำสั่ง inset สำหรับเงาด้านใน ระบุเงาหลายชั้นได้โดยคั่นด้วยจุลภาค โดยชั้นแรกจะแสดงอยู่ด้านบน
ทำไมเงาหลายชั้นจึงดูดีกว่า
วัตถุจริงจะสร้างเงาคมชัดใกล้วัตถุและเงานุ่มกว้างที่อยู่ไกลออกไป การใช้ 2 หรือ 3 ชั้นที่เพิ่มความเบลอและลดความทึบจะเลียนแบบลักษณะนี้ได้
ทำไมเงาจึงมองไม่เห็นบนพื้นหลังมืด
เงามืดบนหน้ามืดแทบไม่มีคอนทราสต์ เครื่องมือจะแจ้งปัญหานี้ ลองยกการ์ดให้เด่นด้วยสีพื้นผิวที่สว่างขึ้นหรือเส้นขอบบาง ๆ แทน
box-shadow มีผลต่อการช่วยการเข้าถึงไหม
เงาเป็นของตกแต่ง จึงไม่จำเป็นต้องผ่านกฎคอนทราสต์ด้วยตัวเอง สิ่งสำคัญคือข้อความบนการ์ดยังอ่านได้ และแสดงโฟกัสด้วยเส้นขอบ outline ที่มองเห็นได้ ไม่ใช่เปลี่ยนเงาเพียงอย่างเดียว
เครื่องมือสร้าง CSS shadow ฟรีไหม
ฟรี ไม่ต้องสมัครสมาชิก คัดลอกโค้ดไปใช้ในโปรเจกต์ใดก็ได้
ทดสอบเงาบนคอมโพเนนต์ที่จะนำไปใช้จริง
- เงาที่ดูพอดีบนสี่เหลี่ยมเดี่ยวอาจดูหนักเมื่ออยู่บนแถวการ์ดราคา หรือหายไปใต้ภาพ การดูตัวอย่างบนการ์ดที่เว็บไซต์ธุรกิจขนาดเล็กใช้จริง เช่น การ์ดบริการที่มีไอคอนและแพ็กเกจราคาเด่น จะช่วยให้เห็นผลลัพธ์ที่จะได้
- โค้ดคอมโพเนนต์มีเส้นขอบ outline สำหรับ focus-visible เพื่อให้ใช้การ์ดด้วยแป้นพิมพ์ได้ ไม่ว่าคุณจะเลือกเงาแบบใด
เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต
Product
Who It's For
Features
Resources
Company
View Sitemap