3d css text Generator stylish design

<br>
<select class="angel"style="width:100px;text-align :center ;" id="font">
<optgroup label="Web Safe Fonts">
<option value="1">Arial</option>
<option value="2">Arial Black</option>
<option value="3">Bookman</option>
<option value="4">Comic Sans</option>
<option value="5">Courier</option>
<option value="6">Garamond</option>
<option value="7">Geneva</option>
<option value="8">Georgia</option>
<option selected="selected"value="9">Helvetica</option>
<option value="10">Tahoma</option>
<option value="11">Times</option>
<option value="12">Verdana</option>
</optgroup>
<optgroup label="Icons">
<option value="0">Iconic Icons</option>
</optgroup></select>

<div class="Angle">
<label for="Angle"style="text-align:center ;"> Angle</label>
<br/>
<select class="angel"id="angle">
<option value="0">0°</option>
<option value="45">45°</option>
<option value="90">90°</option>
<option value="135">135°</option>
<option value="180">180°</option>
<option value="225">225°</option>
<option value="270">270°</option>
<option value="315"selected>315°</option>
<option value="360">360°</option>
</select></div>

<button class="cl"id="generateColor">
  Generate Color</button>
   <br>     
<div class="c">
<input type="checkbox"id="check1" checked="yes"/>

<label >Height</label>
<input type="hidden"name="height"id="height"value="6">
 <div class="pp"id="fontHeightSlider"></div></div>

<label> Height Gradient </label>
<input type="hidden" name="heightGradientMin" id="heightGradientMin" value="10">

<div class="control">
<label for="height">Shadow Opacity</label></label>
<input type="hidden" name="shadowOpacity" id="shadowOpacity" value=".6">
<div class="pp"id="shadowOpacitySlider"></div>
</div>

<br>
<label for="code">Your Generated Code</label><div >

<button class="btn"id="copyButton">Button </button>

<button class="btn1"id="refreshButton">Refresh</button>

}.Angle{
text-align :right ;
margin-top :-52px ;
}.c{
margin-top   : -26px;
}.r{
margin-top :20px ;
border-radius: 40px;     
width :90%; 
}.colorpicker{
width:356px;
height:176px;
overflow:hidden;
 position:absolute;
 background:url(images/colorpicker_background.png);
 font-family:Arial,
 Helvetica,sans-serif;display:none
 
}.cl{   
margin-right:10px;
transform: translateY( -100%); 
padding :8px 10px ;
background-image: radial-gradient(circle at 62.74% 2.47%, #ffb233 0, #ffa124 25%, #ff8d10 50%, #f67800 75%, #ef6500 100%);
color :white ;
font-weight :bold ;
border-radius :5px ;
font-size :16px ;
border :1px solid #ffffff ;
box-shadow:0 .1rem .15rem rgba(40,36,89,.15),0 .25rem .5rem rgba(40,36,89,.15),0 .75rem 1.75rem rgba(40,36,89,.2);

}.cl:hover {
background:linear-gradient(to right, rgb(0, 17, 128), rgb(0, 0, 0));
  color :#ffffff ;
transition: all 0.30s;

}.code{
width :90%;
padding :10px ;
text-align :center ;
height :auto ;
margin-top :20px ;
background-color :#000000 ;
padding :10px ;
color :white ;
border :2px solid #ffffff ;
border-radius :10px ;
box-shadow:0 .1rem .15rem rgba(40,36,89,.15),0 .25rem .5rem rgba(40,36,89,.15),0 .75rem 1.75rem rgba(40,36,89,.2);

}.btn{
margin-top :20px ;
padding :8px 30px ;
background-color :#00FF5E ;
background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);

border :1px solid #FFFFFF ;
color :white ;
font-weight :bold ;
border-radius :10px ;
font-size :16px ;
box-shadow:0 .1rem .15rem rgba(40,36,89,.15),0 .25rem .5rem rgba(40,36,89,.15),0 .75rem 1.75rem rgba(40,36,89,.2);

}.btn:hover {
background-color :#000000 ;
background-image :none ;
color :#ffffff ;
transform: translateY(-4px);
transition: all 0.30s;

}.btn1{
margin-top :20px ;
padding :8px 30px ;
background-color :#F2004B ;
background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);

}.btn1:hover {
background-color :#000000 ;
background-image :none ;
color :#ffffff ;
transform: translateY(-4px);
transition: all 0.30s;

}.pp{
width: 80%;
margin-bottom :20px ;
-webkit-appearance: none;
appearance: none;
height: 5px;
background: #030B56 ;
outline: none;
border-radius :5px ;
box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);

}.ui-slider { 
position: 
relative; 
text-align: 
left; 
border:none; 
margin-top:1em

}.ui-slider .ui-slider-handle { 
 position: absolute;
 margin-top :-10px ;
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #FF006D ;

background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;  
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);
  
 
} 
</style>

