<div id="page-wrapper">

<!--BEGIN: Generator -->
<div id="g-generator">

<!--BEGIN: Swatch Wrapper-->
<div id="swatch-wrapper">

<a href="#" id="add-swatch" title="Добавить
Образцы">Добавить
Образцы</a><h3>Образцы цветов</h3>
<a href="#" id="randomize-trigger" title="Generate Random Gradient">Генерация случайных градиентов</a>
<p>Выберите цвета, чтобы сделать ваш градиент.</p>

<!--BEGIN: Color Swatches-->
<ul id="color-swatches"><li id="swatch-1" class="swatch" rel="swatch-1"><a href="#swatch-template" rel="#swatch-template" style="background-color: rgb(157, 198, 101); "></a></li><li id="swatch-3" class="swatch" rel="swatch-3"><a href="#swatch-template" rel="#swatch-template" style="background-color: rgb(189, 238, 132); "></a></li><li id="swatch-5" class="swatch selected-swatch" rel="swatch-5"><a href="#swatch-template" rel="#swatch-template" style="background-color: rgb(227, 255, 159); "></a></li></ul>
<!--END: Color Swatches-->
<div id="color-picker"><div class="colorpicker" id="collorpicker_319" style="display: block; position: relative; "><div class="colorpicker_color" style="background-color: rgb(0, 255, 255); "><div><div style="left: 119px; top: 48px; "></div></div></div><div class="colorpicker_hue"><div style="top: 75px; "></div></div><div class="colorpicker_new_color" style="background-color: rgb(35, 173, 173); "></div><div class="colorpicker_current_color" style="background-color: rgb(35, 173, 173); "></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit"></div></div></div>
<!--BEGIN: Swatch Controls-->
<div id="swatch-controls">
<div id="swatch-slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 82%; "></a></div>
<a id="remove-trigger" href="#" rel="swatch-2">Удалить Образцы</a>
<div id="slider-input"><input type="text" maxlength="3" value="82"></div>
</div>
<!--END: Swatch Controls-->

</div>
<!--END: Swatch Wrapper-->

<!--BEGIN: Sample Button-->
<div id="sample-button-container">
<h3>Образец градиента</h3>

<p>Образец обновляется при изменении цветов Слева на Образце цветов.</p>

<div id="sample-btn" style="background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.27, rgb(157, 198, 101)), color-stop(0.64, rgb(189, 238, 132)), color-stop(0.82, rgb(227, 255, 159))); background-position: initial initial; background-repeat: initial initial; ">Пример кнопки будет Выглядеть вот так</div>
</div>
<!--END: Sample Button-->

<!--BEGIN: Gradient Direction controls-->
<div id="gradient-direction">
<h3>Направление градиента</h3>
<p>Выберите направление Образца градиента.</p>

<div id="xStart-select" class="select-wrapper">
<label for="xStart">Xстарт</label>
<select name="xStart" id="xStart">
<option selected="selected" value="left">левый</option>
<option value="right">правый</option>
<option value="custom">ручной</option>
</select>
<input class="hide" maxlength="3" type="text" value="0">
</div>

<div id="yStart-select" class="select-wrapper">
<label for="yStart">Yстарт</label>
<select name="yStart" id="yStart">
<option value="top">сверху</option>
<option selected="selected" value="bottom">снизу</option>
<option value="custom">ручной</option>
</select>
<input class="hide" maxlength="3" type="text" value="0">
</div>

<div id="xEnd-select" class="select-wrapper">
<label for="xEnd">Xконец</label>
<select name="xEnd" id="xEnd">
<option selected="selected" value="left">слева</option>
<option value="right">справа</option>
<option value="custom">ручной</option>
</select>
<input class="hide" maxlength="3" type="text" value="0">
</div>

<div id="yEnd-select" class="select-wrapper">
<label for="yEnd">Yконец</label>
<select name="yEnd" id="yEnd">
<option selected="selected" value="top">сверху</option>
<option value="bottom">снизу</option>
<option value="custom">ручной</option>
</select>
<input class="hide" maxlength="3" type="text" value="0">
</div>
</div>
<!--END: Gradient Direction Controls-->

<div id="color-format-select">
<h3><label for="color-format">Формат цветов</label></h3>
<p>Выберите формат, который вы хотите
Доступные опции HEX и RGB.</p>
<p>Ваш выбор запомнится в следующем формате кодов цвета.</p>

<select id="color-format" name="colorFormat">
<option value="rgb">RGB</option>
<option value="hex">HEX</option>
<!--<option value="rgba">RGBA</option>-->
</select>
</div>

<!--BEGIN: Code Sample-->
<div id="code-output">
<h3> Получение Кодов</h3>
<p>Обновляются коды при изменении цветов, регулируя Образцы градиента.</p>
<form action="">
<div id="copy-confirmation">
<h4>Ваш код был скопирован в буфер обмена!</h4>
</div>

<div id="clipboard-container">
<a href="#copy" id="clipboard-trigger">[Скопировать коды в буфер обмена]</a>
<div style="position: absolute; left: 0px; top: -1px; width: 237px; height: 16px; z-index: 99; "><embed id="ZeroClipboardMovie_1" src="http://weblancer.at.ua/js/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="237" height="16" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=237&height=16" wmode="transparent"></div></div>
<div class="yourCode"><div id="gradient-css"><pre>background-image: linear-gradient(bottom, #9DC665 27%, #BDEE84 64%, #E3FF9F 82%);
background-image: -o-linear-gradient(bottom, #9DC665 27%, #BDEE84 64%, #E3FF9F 82%);
background-image: -moz-linear-gradient(bottom, #9DC665 27%, #BDEE84 64%, #E3FF9F 82%);
background-image: -webkit-linear-gradient(bottom, #9DC665 27%, #BDEE84 64%, #E3FF9F 82%);
background-image: -ms-linear-gradient(bottom, #9DC665 27%, #BDEE84 64%, #E3FF9F 82%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.27, #9DC665),
color-stop(0.64, #BDEE84),
color-stop(0.82, #E3FF9F)
);</pre><div>

</div>
</div>
<!--END: Code Sample-->

<!--END: Generator-->
</div></form>
<!--------------------------------разделитель--------------------------------------------->

<!-----------------------------разделитель------------------------------------------------>

<li id="swatch-template" class="swatch hide"><a href="#swatch-template" rel="#swatch-template"></a></li>

<!--BEGIN: Javascript-->

<script src="http://weblancer.at.ua/js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://weblancer.at.ua/js/application.20110915.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {

var $confirmation = $('#copy-confirmation');

ZeroClipboard.setMoviePath('http://weblancer.at.ua/js/ZeroClipboard.swf');

var clip = new ZeroClipboard.Client();

clip.addEventListener('mouseDown', function() {
clip.setText($('#gradient-css pre').html());
});

clip.addEventListener('complete', function() {

var animation = {
bottom: 0
};

var options = {
complete: function() {
setTimeout(function() {
$confirmation.animate({bottom: -55});
}, 2000);
}
};

$confirmation.animate(animation, options);

});

clip.glue('clipboard-trigger', 'clipboard-container');
});
</script>

<!--END: Javascript-->
<br><center><!-- "' --><span class="pbCpKtuS"><a href="//www.ucoz.ru/">Конструктор сайтов</a> - <a title="Конструктор сайтов" href="//www.ucoz.ru/">uCoz</a></span></center><br><!-- </body> -->
<div style="clear: both" class="qq"></div>
</div>
<div style="clear: both" class="qq"></div>
<!-- </middle> -->
</div>

</div>