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>

CSS3 Borders - border-[top or bottom]-[left or right]-radius

CSS3 module: Border (選擇其中一角做圓角)
參考資料：W3C module Border

border-top-right-radius:10px;

border-top-left-radius:10px;

border-bottom-right-radius:10px;

border-bottom-left-radius:10px;

<style type="text/css"> 
.classBorderB
{
 width:220px;
 height:50px;
 background-color:LemonChiffon;
 border:1px solid LightSkyBlue;
 margin-top:5px; 
 margin-left:10%; 
 margin-right:auto; 
 margin-bottom:20px; 
}

#testDiv1
{
 border:2px solid;
 border-top-right-radius:10px;
 -moz-border-top-right-radius:10 /* Firefox */
 -webkit-border-top-right-radius:10 /* Safari and Chrome */
 -o-border-top-right-radius:10 /* Opera */
}
#testDiv4
{
 border:2px solid;
 border-top-left-radius:10px;:10px;
 -moz-border-top-left-radius:10px; /* Firefox */
 -webkit-border-top-left-radius:10px; /* Safari and Chrome */
 -o-border-top-left-radius:10px; /* Opera */
}
#testDiv2
{
 border:2px solid;
 border-bottom-right-radius:10px;
 -moz-border-top-right-radius:10 /* Firefox */
 -webkit-border-top-right-radius:10 /* Safari and Chrome */
 -o-border-top-right-radius:10 /* Opera */
}
#testDiv3
{
 border:2px solid;
 border-bottom-left-radius:10px;
 -moz-border-bottom-left-radius:10px; /* Firefox */
 -webkit-border-bottom-left-radius:10px; /* Safari and Chrome */
 -o-border-bottom-left-radius:10px; /* Opera */
}

</style>
<div class="classBorderB" id="testDiv1">border-top-right-radius:10px;</div>
<div class="classBorderB" id="testDiv4">border-top-left-radius:10px;</div>
<div class="classBorderB" id="testDiv2">border-bottom-right-radius:10px;</div>
<div class="classBorderB" id="testDiv3">border-bottom-left-radius:10px;</div>

CSS3 Borders - Style

CSS3 module: Border Style
參考資料：W3C module Border

dotted

dashed

solid

double

dot-dash 效果出不來

dot-dot-dash 效果出不來

wave 效果出不來

groove

ridge

inset

outset

CSS3 Borders - radius

CSS3 module: Border
參考資料：W3C module Border

border-radius

<style type="text/css">
.divClass
{
 width:200px;
 height:50px;
 background-color:LemonChiffon;
 border:1px solid LightSkyBlue;
 margin-top:5px; 
 margin-left:10%; 
 margin-right:auto; 
 margin-bottom:5px; 
}

#testDiv1
{
 border:2px solid;
 border-radius:10px;
 -moz-border-radius:10px; /* Firefox */
 -webkit-border-radius:10px; /* Safari and Chrome */
 -o-border-radius:10px; /* Opera */
}
</style>
<div class="ClassRadiusA" id="testDiv1">border-radius</div>

CSS3 transform:rotate( deg )

CSS3目前有支援的瀏覽器

• Firefox
• Safari
• Chrome
• Opera 

IE8需要透過其他外掛套件來支援，IE9會開始支援HTML5與CSS3

這是div

這是div1,旋轉90deg,與Flex不同,基準點不是左上旋轉。

這是div2,連字也會旋轉,轉45

我們可以看到CSS3旋轉的點是以DIV的中心為基準

HTML+CSS3碼

<style type="text/css"> 
.divClass
{
width:200px;
height:100px;
background-color:LemonChiffon;
border:1px solid LightSkyBlue;
}
div#_rotate_1
{
transform:rotate(90deg);
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

div#_rotate_2
{
transform:rotate(45deg);
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
</style>

<div class="divClass">
 這是div
</div>
<div class="divClass" id="_rotate_1">
  這是div1,旋轉90deg,與Flex不同,基準點不是左上旋轉。</div>
<div class="divClass" id="_rotate_2">
  這是div2,連字也會旋轉,轉45
</div>

參考資料
維基百科webkit
w3Schools