Softonic

เครื่องกำเนิดเงาข้อความแบบ CSS

ขั้นตอน 1 / 2
สร้าง CSS

การสร้างคำประกาศ text-shadow โดยใช้สายตาโดยตรงใน DevTools สามารถทำได้ แต่จะกลายเป็นการคาดเดาทันทีเมื่อคุณต้องการเงาแบบนิวโมรฟิกที่มีความนุ่มนวล เงาสองชั้นสไตล์รีโทร หรือเส้นขอบคมชัดขนาดเพียง 1 พิกเซลบนหัวข้อหลัก เครื่องมือนี้ช่วยให้คุณปรับค่าการเลื่อนตำแหน่ง (X และ Y) รัศมีเบลอ และสี RGBA พร้อมคัดลอกบรรทัด CSS ที่พร้อมนำไปวางได้เลย

วิธีสร้างเงาข้อความ

  1. 1

    ตั้งค่าออฟเซ็ต

    X คือค่าการเลื่อนในแนวนอน (เป็นพิกเซล) ส่วน Y คือค่าการเลื่อนในแนวตั้ง โดยค่า Y เป็นบวกจะดันเงาลง ขณะที่ค่า Y เป็นลบจะดันเงาขึ้น

  2. 2

    เลือกรัศมีการเบลอ

    ค่าเบลอเท่ากับ 0 จะให้เงาที่คมชัดเป็นเส้นขอบชัดเจน ส่วนค่าที่สูงขึ้นจะทำให้เงาจางลง โดยทั่วไปการสร้างเงาแบบนุ่มนวลจะใช้ค่าเบลอระหว่าง 4 ถึง 12 พิกเซล

  3. 3

    เลือกสี

    ใช้สตริง RGBA เพื่อปรับระดับความโปร่งใสได้อย่างแม่นยำ โดยค่า `rgba(0,0,0,0.35)` เป็นค่าเริ่มต้นที่เหมาะสมสำหรับการแสดงผลความลึกอย่างละเอียดบนพื้นหลังสว่าง

  4. 4

    คัดลอกคำประกาศ

    เครื่องมือนี้จะสร้างค่า `text-shadow: Xpx Ypx Blurpx color;` ขึ้นมา นำไปวางในตัวเลือก (selector) ที่ตรงกันในไฟล์สไตล์ชีตของคุณได้เลย

สูตรการสร้างเงาข้อความที่ดูสวยงามจริงๆ

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

ชีตสรุป

เอฟเฟกต์ คำประกาศ
ความลึกแบบบางเบา text-shadow: 0 1px 2px rgba(0,0,0,0.25);
เงาตกแบบนุ่ม text-shadow: 0 4px 12px rgba(0,0,0,0.35);
เส้นขอบ 1 พิกเซล text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
เรโทรสองชั้น text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
แสงเรืองนีออน text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

การซ้อนเงาหลายชั้น

text-shadow รองรับรายการที่คั่นด้วยเครื่องหมายจุลภาค เบราว์เซอร์จะวาดตามลำดับในโค้ดโดยใช้หลักการของจิตรกร (painter’s algorithm) เงาที่อยู่ท้ายสุดในรายการจะถูกวางไว้ด้านหลังสุด ใช้คุณสมบัตินี้เพื่อสร้างเส้นขอบจำลอง (วางเงาคมขนาด 1 พิกเซลสี่เส้นในทิศบน ล่าง ซ้าย ขวา) หรือสร้างมิติความลึกด้วยการซ้อนเงาใกล้ที่คมชัดหนึ่งชั้นกับเงาไกลที่ฟุ้งกระจายอีกหนึ่งชั้น

เมื่อใดที่ไม่ควรใช้ text-shadow

  • สำหรับข้อความเนื้อหาขนาดเล็กมาก การเบลอเกิน 2 พิกเซลจะทำให้ตัวอักษรดูเลอะเลือน ควรใช้ -webkit-font-smoothing และเพิ่มคอนทราสต์ให้มากขึ้นแทน
  • สำหรับแอนิเมชันส่วนหัว (hero) ที่ต้องการประสิทธิภาพสูง ควรหลีกเลี่ยงการซ้อนเงาเกินสามชั้น เพราะแต่ละชั้นจะบังคับให้เบราว์เซอร์แรสเตอร์ไรซ์ข้อความใหม่
  • หากต้องการเงาที่มีระยะเยื้องแคบบนเส้นทางซับซ้อน (เส้นโค้งหรือการหมุน) ควรพิจารณาใช้ <filter> ของ SVG ร่วมกับ feDropShadow แทน เพราะจะตามรูปทรงของตัวอักษรได้แม่นยำกว่า

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

โดยการออกแบบ ผลลัพธ์จะเป็นชั้นเงาเพียงชั้นเดียว หากต้องการเพิ่มเอฟเฟกต์ลงในชั้นต่าง ๆ ให้เรียกใช้เครื่องสร้างหลายครั้ง และเชื่อมผลลัพธ์เข้าด้วยกันด้วยเครื่องหมายจุลภาค เช่น text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);

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

เบราว์เซอร์จะแปลงเงาของข้อความให้อยู่ในรูปแบบราสเตอร์บนโครงข่ายพิกเซลของอุปกรณ์ โดยเงาที่มีค่าบลัร์เท่ากับ 0 บนจอขนาด 2x จะแสดงผลที่ตำแหน่งย่อยพิกเซล และอาจดูนุ่มนวลเล็กน้อย การเพิ่มค่าบลัร์เป็น 1 มักช่วยปรับให้เงาดูชัดเจนขึ้น โดยไม่เปลี่ยนแปลงความหนาแน่นทางภาพ

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

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

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

เครื่องมือนี้มีให้บริการในภาษาอื่น