jQuery.effects||function(f,j){function n(c){var a;if(c&&c.constructor==Array&&c.length==3)return c;if(a=/rgb$\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*$/.exec(c))return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)];if(a=/rgb$\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*$/.exec(c))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55];if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(c))return[parseInt(a[1],
16),parseInt(a[2],16),parseInt(a[3],16)];if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(c))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)];if(/rgba$0, 0, 0, 0$/.exec(c))return o.transparent;return o[f.trim(c).toLowerCase()]}function s(c,a){var b;do{b=f.curCSS(c,a);if(b!=""&&b!="transparent"||f.nodeName(c,"body"))break;a="backgroundColor"}while(c=c.parentNode);return n(b)}function p(){var c=document.defaultView?document.defaultView.getComputedStyle(this,null):this.currentStyle,
a={},b,d;if(c&&c.length&&c[0]&&c[c[0]])for(var e=c.length;e--;){b=c[e];if(typeof c[b]=="string"){d=b.replace(/\-(\w)/g,function(g,h){return h.toUpperCase()});a[d]=c[b]}}else for(b in c)if(typeof c[b]==="string")a[b]=c[b];return a}function q(c){var a,b;for(a in c){b=c[a];if(b==null||f.isFunction(b)||a in t||/scrollbar/.test(a)||!/color/i.test(a)&&isNaN(parseFloat(b)))delete c[a]}return c}function u(c,a){var b={_:0},d;for(d in a)if(c[d]!=a[d])b[d]=a[d];return b}function k(c,a,b,d){if(typeof c=="object"){d=
a;b=null;a=c;c=a.effect}if(f.isFunction(a)){d=a;b=null;a={}}if(typeof a=="number"||f.fx.speeds[a]){d=b;b=a;a={}}if(f.isFunction(b)){d=b;b=null}a=a||{};b=b||a.duration;b=f.fx.off?0:typeof b=="number"?b:b in f.fx.speeds?f.fx.speeds[b]:f.fx.speeds._default;d=d||a.complete;return[c,a,b,d]}function m(c){if(!c||typeof c==="number"||f.fx.speeds[c])return true;if(typeof c==="string"&&!f.effects[c])return true;return false}f.effects={};f.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor",
"borderTopColor","borderColor","color","outlineColor"],function(c,a){f.fx.step[a]=function(b){if(!b.colorInit){b.start=s(b.elem,a);b.end=n(b.end);b.colorInit=true}b.elem.style[a]="rgb("+Math.max(Math.min(parseInt(b.pos*(b.end[0]-b.start[0])+b.start[0],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[1]-b.start[1])+b.start[1],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[2]-b.start[2])+b.start[2],10),255),0)+")"}});var o={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,
0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,
211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]},r=["add","remove","toggle"],t={border:1,borderBottom:1,borderColor:1,borderLeft:1,borderRight:1,borderTop:1,borderWidth:1,margin:1,padding:1};f.effects.animateClass=function(c,a,b,
d){if(f.isFunction(b)){d=b;b=null}return this.each(function(){f.queue(this,"fx",function(){var e=f(this),g=e.attr("style")||" ",h=q(p.call(this)),l,v=e.attr("className");f.each(r,function(w,i){c[i]&&e[i+"Class"](c[i])});l=q(p.call(this));e.attr("className",v);e.animate(u(h,l),a,b,function(){f.each(r,function(w,i){c[i]&&e[i+"Class"](c[i])});if(typeof e.attr("style")=="object"){e.attr("style").cssText="";e.attr("style").cssText=g}else e.attr("style",g);d&&d.apply(this,arguments)});h=f.queue(this);l=
h.splice(h.length-1,1)[0];h.splice(1,0,l);f.dequeue(this)})})};f.fn.extend({_addClass:f.fn.addClass,addClass:function(c,a,b,d){return a?f.effects.animateClass.apply(this,[{add:c},a,b,d]):this._addClass(c)},_removeClass:f.fn.removeClass,removeClass:function(c,a,b,d){return a?f.effects.animateClass.apply(this,[{remove:c},a,b,d]):this._removeClass(c)},_toggleClass:f.fn.toggleClass,toggleClass:function(c,a,b,d,e){return typeof a=="boolean"||a===j?b?f.effects.animateClass.apply(this,[a?{add:c}:{remove:c},
b,d,e]):this._toggleClass(c,a):f.effects.animateClass.apply(this,[{toggle:c},a,b,d])},switchClass:function(c,a,b,d,e){return f.effects.animateClass.apply(this,[{add:a,remove:c},b,d,e])}});f.extend(f.effects,{version:"1.8.7",save:function(c,a){for(var b=0;b<a.length;b++)a[b]!==null&&c.data("ec.storage."+a[b],c[0].style[a[b]])},restore:function(c,a){for(var b=0;b<a.length;b++)a[b]!==null&&c.css(a[b],c.data("ec.storage."+a[b]))},setMode:function(c,a){if(a=="toggle")a=c.is(":hidden")?"show":"hide";
return a},getBaseline:function(c,a){var b;switch(c[0]){case "top":b=0;break;case "middle":b=0.5;break;case "bottom":b=1;break;default:b=c[0]/a.height}switch(c[1]){case "left":c=0;break;case "center":c=0.5;break;case "right":c=1;break;default:c=c[1]/a.width}return{x:c,y:b}},createWrapper:function(c){if(c.parent().is(".ui-effects-wrapper"))return c.parent();var a={width:c.outerWidth(true),height:c.outerHeight(true),"float":c.css("float")},b=f("<div></div>").addClass("ui-effects-wrapper").css({fontSize:"100%",
background:"transparent",border:"none",margin:0,padding:0});c.wrap(b);b=c.parent();if(c.css("position")=="static"){b.css({position:"relative"});c.css({position:"relative"})}else{f.extend(a,{position:c.css("position"),zIndex:c.css("z-index")});f.each(["top","left","bottom","right"],function(d,e){a[e]=c.css(e);if(isNaN(parseInt(a[e],10)))a[e]="auto"});c.css({position:"relative",top:0,left:0})}return b.css(a).show()},removeWrapper:function(c){if(c.parent().is(".ui-effects-wrapper"))return c.parent().replaceWith(c);
return c},setTransition:function(c,a,b,d){d=d||{};f.each(a,function(e,g){unit=c.cssUnit(g);if(unit[0]>0)d[g]=unit[0]*b+unit[1]});return d}});f.fn.extend({effect:function(c){var a=k.apply(this,arguments),b={options:a[1],duration:a[2],callback:a[3]};a=b.options.mode;var d=f.effects[c];if(f.fx.off||!d)return a?this[a](b.duration,b.callback):this.each(function(){b.callback&&b.callback.call(this)});return d.call(this,b)},_show:f.fn.show,show:function(c){if(m(c))return this._show.apply(this,arguments);
else{var a=k.apply(this,arguments);a[1].mode="show";return this.effect.apply(this,a)}},_hide:f.fn.hide,hide:function(c){if(m(c))return this._hide.apply(this,arguments);else{var a=k.apply(this,arguments);a[1].mode="hide";return this.effect.apply(this,a)}},__toggle:f.fn.toggle,toggle:function(c){if(m(c)||typeof c==="boolean"||f.isFunction(c))return this.__toggle.apply(this,arguments);else{var a=k.apply(this,arguments);a[1].mode="toggle";return this.effect.apply(this,a)}},cssUnit:function(c){var a=this.css(c),
b=[];f.each(["em","px","%","pt"],function(d,e){if(a.indexOf(e)>0)b=[parseFloat(a),e]});return b}});f.easing.jswing=f.easing.swing;f.extend(f.easing,{def:"easeOutQuad",swing:function(c,a,b,d,e){return f.easing[f.easing.def](c,a,b,d,e)},easeInQuad:function(c,a,b,d,e){return d*(a/=e)*a+b},easeOutQuad:function(c,a,b,d,e){return-d*(a/=e)*(a-2)+b},easeInOutQuad:function(c,a,b,d,e){if((a/=e/2)<1)return d/2*a*a+b;return-d/2*(--a*(a-2)-1)+b},easeInCubic:function(c,a,b,d,e){return d*(a/=e)*a*a+b},easeOutCubic:function(c,
a,b,d,e){return d*((a=a/e-1)*a*a+1)+b},easeInOutCubic:function(c,a,b,d,e){if((a/=e/2)<1)return d/2*a*a*a+b;return d/2*((a-=2)*a*a+2)+b},easeInQuart:function(c,a,b,d,e){return d*(a/=e)*a*a*a+b},easeOutQuart:function(c,a,b,d,e){return-d*((a=a/e-1)*a*a*a-1)+b},easeInOutQuart:function(c,a,b,d,e){if((a/=e/2)<1)return d/2*a*a*a*a+b;return-d/2*((a-=2)*a*a*a-2)+b},easeInQuint:function(c,a,b,d,e){return d*(a/=e)*a*a*a*a+b},easeOutQuint:function(c,a,b,d,e){return d*((a=a/e-1)*a*a*a*a+1)+b},easeInOutQuint:function(c,
a,b,d,e){if((a/=e/2)<1)return d/2*a*a*a*a*a+b;return d/2*((a-=2)*a*a*a*a+2)+b},easeInSine:function(c,a,b,d,e){return-d*Math.cos(a/e*(Math.PI/2))+d+b},easeOutSine:function(c,a,b,d,e){return d*Math.sin(a/e*(Math.PI/2))+b},easeInOutSine:function(c,a,b,d,e){return-d/2*(Math.cos(Math.PI*a/e)-1)+b},easeInExpo:function(c,a,b,d,e){return a==0?b:d*Math.pow(2,10*(a/e-1))+b},easeOutExpo:function(c,a,b,d,e){return a==e?b+d:d*(-Math.pow(2,-10*a/e)+1)+b},easeInOutExpo:function(c,a,b,d,e){if(a==0)return b;if(a==
e)return b+d;if((a/=e/2)<1)return d/2*Math.pow(2,10*(a-1))+b;return d/2*(-Math.pow(2,-10*--a)+2)+b},easeInCirc:function(c,a,b,d,e){return-d*(Math.sqrt(1-(a/=e)*a)-1)+b},easeOutCirc:function(c,a,b,d,e){return d*Math.sqrt(1-(a=a/e-1)*a)+b},easeInOutCirc:function(c,a,b,d,e){if((a/=e/2)<1)return-d/2*(Math.sqrt(1-a*a)-1)+b;return d/2*(Math.sqrt(1-(a-=2)*a)+1)+b},easeInElastic:function(c,a,b,d,e){c=1.70158;var g=0,h=d;if(a==0)return b;if((a/=e)==1)return b+d;g||(g=e*0.3);if(h<Math.abs(d)){h=d;c=g/4}else c=
g/(2*Math.PI)*Math.asin(d/h);return-(h*Math.pow(2,10*(a-=1))*Math.sin((a*e-c)*2*Math.PI/g))+b},easeOutElastic:function(c,a,b,d,e){c=1.70158;var g=0,h=d;if(a==0)return b;if((a/=e)==1)return b+d;g||(g=e*0.3);if(h<Math.abs(d)){h=d;c=g/4}else c=g/(2*Math.PI)*Math.asin(d/h);return h*Math.pow(2,-10*a)*Math.sin((a*e-c)*2*Math.PI/g)+d+b},easeInOutElastic:function(c,a,b,d,e){c=1.70158;var g=0,h=d;if(a==0)return b;if((a/=e/2)==2)return b+d;g||(g=e*0.3*1.5);if(h<Math.abs(d)){h=d;c=g/4}else c=g/(2*Math.PI)*Math.asin(d/
h);if(a<1)return-0.5*h*Math.pow(2,10*(a-=1))*Math.sin((a*e-c)*2*Math.PI/g)+b;return h*Math.pow(2,-10*(a-=1))*Math.sin((a*e-c)*2*Math.PI/g)*0.5+d+b},easeInBack:function(c,a,b,d,e,g){if(g==j)g=1.70158;return d*(a/=e)*a*((g+1)*a-g)+b},easeOutBack:function(c,a,b,d,e,g){if(g==j)g=1.70158;return d*((a=a/e-1)*a*((g+1)*a+g)+1)+b},easeInOutBack:function(c,a,b,d,e,g){if(g==j)g=1.70158;if((a/=e/2)<1)return d/2*a*a*(((g*=1.525)+1)*a-g)+b;return d/2*((a-=2)*a*(((g*=1.525)+1)*a+g)+2)+b},easeInBounce:function(c,
a,b,d,e){return d-f.easing.easeOutBounce(c,e-a,0,d,e)+b},easeOutBounce:function(c,a,b,d,e){return(a/=e)<1/2.75?d*7.5625*a*a+b:a<2/2.75?d*(7.5625*(a-=1.5/2.75)*a+0.75)+b:a<2.5/2.75?d*(7.5625*(a-=2.25/2.75)*a+0.9375)+b:d*(7.5625*(a-=2.625/2.75)*a+0.984375)+b},easeInOutBounce:function(c,a,b,d,e){if(a<e/2)return f.easing.easeInBounce(c,a*2,0,d,e)*0.5+b;return f.easing.easeOutBounce(c,a*2-e,0,d,e)*0.5+d*0.5+b}})}(jQuery);
;

