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>