ဘေလာ့မွာ CSS3 သံုးျပီး3D ထည့္ခ်င္ရင္

အေပၚဆံုးမွာပါရွိသည့္ ရည္ရြယ္ခ်က္ ႏွင့္ ဆက္သြယ္ရန္ ကိုအရင္ဖတ္ေပးပါ

အခုတင္တာေလးကေတာ့မိမိဘေလာ့မွာဘာSoftwareမွသံုးစရာမလိုဘဲ3DTextေလးလုပ္နည္းေလးပါ။Css3ကုဒ္ကိုသံုးတာေပါ့ေနာ္။ကုဒ္ကေတာ့ရွင္းပါတယ္။ျပထားေပးပါတယ္။စာလံုးအျပာေတြေရးထားတဲ႔ေနရာမွာမိမိၾကိဳက္တဲ့စသားေျပာင္းထည့္ေပးလို႕ရပါတယ္။http://mmblogtutorial.blogspot.com/ေနရာမွာမိမိၾကိဳက္တဲ့လင့္ခ္နဲ႕အစားထိုးေပးလိုက္ပါ။

Codeထည့္ရန္Layout>>Add a Gadget>>HTML/JavaScript Add ထည့္ေပးလိုက္ပါ။

<style>

#animationWrapper  {

  width:200px;

  font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;

  background:#222;

  padding:40px;

}

/* link which encapsulates SPANs */

#animationWrapper a {

  font-weight: 800;

  text-transform: uppercase;

  font-size: 42px;

  line-height: 0.9em;

  margin-bottom: 10px;

  display: block;

  position: relative;

  color: #E58;

  text-decoration: none

}

/* span and a - "workers" */

#animationWrapper a, #animationWrapper span {

  -webkit-transition: all 0.12s ease-out;

  -moz-transition: all 0.12s ease-out;

  -o-transition: all 0.12s ease-out;

  -ms-transition: all 0.12s ease-out;

  transition: all 0.12s ease-out;

}

#animationWrapper span {

  display: block;

  color: #555;

  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;

}

/* special size for the first item */

#animationWrapper .span1 {

  font-size: 56px;

  line-height: 0.8em;

}

#animationWrapper a:hover {

    color: #fff ;

    top: -3px;

    left: -3px;

}

/* all spans become white */

#animationWrapper a:hover span {

  color:#fff;

}

/* different colors for each SPAN */

#animationWrapper a:hover .span1 {

    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;

}

#animationWrapper a:hover .span2 {

    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;

}

#animationWrapper a:hover .span3 {

    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;

}

#animationWrapper a:hover .span4 {

    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;

}

</style>

<center>

<div id="animationWrapper">

  <a href="http://mmblogtutorial.blogspot.com/">

    <span class="span1">This Blog</span>

    <span class="span2">is</span>

    <span class="span3">Designe By</span>

    <span class="span4">Myanmar Blogger Guide</span>

  </a>

</div>

</center>

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္

Myanmar Blogger Guide