[CSS3] ประยุกต์การใช้งานกับ text-shadow

text-shadow นี่เป็น 1 ใน property ของ CSS3 ที่ผมจะมาแนะนำให้ดูกัน ซึ่งตัว text-shadow เป็น property ที่เราอ่านก็รู้เลยว่า เป็นการใส่เงาให้กับตัวอักษร ไปดูกันก่อนว่า ตัว text-shadow ใช้งานยังไง

CSS3 : วิธีการใช้ text-shadow

รูปแบบของ value ในการใช้งาน text-shadow ก็เป็นลักษณะแบบนี้

text-shadow: 2px 4px 3px #FF0099;

โดยค่า value ที่ใช้กับตัว text-shadow นั้นมีดังนี้

1. ค่าตัวแรก เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวนอน
2. ค่าตัวที่สอง เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวตั้ง
3. ค่าตัวที่สาม เป็นความเบลอของเงา หรือ blur radius ยิ่งค่ามาก เงาก็จะยิ่งเบลอขึ้น
4. ค่าตัวสุดท้าย สีของเงา เราต้องการสีของเงาเป็นสีอะไร ก็ใส่ลงไปเลยครับ

จาก css ด้านบน เราจะได้ผลลัพธ์มาแบบนี้ครับ

ในการใส่ค่าสีของเงานั้น เราสามารถใช้แบบ rgba ได้ด้วย การใช้แบบ rgba เพื่อที่เราจะได้สามารถกำหนด opacity ให้กับสีเงาได้ด้วย โดยการใส่ค่า rgba มีลักษณะแบบนี้

text-shadow: 2px 4px 3px rgba(255,0,153,1);

โดยค่าที่ใส่ให้กับสีนั้น เราใส่ค่าได้ตั้งแต่ 0 - 255 และค่าสุดท้าย opacity นั้นใส่ค่าได้ตั้งแต่ 0 - 1

ถ้าเราลองปรับค่า opacity ดู แล้วเทียบกันจะได้แบบนี้ครับ

text-shadow: 2px 4px 3px rgba(255,0,153,1);
text-shadow: 2px 4px 3px rgba(255,0,153,0.5);

CSS3 : ใส่เงาหลาย ๆ ชั้น

การใช้ text-shadow นั้น เราสามารถใส่ค่าให้ได้มากกว่า 1 ชั้น โดยแต่ละชั้นนั้น เราจะคั่นด้วย , อย่างเช่น

text-shadow: 3px 3px 5px #777, -2px -3px 7px #FF0000;

หรือ

text-shadow:0px 0px 4px #FFFFFF, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;

คราวนี้เราลองมาประยุกต์ใช้งานแบบง่าย ๆ ดูนะครับ

text-shadow : ทำตัวอักษรแบบ inset

เราจะทำตัวอักษรแบบ inset ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

color: #CCC;
text-shadow : 0px -1px 1px #000;

text-shadow : ทำตัวอักษรแบบ embross

เราจะทำตัวอักษรแบบ embross ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

color:#CCC;
text-shadow:-1px -1px #FFFFFF, 1px 1px #333333;

text-shadow : ทำตัวอักษรแบบไฟนีออน

เราจะทำตัวอักษรแบบไฟนีออน ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

color:#ffffff;
text-shadow:0 0 1px  #ffffff, 0 0 2px  #ffffff, 0 0 3px  #ffffff, 0 0 4px  #ff00de, 0 0 7px  #ff00de, 0 0 8px  #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;

ระหว่างที่เรากำลังดีใจกับการเรียนรู้ text-shadow อยู่นั่น ลองมาดูกันก่อนว่า Browser ไหนใช้งานกันได้บ้าง

text-shadow กับ browser ที่สนับสนุน

ผมก็เข้าไปเช็คดูในเว็บ When can I use ก็พบว่า text-shadow ยังไม่สนับสนุนใน IE9 แต่จะสนับสนุนเมื่อถึง IE10

ก่อน IE10 จะมา เราก็คงทำได้แค่ใช้อย่างอื่นแทนกันไปก่อน โดยสำหรับ IE นั้น text-shadow เราจะแทนด้วย

filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);

แต่ผมไม่ขออธิบายถึงมันนะครับ ผมนั่งรอ IE10 แล้วกัน ^^