গত কাল একটা ওয়ার্ডপ্রেস এর কাজ করতে গিয়ে খুঁজে পেলাম । ব্লগ এ ব্যবহার করে মন্তব্য করবেন । ভালো না লাগলে জানবেন কিন্তু কোন বাজে ভাষা ব্যবহার করে নয় ।

কোড গুলো কপি করে ব্লজ্ঞাররা Html/JavaScript উইগেট নিয়ে পেস্ট করে সেভ করুন, আর ওয়ার্ডপ্রেস এর জন্য Text উইগেট নিয়ে পেস্ট করে সেভ করুন । ডেমো দেখতে এখানে ক্লিক করুন ।

১ ম ইফেক্ট  ঃ

<style>

h1 {

font-size: 75px;

font-family:medula one;

color:fff;

text-shadow: 0 1px 0 #ccc,

               0 2px 0 #c9c9c9,

               0 3px 0 #bbb,

               0 4px 0 #b9b9b9,

               0 5px 0 #aaa,

               0 6px 1px rgba(0,0,0,.1),

               0 0 5px rgba(0,0,0,.1),

               0 1px 3px rgba(0,0,0,.3),

               0 3px 5px rgba(0,0,0,.2),

               0 5px 10px rgba(0,0,0,.25),

               0 10px 10px rgba(0,0,0,.2),

               0 20px 20px rgba(0,0,0,.15);

-webkit-transition: all .3s ease-out;

   -moz-transition: all .3s ease-out;

   -o-transition: all .3s ease-out;

   transition: all .3s ease-out;

}

h1:hover{

 -moz-transform: scale(1.2);

   -webkit-transform: scale(1.2);

   -o-transform: scale(1.2);

   transform: scale(1.2);

}

</style>

<div align="center" style="width:600px;">

<h1>যে লেখাকে আপনি ইফেক্ট দিতে চান ।</h1></div>

২ য় ইফেক্ট  ঃ

<script type="text/javascript" src="http://andreashommel.net/sandbox/lettering/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://andreashommel.net/sandbox/lettering/jquery.lettering-0.6.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Medula+One' rel='stylesheet' type='text/css'>
<style>

h1 {
font-size: 75px;
font-family:medula one;
color:fff;
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

h1 span {
 display:inline-block;
 -webkit-transition:all 0.2s ease-out;
}

h1 span:hover {
 -moz-transform:scale(1.3);
 -webkit-transform:scale(1.3);
}

</style>

<h1 class="sexy">www.freelancingtutorials.blogspot.com</h1>

<script language="javascript">
$(document).ready(function() {
  $(".sexy").lettering();
});
</script> </link>

৩ য় ইফেক্ট ঃ
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
#vibrate h1 span {
display: inline-block;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
}

#vibrate h1:hover span {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-webkit-animation: amaz 0.2s linear infinite 0.3s;
-moz-animation: amaz 0.2s linear infinite 0.3s;
}

@-webkit-keyframes amaz {
 0% {
 -webkit-transform: rotate(0) scale(1.3);
 }
 25% {
 -webkit-transform: rotate(5deg) scale(1.3);
 }
 50% {
 -webkit-transform: rotate(0deg) scale(1.3);
 }
 75% {
 -webkit-transform: rotate(-5deg) scale(1.3);
 }
 100% {
 -webkit-transform: rotate(0) scale(1.3);
 }
}

@-moz-keyframes amaz {
 0% {
 -moz-transform: rotate(0) scale(1.3);
 }
 25% {
 -moz-transform: rotate(5deg) scale(1.3);
 }
 50% {
 -moz-transform: rotate(0deg) scale(1.3);
 }
 75% {
 -moz-transform: rotate(-5deg) scale(1.3);
 }
 100% {
 -moz-transform: rotate(0) scale(1.3);
 }
}
</style>
<div id="vibrate" style="width:600px;">
<h1>What <span>R</span> you doing here ?</h1></div>

৪র্থ ইফেক্ট ঃ
<style>
h1 {
font-size: 75px;
font-family:medula one;
color:fff;
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

span
{
cursor:pointer;
-webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}

span#char1:hover {
color: red;

}

span#char2:hover {
  color: yellow;

}

span#char3:hover {
  color: Green;

}

span#char4:hover {
  color: maroon;

}

span#char5:hover {
  color: blue;

}

span#char6:hover {
  color: pink;

}

span#char7:hover {
  color: orange;

}

span#char8:hover {
  color: purple;

}

</style>
<div style="width:600px;">
<h1>
<span id="char1">F</span>
<span id="char2">r</span>
<span id="char3">e</span>
<span id="char4">e</span>
<span id="char5">l</span>
<span id="char6">a</span>
<span id="char7">n</span>
<span id="char8">c</span>
<span id="char1">i</span>
<span id="char2">n</span>
<span id="char3">g</span>
<span id="char4">t</span>
<span id="char5">u</span>
<span id="char6">t</span>
<span id="char7">o</span>
<span id="char8">r</span>
</h1></div>

ভালো লাগলে জানাবেন । এই ব্লগ এ প্রকাশিত ।