//for changing font size
  $("#slider").slider(
{
            value:30,
            min: 0,
            max: 100,
            step: 1,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
                var fs = $( "#slider-value" ).html();
                $("td > span").css("font-size",fs+"px");
	        }
            
}
);
// for changing color
function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
      if ( val.length === 1 ) {
        hex[ nr ] = "0" + val;
      }
    });
    return hex.join( "" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
      green = $( "#green" ).slider( "value" ),
      blue = $( "#blue" ).slider( "value" ),
      hex = hexFromRGB( red, green, blue );
    $( "#swatch" ).css( "background-color", "#" + hex );
    $( "td > span" ).css( "color", "#" + hex );
  }
  $(function() {
    $( "#red, #green, #blue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 255,
      value: 127,
      slide: refreshSwatch,
      change: refreshSwatch
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
  });

function CreateShadow() {
var ox = document.getElementById('offsetx').value;
var oy = document.getElementById('offsety').value;
var bd = document.getElementById('blur').value;
var cl = document.getElementById('color').value;
$("td > span").css("text-shadow",ox+"px "+oy+"px "+bd+"px "+cl);
}
//for accessing final style
$( "td" ).click(function() {
var html = $(this).html();
$( "#code" ).text( html );
$('#code').show();
$('html,body').animate({scrollTop: 0});
});