//set margin of absolutely positioned controls to be half of the window width 
    windowWidth = $(window).width();
    controlWidth = ($('#controls').outerWidth());
    controlMargin = (windowWidth / 2) - (controlWidth / 2);
    $('#controls').css('left', '' + controlMargin + 'px');
	
    font = new Array(12);
    font[0] = "'IconicStroke'";
    font[1] = "Arial, sans-serif";
    font[2] = "'Arial Black', sans-serif";
    font[3] = "'Bookman Old Style', serif";
    font[4] = "'Comic Sans MS', cursive";
    font[5] = "Courier, monospace";
    font[6] = "Garamond, serif";
    font[7] = "Geneva, serif";
    font[8] = "Georgia, serif";
    font[9] = "'Helvetica Neue',Helvetica, sans-serif";
    font[10] = "Tahoma, sans-serif";
    font[11] = "'Times New Roman', Times, sans-serif";
    font[12] = "Verdana, sans-serif";
 
//create jQuery UI Elements
  
    fontSize = $('#fontSize').val();
  	fontSet=font[$('#font').val()];
    fontPadding=$('#fontPadding').val();
    fontColor=$('#fontColor').val();

height = $('#height').val();
    heightGradientMin = $('#heightGradientMin').val();
    heightGradientMax = $('#heightGradientMax').val();
   	shadowOpacity = $('#shadowOpacity').val();
   	fontColor = $('#fontColor').val();
   	backgroundColor = $('#backgroundColor').val();
    $('.3DText').css('color', ''+fontColor+'');	
    $('#colorInner').css('backgroundColor', ''+fontColor+'');
    $('body').css('background-color', ''+backgroundColor+'');
    $('#colorInner2').css('backgroundColor', ''+backgroundColor+'');
    $('.fontColor').text(''+fontColor+'');

