เครื่องสร้างเงาข้อความ
สร้างและดูตัวอย่างคุณสมบัติ CSS text-shadow ด้วยภาพ
การตั้งค่าข้อความ
กำหนดค่าสไตล์ของข้อความตัวอย่าง
การตั้งค่าเงา
ปรับคุณสมบัติของแต่ละเงา
เงา 1
ค่าที่ตั้งไว้ล่วงหน้า
ลองใช้สไตล์เงาข้อความที่กำหนดไว้ล่วงหน้า
ดูตัวอย่าง
ตรวจสอบเอฟเฟกต์เงาข้อความที่สร้างขึ้น
Sample Text
CSS ที่สร้างขึ้น
text-shadow: 2px 2px 4px #00000080;คู่มือเงาข้อความฉบับสมบูรณ์
ทำความเข้าใจคุณสมบัติเงาข้อความ
คำอธิบายค่าคุณสมบัติ
- • X 오프셋: X Offset: ตำแหน่งแนวนอนของเงา (บวก: ขวา, ลบ: ซ้าย)
- • Y 오프셋: Y Offset: ตำแหน่งแนวตั้งของเงา (บวก: ลง, ลบ: ขึ้น)
- • 블러: เบลอ: ระดับความเบลอของเงา (0: คมชัด, ค่าสูง: เบลอมากขึ้น)
- • 색상: สี: สีของเงา (HEX, RGB, RGBA, ฯลฯ)
โครงสร้างไวยากรณ์
text-shadow: x y blur color;
text-shadow: 2px 2px 4px #000000;
เทคนิคการออกแบบ
การสร้างความลึก
- • X Offset เล็ก + เบลอเล็ก: ความลึกที่ละเอียดอ่อน
- • X Offset ใหญ่ + เบลอใหญ่: มิติที่แข็งแกร่ง
- • สีเข้ม: เอฟเฟกต์เงาที่เป็นธรรมชาติ
- • สีโปร่งแสง: การแสดงเงาที่นุ่มนวล
เอฟเฟกต์พิเศษ
- • 0 0 เบลอสี: เอฟเฟกต์เรืองแสง (ส่องสว่าง)
- • การรวมเงาหลายแบบ: เอฟเฟกต์ที่ซับซ้อน
- • สีที่ตัดกัน: เอฟเฟกต์ป้ายนีออน
- • X Offset เชิงลบ: เอฟเฟกต์แสงย้อนกลับ
กรณีการใช้งานจริง
- • หัวข้อข่าว: เงาตกกระทบเพื่อสร้างผลกระทบที่แข็งแกร่ง
- • ข้อความปุ่ม: เงาที่ละเอียดอ่อนเพื่อปรับปรุงความสามารถในการอ่าน
- • โลโก้: เอฟเฟกต์พิเศษเพื่อเพิ่มเอกลักษณ์ของแบรนด์
- • แบนเนอร์: เอฟเฟกต์เรืองแสงเพื่อเพิ่มความสนใจทางสายตา
- • การนำทาง: ไฮไลต์เพื่อระบุหน้าปัจจุบัน
ข้อควรพิจารณาด้านการเข้าถึง
- • รักษาสัดส่วนคอนทราสต์ที่เพียงพอระหว่างข้อความและพื้นหลัง (มาตรฐาน WCAG)
- • ป้องกันการลดทอนความสามารถในการอ่านจากเงา
- • อย่าพึ่งพาสีเพียงอย่างเดียวในการนำเสนอข้อมูล
- • ตรวจสอบสถานะการแสดงผลในโหมดคอนทราสต์สูง
- • พิจารณาการตั้งค่าการเข้าถึงสำหรับเงาแบบเคลื่อนไหว
การเพิ่มประสิทธิภาพ
- • ค่าเบลอที่มากเกินไปอาจส่งผลต่อประสิทธิภาพการเรนเดอร์
- • ใช้เลเยอร์เงาหลายชั้นอย่างระมัดระวัง
- • ใช้การเร่งความเร็ว GPU สำหรับแอนิเมชัน
- • ทำการทดสอบประสิทธิภาพในสภาพแวดล้อมมือถือ