Text Shadow Using jQuery

D E M O Text Shadow menggunakan jQuery Text Shadow

h1 {
 font: 22px Droid Serif;
 font-weight: bolder;
 padding: 5px 10px;
 text-align: center;
 }
h2 {
 font: 18px Droid Serif;
 padding: 3px 10px;
 text-align: center;
 font-weight:700;
 }

Text Shadow Using jQuery class="shadow-b"

h2.shadow-b {
 color: #222;
 text-shadow: 0px 1px 1px #fff;
 border: 1px solid #999900;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0px 2px 12px #000;
 -moz-box-shadow: 0px 2px 12px #000;
 box-shadow: 0px 3px 12px #000;
 background: #888;
 margin: 10px auto; 
 }

Text Shadow Using jQuery class="shadow-1"

h1.shadow-1 {
 color:#0066FF;
 text-shadow: 1px 2px 2px #eee;
 border: 1px solid #696;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0px 3px 3px #666;
 -moz-box-shadow: 0px 3px 3px #666;
 box-shadow: 0px 3px 3px #666;
 background: url(http://i37.tinypic.com/rsg8bc/tantytm/bgFadeRedV95.png) center repeat-x 
 }

Text Shadow Using jQuery class="shadow-2"

h1.shadow-2 {
 color: #eee;
 text-shadow: 2px 2px 5px #000;
 background: #999 url(http://i45.tinypic.com/33z2wiq.jpg) top left repeat-x;
 border: 2px solid #f9ac78;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 margin: 15px auto; 
 }

Text Shadow Using jQuery class="shadow-d"

h2.shadow-d {
 color: #222;
 text-shadow: 0px 0px 2px red;
 border: 1px solid #999900;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0px 2px 12px #000;
 -moz-box-shadow: 0px 2px 12px #000;
 box-shadow: 0px 3px 12px #000;
 background: #eee;
 margin: 10px auto; 
 }     

Text Shadow Using jQuery class="shadow-3"

h1.shadow-3 { 
 color:#990000;
 text-shadow: 0px 2px 2px #FF9900;
 border: 1px solid #696;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: #666 0px 3px 3px;
 -moz-box-shadow: #666 0px 3px 3px;
 box-shadow: #666 0px 3px 3px;
 background: #B6A0B1 url(http://i35.tinypic.com/xdb6di/tantytm/bgFade-1V100.png) top left repeat-x;
 margin: 15px auto; 
 }

Text Shadow Using jQuery class="shadow-c"

h2.shadow-c {
 color: #222;
 text-shadow: 0px 1px 1px #fff;
 border: 1px solid #999900;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0px 2px 12px #000;
 -moz-box-shadow: 0px 2px 12px #000;
 box-shadow: 0px 3px 12px #000;
 background: #993300;
 margin: 10px auto; 
 }

Text Shadow Using jQuery class="shadow-4"

h1.shadow-4 {
 color: #666;
 text-shadow: 0px 1px 0px #ccc;
 background: #000;
 border: 2px solid #666;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 margin: 15px auto;  
 }

Text Shadow Using jQuery class="shadow-a"

h2.shadow-a {
 color: #eee;
 text-shadow: 2px 2px 2px #000;
 border: 1px solid #999900;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow:1px 3px 20px rgba(0,0,0,1.0);
 -moz-box-shadow:1px 3px 20px rgba(0,0,0,1.0);
 box-shadow:1px 3px 20px rgba(0,0,0,1.0);
 background: #666;
 margin: 15px auto; 
 }

Text Shadow using jQuery ===> p class="satu"

p.satu {
 font: 16px Sans-serif;
 font-weight: bold;
 color:white;
 line-height:20px;
 text-shadow: 1px 2px 2px #ddd;
 }
p.dua {
 font: 16px Sans-serif;
 font-weight: bold;
 color:black;
 line-height:20px;
 text-shadow: 0px 1px 1px #fff;
 }

Text Shadow using jQuery ===> p class="dua"

Untuk membaca tutorialnya silahkan KLIK link di bawah ini :

Tutorial jQuery Text Shadow