$('#colorInner').ColorPicker({
   		color:fontColor,
   		
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $('.3DText').css('color', '#' + hex);
            $('#colorInner').css('backgroundColor', '#' + hex);
            $('#fontColor').val('#' + hex);
            $('.fontColor').empty().text('#' + hex);
            textShadow();
        }
    });

$('#colorInner2').ColorPicker({
        color: backgroundColor,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $('body').css('background-color', '#' + hex);
            $('#colorInner2').css('backgroundColor', '#' + hex);
            $('#backgroundColor').val('#' + hex);
           $('.backgroundColor').text('#' + hex);
            textShadow();
        }

});
    
    function changeFont(){
    		fontSet=font[$('#font').val()];
    		fontVal=$('#font').val();
			 fontSize = $('#fontSize').val();
    		if (fontVal==0){
    			fontPadding=20;
    			$("#fontMessage").show();
    		}
    		else{
    			fontPadding=0;
    			$("#fontMessage").hide();
    		}
    		    		
    		$("#fontSizeSlider").slider("value", fontSize);
    		$("#fontSize").val(fontSize);
			$('.3DText').css('font-size',''+fontSize+'px');
       	    $('.3DText').css('font-family', '' + fontSet + '');
       	    $('.3DText').css('padding-bottom',''+fontPadding+'px');
       	    $('.fontFamily').text(fontSet);
       	    $('h1').removeClass('hide');
    }changeFont();
   	
   	$("#font").change(function() {
    	changeFont();
    });
	
    function resetDefaults() {
        $('#font').val(6);
        $('#fontSize').val(134);
        fontSize=  134;
        $('#fontPadding').val(0);
        $('#angle').val(315);
        $('#height').val(6);
        $("#fontSizeSlider").slider("value", 134);
        $("#fontHeightSlider").slider("value", 9);
        $("#heightGradientMin").val(10);
        $("#heightGradientMax").val(87);
        $("#heightGradientSlider").slider('values', 0, 10);
        $("#heightGradientSlider").slider('values', 1, 87);
        $("#shadowOpacity").val(.6);
        $("#shadowOpacitySlider").slider("value", .6);
		
		/*colors*/
        $('#colorInner').ColorPickerSetColor('#ffffff').css('background-color', '#ffffff');
        $('#colorInner2').ColorPickerSetColor('#2fcb53').css('background-color', '#2fcb53');
        $('#fontColor').val('#ffffff');
        $('#backgroundColor').val('#00C6FF');
        $('body').css('background-color', '#00C6FF');
        $('.3DText').css('color', '#ffffff');
        $('.3DText').css('font-size', '124px');
        $('.3DText').css('paddingBottom', '0px');
        $('#check3,#check2').removeAttr('checked');
        $('.3DText').removeClass('underline italic bold');
        changeFont();
        textShadow();
 
    }resetDefaults();
 
    $("#fontSizeSlider").slider({
        range: "min",
        value: fontSize,
        min: 10,
        max: 50,
        slide: function (event, ui) {
            $("#fontSize").val(ui.value);
            textShadow();
        }
    });
    $("#fontSize").val($("#fontSizeSlider").slider("value"));

