เพิ่มเอฟเฟกต์เงาให้ข้อความ (Text Shadow) ด้วย CSS

ใช้คุณสมบัติ text-shadow เพื่อเพิ่มเอฟเฟกต์เงาให้ข้อความ ตัวอย่างด้านล่างแสดงการเพิ่มเอฟเฟกต์เงา:

ตัวอย่าง

<html>
  <head>
    <style>
      h1 { text-shadow: 2px 2px; }
      h2 { text-shadow: 2px 2px red; }
      h3 { text-shadow: 2px 2px 5px red; }
      h4 { color: white; text-shadow: 2px 2px 4px #000000; }
      h5 { text-shadow: 0 0 3px #FF0000; }
      h6 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; }
      p { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; }
    </style>
  </head>
  <body>
    <h1>Tutorialspoint.com</h1>
    <h2>Tutorialspoint.com</h2>
    <h3>Tutorialspoint.com</h3>
    <h4>Tutorialspoint.com</h4>
    <h5>Tutorialspoint.com</h5>
    <h6>Tutorialspoint.com</h6>
    <p>Tutorialspoint.com</p>
  </body>
</html>

ผลลัพธ์