แต่ง text ให้มีมิติกับ text-shadow

ปกติสมัยก่อนตอนที่เรายังใช้ css2 กันอยู่นั้นถ้าหากต้องการจะทำให้ัตัวอักษรสวยงามก็คงจะต้อง ตัด ตัด ตัด !! รูปออกมาจากดีไซน์เท่านั้น ซึ่งเวลาที่เราจะต้องแก้คำมันก็ช่าง …

แต่เมื่อ css3 มาพร้อมกับคำสั่งนี้มันก็ทำให้หลายอย่างเปลี่ยนไปคะ ^ ^ คาดว่าหลายคนคงเคยได้ลองใช้คำสั่งนี้มาแล้วนะคะ เราคงจะอธิบายแบบคร่าวๆ แล้วก็เข้าเรื่องกันเลย

text-shadow ก็คือการใส่เงาให้กับตัวอักษรนะคะ ซึ่งเราสามารถใส่ค่าได้ดังนี้ค่ะ

  • horizontal-offset คือค่าทางแนวนอน (ค่า + เงาจะเบี่ยงไปทางขวา ค่า – เงาจะเบี่ยงไปทางซ้าย)
  • vertical-offset คือค่าทางแนวตั้ง (ค่า + เงาจะเบี่ยงไปด้านล่าง ค่า – เงาจะเบี่ยงไปด้านบน)
  • blur คือความฟุ้งกระจายของเงา (ค่า + มากจะฟุ้งมาก)
  • color คือสีของเงา

ต่อด้วยตัวอย่าง code ที่จะลองเขียนนะคะเป็นการเขียนแบบเงาซ้อนเงา !! คะ เราลองมาดูกัน

ยังสามารถทำได้อีกหลายแบบนะคะ ลองทำแล้วเอามาแชร์กันดู เราอาจได้ text งานศิลป์เพิ่มอีกเยอะเลยคะ ^ ^

(Visited 1,817 times, 2 visits today)

Leave a Reply