$("#fontHeightSlider").slider({
        range: "min",
        value: height,
        min: 1,
        max: 20,
        slide: function (event, ui) {
            $("#height").val(ui.value);
            textShadow();
        }
    });
    $("#height").val($("#fontHeightSlider").slider("value"));

$("#heightGradientSlider").slider({
        range: true,
        min: 0,
        max: 255,
        values: [heightGradientMin, heightGradientMax],
        slide: function (event, ui) {
            $("#heightGradientMin").val(ui.values[0]);
            $("#heightGradientMax").val(ui.values[1]);

textShadow();
        }
    });
    $("#heightGradientMin").val($("#heightGradientSlider").slider("values", 0));
    $("#heightGradientMax").val($("#heightGradientSlider").slider("values", 1));

$("#shadowOpacitySlider").slider({
        range: "min",
        min: 0,
        max: 1,
        step: .05,
        value: shadowOpacity,
        slide: function (event, ui) {
            $("#shadowOpacity").val(ui.value);
            textShadow();

}
    });
    $("#shadowOpacity").val($("#shadowOpacitySlider").slider("value"));

//create jQuery UI Interactions
    $("#controls").draggable({
        containment: "body",
        handle: ".move"
    });
    //	$( ".3DText" ).draggable({containment: [0,0,1265,2000], handle:".editorMove" });

