ဘေလာ့မွာ မည္သည့္ေဆာ့၀ဲလ္မွ မသုံးဘဲ 3 D Text စာလုံးေတြေရးနည္း

Posted by : Anonymous Monday, December 1, 2014

မဂၤလာပါ သည္ေန႕ ေရးျဖစ္တာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ မည့္သည့္ေဆာ့၀ဲလ္ေတြမွ အသုံးမျပဳ ဘဲနဲ႕ 3D Text စာလုံးေလး ေရးနည္းကိုဘဲ ျဖစ္ပါတယ္... ဒါေလးကေတာ့ Css3 ကုဒ္နဲ႕ အသုံးျပဳ ေရးသားထားျခင္းျဖစ္တာေၾကာင့္ အသင့္ေပးထားတဲ့ ကုဒ္ေတြကိုဘဲ အသုံးျပဳ ေရးသားလိုက္ပါေနာ္.. ႏွစ္သက္တယ္ဆို ေအာက္မွာ ထည့္နည္းနဲ႕ လိုအပ္တဲ့ ကုဒ္ေတြကို ေပးထားပါတယ္ေတာ္....ေလ့လာလုိက္ပါေနာ္

အသုံးျပဳ နည္း
=======

   ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

/* link which encapsulates SPANs */
#animationWrapper a {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 32px;
  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: 36px;
  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://www.aungsanmks.com">
    <span class="span1">Welcome</span>
    <span class="span2">From</span>
    <span class="span3">My</span>
    <span class="span4">Blogs</span>
  </a>
</div>
</center>

မွတ္ခ်က္ ။ ။ ကုဒ္ေတြထဲမွာ http://www.aungsanmks.com ေနရာ မိမိတို႕႔

ဘေလာ့အမည္အစားထိုးနိဳင္ပါတယ္... ေအာက္ဆုံး ကုဒ္ေတြထဲက

WELCOME

FROM

BLOGS

ဆိုတာေတြမွာ ႏွစ္သက္ရာ စာသားကို ေရးနိဳင္ပါတယ္... ျမန္မာ စာနဲ႕လည္း အသုံးျပဳနိဳင္ပါတယ္။

ကုဒ္ေတြမွာ FONT အရြယ္အစားေတြ အက်ယ္အ၀န္း စတာေတြ နံပါတ္ေတြပါ ပါတယ္.. ၾကိဳက္သလို မိမိဘေလာ့ Widget နဲ႕ ကိုက္ညီေအာင္ ခ်ိန္းနိဳင္ပါတယ္...

ဘေလာ့ခရီးသည္

www.aungsanmks.com