You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
8.5 KiB
HTML
196 lines
8.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>CSS3 Shadow Generator</title>
|
|
<link href="http://fonts.googleapis.com/css?family=Armata|Asap:400,700,400italic,700italic" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
|
|
<link href="css/jqueryui.css" rel="stylesheet" type="text/css">
|
|
<link href="css/presets.css" rel="stylesheet" type="text/css">
|
|
<link href="css/shadowgen.css" rel="stylesheet" type="text/css">
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
|
|
<script type="text/javascript" src="js/colorpicker.js"></script>
|
|
<script type="text/javascript" src="js/json.js"></script>
|
|
<script type="text/javascript" src="js/shadowgen.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<div class="main">
|
|
<div class="header">
|
|
<h1>CSS3 Shadow Creator</h1>
|
|
<div class="header-buttons">
|
|
<a href="#" onclick="clear_layers(); return false;">New</a>
|
|
<a href="#" onclick="save_layers(); return false;">Save</a>
|
|
<a href="#" onclick="dialog_load(); return false;">Load</a>
|
|
<a href="#" onclick="dialog_presets(); return false;">Presets</a>
|
|
<a href="#" class="strong" onclick="generate_code(); return false;">Generate code</a>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div id="pane_main">
|
|
<div class="left-pane">
|
|
<div class="inner-pane">
|
|
<fieldset id="fieldset_preview">
|
|
<legend>Preview</legend>
|
|
<textarea id="preview">Hi there, I'm a shadow!</textarea>
|
|
</fieldset>
|
|
<fieldset id="fieldset_settings">
|
|
<legend>Shadow settings</legend>
|
|
<div id="settings">
|
|
<div class="form-element">
|
|
<label>Shadow color</label>
|
|
<div class="colorfield">
|
|
<input type="text" id="input_shadow_color" class="colorfield">
|
|
<div class="colorbutton" id="colorbutton_shadow_color"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="form-element" id="setting_inset">
|
|
<label class="buttonset">Type</label>
|
|
<div class="form-field">
|
|
<input type="radio" name="inset" value="enabled" id="input_inset" checked>
|
|
<label for="input_inset">Inset</label>
|
|
<input type="radio" name="inset" value="disabled" id="input_outset">
|
|
<label for="input_outset">Outset</label>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="form-element">
|
|
<label>Shadow X offset</label>
|
|
<div class="form-field slider-field">
|
|
<input type="numeric" id="input_offset_x" value="0">
|
|
<div id="slider_offset_x" class="slider-negative"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="form-element">
|
|
<label>Shadow Y offset</label>
|
|
<div class="form-field slider-field">
|
|
<input type="numeric" id="input_offset_y" value="0">
|
|
<div id="slider_offset_y" class="slider-negative"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="form-element">
|
|
<label>Shadow Blur</label>
|
|
<div class="form-field slider-field">
|
|
<input type="numeric" id="input_blur" value="0">
|
|
<div id="slider_blur" class="slider"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="form-element" id="setting_spread">
|
|
<label>Shadow Spread</label>
|
|
<div class="form-field slider-field">
|
|
<input type="numeric" id="input_spread" value="0">
|
|
<div id="slider_spread" class="slider"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
<div id="settings_placeholder">
|
|
Add a text or box shadow layer to start creating a shadow.
|
|
<img src="images/arrow.png" id="start_arrow" alt="Arrow">
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="right-pane">
|
|
<div class="inner-pane">
|
|
<fieldset id="fieldset_previewsettings">
|
|
<legend>Preview settings</legend>
|
|
<div class="form-element">
|
|
<label>Background color</label>
|
|
<div class="colorfield">
|
|
<input type="text" id="input_preview_background" class="colorfield">
|
|
<div class="colorbutton" id="colorbutton_preview_background"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="form-element">
|
|
<label>Box color</label>
|
|
<div class="colorfield">
|
|
<input type="text" id="input_preview_box" class="colorfield">
|
|
<div class="colorbutton" id="colorbutton_preview_box"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="form-element">
|
|
<label>Text color</label>
|
|
<div class="colorfield">
|
|
<input type="text" id="input_preview_text" class="colorfield">
|
|
<div class="colorbutton" id="colorbutton_preview_text"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset id="fieldset_layers">
|
|
<legend>Layers</legend>
|
|
<div class="listbox">
|
|
<div>
|
|
<div class="listbox-header">Box shadow layers</div>
|
|
<ul id="layers_box" class="sortable">
|
|
<!-- <div class="listbox-item">Main box shadow</div>
|
|
<div class="listbox-item selected">Layer 2</div>
|
|
<div class="listbox-item">Layer 3</div>
|
|
<div class="listbox-item">Layer 4</div> -->
|
|
</ul>
|
|
<div class="listbox-header">Text shadow layers</div>
|
|
<ul id="layers_text" class="sortable">
|
|
<!-- <div class="listbox-item">Text glow</div>
|
|
<div class="listbox-item">Layer 6</div>
|
|
<div class="listbox-item">Layer 7</div>
|
|
<div class="listbox-item">Layer 8</div> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="listbox_buttons">
|
|
<a class="listbox-button" href="#" onclick="add_layer_text(); return false;" title="Add text shadow layer">+ T</a>
|
|
<a class="listbox-button" href="#" onclick="add_layer_box(); return false;" title="Add box shadow layer">+ ■</a>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="dialog_confirm_deletion" title="Are you sure?">
|
|
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Deleted layers cannot be recovered. Are you sure you wish to delete the layer named '<span class="layer-name"></span>'?</p>
|
|
</div>
|
|
<div id="dialog_confirm_clear" title="Are you sure?">
|
|
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This will delete all your layers and allow you to start over. Are you sure you want to do this? The layers can't be recovered afterwards!</p>
|
|
</div>
|
|
<div id="dialog_code" title="Generated CSS">
|
|
<p>You can directly use this code in your design.</p>
|
|
<p><textarea disabled></textarea></p>
|
|
</div>
|
|
<div id="dialog_save" title="Save shadow layers">
|
|
<p>Save the following JSON object anywhere to save your shadow layers.</p>
|
|
<p><textarea disabled></textarea></p>
|
|
</div>
|
|
<div id="dialog_load" title="Load shadow layers">
|
|
<p>Paste a JSON object in the below text area to load your shadow layers.</p>
|
|
<p><textarea></textarea></p>
|
|
</div>
|
|
<div id="dialog_rename" title="Rename layer">
|
|
<p>Enter a new name for the layer.</p>
|
|
<p><input type="text"></p>
|
|
</div>
|
|
<div id="dialog_presets" title="Presets gallery">
|
|
<ul>
|
|
<li class="text-preset" id="preset-1" onclick="load_preset(1);">Fire</li>
|
|
<li class="text-preset" id="preset-2" onclick="load_preset(2);">Neon</li>
|
|
<li class="text-preset" id="preset-3" onclick="load_preset(3);">Offset</li>
|
|
<li class="text-preset" id="preset-7" onclick="load_preset(7);">Ice</li>
|
|
<li class="text-preset" id="preset-8" onclick="load_preset(8);">Ghost</li>
|
|
<li class="box-preset" id="preset-4" onclick="load_preset(4);"><div class="preset-test"></div></li>
|
|
<li class="box-preset" id="preset-5" onclick="load_preset(5);"><div class="preset-test"></div></li>
|
|
<li class="box-preset" id="preset-6" onclick="load_preset(6);"><div class="preset-test" style="background-color: gray;">Depth</div></li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|