//More Interactions
    //button events for sizing the control box
    $(".minimize").live('click', function () {
        $(this).effect("highlight", {
            color: '#a30000'
        }, 500);
        $("#controlsInner").animate({
            height: '20',
            width: '80'
        });
        $(".minimize a").text('+');
        $(".minimize").removeClass('minimize').addClass('maximize');
    });

$(".maximize").live('click', function () {
        $(this).effect("highlight", {
            color: '#a30000'
        }, 500);
        scrollHeight = $("#controlsInner2")[0].scrollHeight;
        $("#controlsInner").animate({
            height: '' + scrollHeight + '',
            width: '500'
        });
        $(".maximize a").text('-');
        $(".maximize").removeClass('maximize').addClass('minimize');
    });

//interactions for the buttons
    $('.reset').click(function () {
        resetDefaults();
        $(this).effect("highlight", {
            color: '#a30000'
        }, 500);
	  $('#resetMessage').show('slow', function() {
			$('#resetMessage').delay(1000).hide('slow')
 	 });
 	 
     });
    $('.close').click(function () {
    	 $(this).effect("highlight", {
            color: '#a30000'
        }, 500);
        $('footer').fadeOut();
 	 });
 	 
    $('#check1').change(function () {
        fontStyle();
    });

$('#check2').change(function () {
        fontStyle();
    });

