Kp3နည္းပညာ၊၄၈၉၊ဘေလာ့မွာCss3ကိုသံုးျပီး3DTextထည့္ခ်င္ရင္

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

Sample
Example
Effects
Blogger

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

view plainprint?

1. <style>  
2. #animationWrapper  {  
3.   width:200px;  
4.   font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;  
5.   background:#222;  
6.   padding:40px;  
7. }  
8.   
9. /* link which encapsulates SPANs */  
10. #animationWrapper a {  
11.   font-weight: 800;  
12.   text-transform: uppercase;  
13.   font-size: 42px;  
14.   line-height: 0.9em;  
15.   margin-bottom: 10px;  
16.   display: block;  
17.   position: relative;  
18.   color: #E58;  
19.   text-decoration: none  
20. }  
21.   
22. /* span and a - "workers" */  
23. #animationWrapper a, #animationWrapper span {  
24.   -webkit-transition: all 0.12s ease-out;  
25.   -moz-transition: all 0.12s ease-out;  
26.   -o-transition: all 0.12s ease-out;  
27.   -ms-transition: all 0.12s ease-out;  
28.   transition: all 0.12s ease-out;  
29. }  
30.   
31. #animationWrapper span {  
32.   display: block;  
33.   color: #555;  
34.   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;  
35. }  
36.   
37. /* special size for the first item */  
38. #animationWrapper .span1 {  
39.   font-size: 56px;  
40.   line-height: 0.8em;  
41. }  
42.   
43. #animationWrapper a:hover {  
44.     color: #fff ;  
45.     top: -3px;  
46.     left: -3px;  
47. }  
48.   
49. /* all spans become white */  
50. #animationWrapper a:hover span {  
51.   color:#fff;  
52. }  
53.   
54. /* different colors for each SPAN */  
55. #animationWrapper a:hover .span1 {  
56.     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;  
57. }  
58.   
59. #animationWrapper a:hover .span2 {  
60.     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;  
61. }  
62.   
63. #animationWrapper a:hover .span3 {  
64.     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;  
65. }  
66.   
67. #animationWrapper a:hover .span4 {  
68.     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;  
69. }  
70. </style>  
71. <center>  
72. <div id="animationWrapper">  
73.   <a href="http://kp3family.blogspot.com">  
74.     <span class="span1">Sample</span>  
75.     <span class="span2">Example</span>  
76.     <span class="span3">Effects</span>  
77.     <span class="span4">Blogger</span>  
78.   </a>  
79. </div>  
80. </center>  

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု