สำหรับใครที่เคยใช้ css สำหรับสร้างเงานให้กับตัวอักษรนั้นหลายคนคงไม่ทราบว่าใน ie ไม่มี property นี้ครับ ผมก็ไม่เข้าใจเหมือนกันว่าทำไมว่า ie มันไม่ค่อยเหมือนชาวบ้านเท่าไร สำหรับในส่วนของ text-shadow สามารถที่จะใช้งานได้ใน firefox chrome safari opera ซึ่งจะเห็นว่าตระกูล ie ไม่มีรุ่นไหนที่สนับสนุนเลย(เวลาเขียนเว็บโคตรเกลียด ie เลย)

สำหรับในส่วนของการใช้งานหากเป็นเบราเซอร์ที่สนันสนุนสามารถใช้งาน

text-shadow: 2px 2px 2px #000;

โดยในส่วนของ ตัวแรก 2px คือเงาไปด้านว่าเท่าไร ค่าตัวที่ เงาลงล่าง 2 px และ 2px อีกตัวคือความฟุ้งกระจายครับ ส่วนอันสุดท้ายคือสีของเงา แต่สำหรับหากว่าต้องการให้ ie เห็นด้วยเราจำเป็นต้องพึ่ง jQuery โดยใช้ plugins ที่ชื่อว่า Drop Shadow สำหรับตัวอย่างสามารถดูได้ที่ http://dropshadow.webvex.limebits.com/ ซึ่งในการใช้จริงก็ง่ายมากครับพวกแค่าเรา เอา jQuery + DropShadow plugins มาไว้ในหน้าเว็บก็สามารถใช้งานได้แล้วครับ

<script type="text/javascript">
	$(document).ready(function(){
		$("#headerShadow").dropShadow();
	});
</script>

สำหรับ property ของ dropShadow() มีดังนี้ครับ
left : 2 //ระยะเงาแนวนอน
top : 2 //ระยะเงานแนวตั้ง
blue : 2 // ความฟุ้งกระจาย
opacity: 0.5 // ความโปร่งใส
color: #fff //สีของเงา
swap: true //เปลี่ยนทิศเงา

การสร้าง script สำหรับให้ทุกตัวมีเงาอัตโนมัติ
ผมว่าหลายคนคงอยากที่จะเขียน script ในส่วนของการสั่งให้มีการสร้างเงแค่ครั้งเดียวนะครับ

      function reloadProgressBar(){
                $('.drop-shadow').each(
                function(){
                    value = $(this).text();
                    $(this).dropShadow();
                }
            );

ที่มา

http://dropshadow.webvex.limebits.com/

http://www.hotdog-x.com/programming-tips/html-shadow-with-jquery/

http://plugins.jquery.com/project/DropShadow

98 views