$('#check3').change(function () {
        fontStyle();
    });    
    
    function fontStyle(){
    	
    	boldCheck = $('#check1').attr('checked'); 
      	italicCheck = $('#check2').attr('checked'); 
    	underlineCheck = $('#check3').attr('checked'); 
       		$('.fontWeight, .fontStyle, .textDecoration').remove();

if(boldCheck==true){
       		$('.3DText').css('font-weight','bold');
       		$('.fontStyles').append('<span class="fontWeight">font-weight:bold;<br/></span>')
       		
    	} 
    	
    	else {
       		$('.3DText').css('font-weight','normal');
       		$('.fontWeight').remove();
    	} 
    	
    	if(italicCheck==true){
       		$('.3DText').css('font-style','italic');
       		$('.fontStyles').append('<span class="fontStyle">font-style:italic;<br/></span>')
       		
    	} 
    	
    	else{
    		$('.3DText').css('font-style','normal');
       		$('.fontStyle').remove();
    	
    	}
    	
    	if(underlineCheck==true){
       		$('.3DText').css('text-decoration','underline');
       		$('.fontStyles').append('<span class="textDecoration">text-decoration:underline;<br/></span>')
       		
    	} 
    	
    	else{
    		$('.3DText').css('text-decoration','none');
       		$('.textDecoration').remove();
    	}
        	
    }fontStyle();

$('#angle, #fontSize').change(textShadow);

