CSS text-shadow + ShlideBar

CSS text-shadow + HTML5 SliderBar
參考資料
CSS Text Level 3
HTML5 Presentation (在裡面有一篇Shodw,可以觀看他的原始碼參考做法,在2599行)
切割法

這是一個簡單的sampe,實際運用，必須用javaScript動態設定抓取css的值給slider的value做初使化才會同步。



0

陰影效果

x= 0 y= 0

<style type="text/css">
#shadow_demo_001
{
 /*text-shadow: x offset y offxet radius*/
 text-shadow: 0px 0px 3px #674ea7;
}
</style>

<span id="_outputValue">0</span>

<input id="_sliderBar" max="30" min="0" type="range" value="0" />

<script type="text/javascript">

$(document).ready(start);

function start()
{ 
 $('#_sliderBar').change(showValue);
}

function showValue(value)
{  
  var newValue = $(this).val();  
  
  //切割css   
   var result = $('#shadow_demo_001').css('text-shadow').match(/(-?\d+px)|(rgb\(.+\))/g);
   //var shadowsX = result[1];  
   var shadowsX  = newValue + 'px';
   var shadowsY = result[2];
   var shadowsSsize = result[3];
   var shadowsColor = result[0];
   var newShadow =  shadowsX +" "+ shadowsY + " " + shadowsSsize + " "+ shadowsColor;  
  
  //更新css
  $("#shadow_demo_001").css({'text-shadow': newShadow})
  //更新<span>的內容
  $("#_outputValue").html(newValue);
}
</script>

<h1>
　<span id="shadow_demo_001">陰影效果</span>
</h1>