Skip to content

Commit 7028d4e

Browse files
wbambergwbamberg
committed
Add border-image generator
1 parent 82f0e87 commit 7028d4e

20 files changed

+2596
-0
lines changed

‎tools/border-image-generator/arrow-down-white.png

172 Bytes
Loading

‎tools/border-image-generator/arrow-right-white.png

181 Bytes
Loading

‎tools/border-image-generator/arrow-up-white.png

175 Bytes
Loading

‎tools/border-image-generator/arrows.png

372 Bytes
Loading

‎tools/border-image-generator/border-image-1.png

507 Bytes
Loading

‎tools/border-image-generator/border-image-2.png

1.31 KB
Loading

‎tools/border-image-generator/border-image-3.png

1.33 KB
Loading

‎tools/border-image-generator/border-image-4.png

367 Bytes
Loading

‎tools/border-image-generator/border-image-5.png

577 Bytes
Loading

‎tools/border-image-generator/border-image-6.svg

+1
Loading

‎tools/border-image-generator/checked.png

275 Bytes
Loading

‎tools/border-image-generator/close.png

271 Bytes
Loading

‎tools/border-image-generator/config.png

287 Bytes
Loading

‎tools/border-image-generator/disabled.png

344 Bytes
Loading

‎tools/border-image-generator/drop_arrow_icon.png

534 Bytes
Loading

‎tools/border-image-generator/grain.png

4.61 KB
Loading

‎tools/border-image-generator/index.html

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Border image generator</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
10+
<body>
11+
12+
<div id="container">
13+
14+
<div id="gallery">
15+
<div id="image-gallery">
16+
<img class="image" src="border-image-1.png" data-stateID="border1"/>
17+
<img class="image" src="border-image-2.png" data-stateID="border2"/>
18+
<img class="image" src="border-image-3.png" data-stateID="border3"/>
19+
<img class="image" src="border-image-4.png" data-stateID="border4"/>
20+
<img class="image" src="border-image-5.png" data-stateID="border5"/>
21+
<img class="image" src="border-image-6.svg" data-stateID="border6"/>
22+
</div>
23+
</div>
24+
25+
<div id="load-actions" class="group section">
26+
<div id="toggle-gallery" data-action="hide"> </div>
27+
<div id="load-image" class="button"> Upload image </div>
28+
<input id="remote-url" type="text" placeholder="Load an image from URL"/>
29+
<div id="load-remote" class="button"> </div>
30+
</div>
31+
32+
<div id="general-controls" class="group section">
33+
<div class="name"> Control Box </div>
34+
<div class="separator"></div>
35+
<div class="property">
36+
<div class="name">scale</div>
37+
<div class="ui-input-slider" data-topic="scale"
38+
data-unit="%" data-max="300" data-sensitivity="10">
39+
</div>
40+
</div>
41+
<div class="separator"></div>
42+
<div class="property">
43+
<div class="name">draggable</div>
44+
<div class="ui-checkbox" data-topic='drag-subject'></div>
45+
</div>
46+
<div class="property right">
47+
<div class="name">section height</div>
48+
<div class="ui-input-slider" data-topic="preview-area-height"
49+
data-min="400" data-max="1000">
50+
</div>
51+
</div>
52+
</div>
53+
54+
<div id="preview_section" class="group section">
55+
<div id="subject">
56+
<div class="guideline" data-axis="Y" data-topic="slice-top"></div>
57+
<div class="guideline" data-axis="X" data-topic="slice-right"></div>
58+
<div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
59+
<div class="guideline" data-axis="X" data-topic="slice-left"></div>
60+
</div>
61+
<div id="preview"> </div>
62+
</div>
63+
64+
<!-- controls -->
65+
<div id="controls" class="group section">
66+
67+
<!-- border-image-slice -->
68+
<div id="border-slice-control" class="category">
69+
<div class="title"> border-image-slice </div>
70+
<div class="property">
71+
<div class="name">fill</div>
72+
<div class="ui-checkbox" data-topic='slice-fill'></div>
73+
</div>
74+
</div>
75+
76+
<!-- border-image-width -->
77+
<div id="border-width-control" class="category">
78+
<div class="title"> border-image-width </div>
79+
</div>
80+
81+
<!-- border-image-outset -->
82+
<div id="border-outset-control" class="category">
83+
<div class="title"> border-image-outset </div>
84+
</div>
85+
86+
<!-- other-settings -->
87+
<div id="additional-properties" class="category">
88+
<div class="title"> additional-properties </div>
89+
<div class="property">
90+
<div class="name"> repeat-x </div>
91+
<div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
92+
<div data-value="0">repeat</div>
93+
<div data-value="0">stretch</div>
94+
<div data-value="0">round</div>
95+
</div>
96+
</div>
97+
<div class="property">
98+
<div class="name"> repeat-y </div>
99+
<div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
100+
<div data-value="1">repeat</div>
101+
<div data-value="1">stretch</div>
102+
<div data-value="1">round</div>
103+
</div>
104+
</div>
105+
<div class="property">
106+
<div class="ui-input-slider" data-topic="font-size" data-info="em size"
107+
data-unit="px" data-value="12" data-sensitivity="3">
108+
</div>
109+
</div>
110+
111+
<div class="property">
112+
<div class="ui-input-slider" data-topic="preview-width" data-info="width"
113+
data-unit=" px" data-min="10" data-max="10000" data-sensitivity="3"></div>
114+
</div>
115+
<div class="property">
116+
<div class="ui-input-slider" data-topic="preview-height" data-info="height"
117+
data-unit=" px" data-min="10" data-max="10000" data-sensitivity="3">
118+
</div>
119+
</div>
120+
</div>
121+
122+
<div id="output" class="category">
123+
<div class="title"> CSS Code </div>
124+
<div class="css-property">
125+
<span class="name"> border-image-slice: </span>
126+
<span id="out-border-slice" class="value"> </span>
127+
</div>
128+
<div class="css-property">
129+
<span class="name"> border-image-width: </span>
130+
<span id="out-border-width" class="value"> </span>
131+
</div>
132+
<div class="css-property">
133+
<span class="name"> border-image-outset: </span>
134+
<span id="out-border-outset" class="value"> </span>
135+
</div>
136+
<div class="css-property">
137+
<span class="name"> border-image-repeat: </span>
138+
<span id="out-border-repeat" class="value"> </span>
139+
</div>
140+
<div class="css-property">
141+
<span class="name"> border-image-source: </span>
142+
<span id="out-border-source" class="value"> </span>
143+
</div>
144+
<div class="css-property">
145+
<span class="name"> border-style: </span>
146+
<span id="out-border-style" class="value">solid;</span>
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
152+
<script src="script.js"></script>
153+
</body>
154+
155+
</html>

‎tools/border-image-generator/resize.png

150 Bytes
Loading

0 commit comments

Comments
 (0)