function textShadow() {
        //get the selections from the controls
        height = parseInt($('#height').val());
        angle = $('#angle').val();
       	fontsize=$('#fontSize').val();

heightGradientMin = $('#heightGradientMin').val();
        heightGradientMax = $('#heightGradientMax').val();
        shadowOpacity = $('#shadowOpacity').val();

//set the font based on select
        //Display download for Iconic Font  
 
        if (angle == 0 || angle == 360) {
            $('#gradient').css('background-image', '-moz-linear-gradient(0% 100% 0deg,transparent, #000000)').css('background-image', '-webkit-gradient(linear, 0% 0%, 100% 0%, from(transparent), to(#000000))');
        } else if (angle == 45) {
            $('#gradient').css('background-image', '-moz-linear-gradient(0% 100% 45deg,transparent, #000000)').css('background-image', '-webkit-gradient(linear, 0% 100%, 100% 0%, from(transparent), to(#000000))');
        } else if (angle == 90) {
            $('#gradient').css('background-image', '-moz-linear-gradient(0% 100% 90deg,transparent, #000000)').css('background-image', '-webkit-gradient(linear, 100% 100%, 100% 0%, from(transparent), to(#000000))');
        } else if (angle == 135) {
            $('#gradient').css('background-image', '-moz-linear-gradient(0% 100% 315deg,#000000, transparent)').css('background-image', '-webkit-gradient(linear, 100% 100%, 0% 0%, from(transparent), to(#000000))');
        } else if (angle == 180) {
            $('#gradient').css('background-image', '-moz-linear-gradient(0% 100% 360deg,#000000, transparent)').css('background-image', '-webkit-gradient(linear, 100% 0%, 0% 0%, from(transparent), to(#000000))');
        } else if (angle == 225) {
            $('#gradient').css('background-image', '-moz-linear-gradient(0% 100% 45deg,#000000, transparent)').css('background-image', '-webkit-gradient(linear, 40% 0%, 0% 100%, from(#333), to(#000000))');

} else if (angle == 270) {
            $('#gradient').css('background-image', '-moz-linear-gradient(90deg, #000000, transparent 100%)').css('background-image', '-webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000000))');
        } else if (angle == 315) {
            $('#gradient').css('background-image', '-moz-linear-gradient(100% 100% 135deg,#000000, transparent)').css('background-image', '-webkit-gradient(linear, 0% 0%, 100% 100%, from(transparent), to(#000000))');
        }

//SHADOWS
        //set string variables
        string2 = '';
        shadowStringSum = '';
        //Height gradient colors
        percentFade = 1 / height;
        percentFadeIncrement = percentFade;
        
        shadowStrokeOpacity = .5;

startColorred = (parseInt($('.colorpicker_rgb_r input').val())) - heightGradientMin;
        endColorred = startColorred - heightGradientMax;

startColorgreen = parseInt($('.colorpicker_rgb_g input').val()) - heightGradientMin;
        endColorgreen = startColorgreen - heightGradientMax;

startColorblue = parseInt($('.colorpicker_rgb_b input').val()) - heightGradientMin;
        endColorblue = startColorblue - heightGradientMax;

for (i = 0; i <= height; i++) {

if (angle == 0 || angle == 360) {
                x = i;
                y = 0;
                xshadow = height + 1;
                yshadow = 0;

} else if (angle == 45) {
                x = i;
                y = -i;
                xshadow = height + 1;
                yshadow = -(height + 1);

} else if (angle == 90) {
                x = 0;
                y = -i;
                xshadow = 0;
                yshadow = -(height + 1);
            } else if (angle == 135) {
                x = -i;
                y = -i;
                xshadow = -(height + 1);
                yshadow = -(height + 1);

} else if (angle == 180) {
                x = -i;
                y = 0;
                xshadow = -(height + 1);
                yshadow = 0;

} else if (angle == 225) {
                x = -i;
                y = i;
                xshadow = -(height + 1);
                yshadow = height + 1;

} else if (angle == 270) {
                x = 0;
                y = i;
                xshadow = 0;
                yshadow = height + 1;

} else if (angle == 315) {
                x = i;
                y = i;
                xshadow = height + 1;
                yshadow = height + 1;

}

//Shadow Colors
            var diffRed = endColorred - startColorred;
            var diffGreen = endColorgreen - startColorgreen;
            var diffBlue = endColorblue - startColorblue;

diffRed = Math.round((diffRed * percentFade) + startColorred);
            diffGreen = Math.round((diffGreen * percentFade) + startColorgreen);
            diffBlue = Math.round((diffBlue * percentFade) + startColorblue);

if (i < height) {

//color
                string = '' + x + 'px ' + y + 'px 0 rgb(' + diffRed + ',' + diffGreen + ',' + diffBlue + '),';
                string2 = string2 + string;
                percentFade = percentFade + percentFadeIncrement;
            } else {
                //first stroke shadow
                shadowStrokeString = '' + xshadow + 'px ' + yshadow + 'px 1px rgba(0,0,0,' + shadowStrokeOpacity + '),';

//Outer Glow
                if (x == 0) {
                    glowBlur = Math.abs(y);
                } else {
                    glowBlur = Math.abs(x);
                }

shadowGlow = '0px 0px ' + glowBlur + 'px rgba(0,0,0,.2)';
                shadowString = '' + xshadow + 'px ' + yshadow + 'px ' + height + 'px rgba(0,0,0,' + shadowOpacity + '),';
                string = '' + x + 'px ' + y + 'px  0 rgb(' + diffRed + ',' + diffGreen + ',' + diffBlue + '),'
                string2 = string2  + '\n' + string + shadowString + shadowStrokeString + shadowGlow;
            }
        }
   
        //Write Code Area	
        $('.3DText').css('text-shadow', '' + string2 + '');
        $('.3DText').css('font-size', '' + fontsize + 'px');
        $('.code').text(string2);
        $('.fontSize').text(fontsize + 'px');
        $('.fontFamily').text(fontSet);
        
}textShadow();
    
$('.throbber').fadeOut('slow', function() {
$('#controls').fadeIn();
});
	
});
</script>

Newer
Older

ISRAR SEO TOOLS

3d css text Generator stylish design

All Calculator

seo page generator

Stylish button generator

Most Popular Tool

other tools

html seo code

About Us

Follow Us

Footer Copyright

Contact Form