mdn · Rumyra · Aug 12, 2021 · Aug 10, 2021 · Aug 11, 2021
diff --git a/README.md b/README.md
@@ -15,3 +15,5 @@ The "object-fit-basics" directory contains a simple page demonstrating typical u
 The "object-fit-gallery" directory contains a fun image gallery that uses <code>object-fit</code> to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/).
 
 The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different <code>overscroll-behavior</code> values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/).
+
+The "tools" directory contains various tools for working with CSS, including a [color picker](http://mdn.github.io/css-examples/tools/color-picker/) and a [box shadow generator](http://mdn.github.io/css-examples/tools/box-shadow-generator/).
diff --git a/tools/border-image-generator/arrow-down-white.png b/tools/border-image-generator/arrow-down-white.png
diff --git a/tools/border-image-generator/arrow-right-white.png b/tools/border-image-generator/arrow-right-white.png
diff --git a/tools/border-image-generator/arrow-up-white.png b/tools/border-image-generator/arrow-up-white.png
diff --git a/tools/border-image-generator/arrows.png b/tools/border-image-generator/arrows.png
diff --git a/tools/border-image-generator/border-image-1.png b/tools/border-image-generator/border-image-1.png
diff --git a/tools/border-image-generator/border-image-2.png b/tools/border-image-generator/border-image-2.png
diff --git a/tools/border-image-generator/border-image-3.png b/tools/border-image-generator/border-image-3.png
diff --git a/tools/border-image-generator/border-image-4.png b/tools/border-image-generator/border-image-4.png
diff --git a/tools/border-image-generator/border-image-5.png b/tools/border-image-generator/border-image-5.png
diff --git a/tools/border-image-generator/border-image-6.svg b/tools/border-image-generator/border-image-6.svg
diff --git a/tools/border-image-generator/checked.png b/tools/border-image-generator/checked.png
diff --git a/tools/border-image-generator/close.png b/tools/border-image-generator/close.png
diff --git a/tools/border-image-generator/config.png b/tools/border-image-generator/config.png
diff --git a/tools/border-image-generator/disabled.png b/tools/border-image-generator/disabled.png
diff --git a/tools/border-image-generator/drop_arrow_icon.png b/tools/border-image-generator/drop_arrow_icon.png
diff --git a/tools/border-image-generator/grain.png b/tools/border-image-generator/grain.png
diff --git a/tools/border-image-generator/index.html b/tools/border-image-generator/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Border-image generator</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+
+  <body>
+
+    <div id="container">
+
+      <div id="gallery">
+          <div id="image-gallery">
+              <img class="image" src="border-image-1.png" data-stateID="border1"/>
+              <img class="image" src="border-image-2.png" data-stateID="border2"/>
+              <img class="image" src="border-image-3.png" data-stateID="border3"/>
+              <img class="image" src="border-image-4.png" data-stateID="border4"/>
+              <img class="image" src="border-image-5.png" data-stateID="border5"/>
+              <img class="image" src="border-image-6.svg" data-stateID="border6"/>
+          </div>
+      </div>
+
+      <div id="load-actions" class="group section">
+          <div id="toggle-gallery" data-action="hide"> </div>
+          <div id="load-image" class="button"> Upload image </div>
+          <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+          <div id="load-remote" class="button"> </div>
+      </div>
+
+      <div id="general-controls" class="group section">
+          <div class="name"> Control Box </div>
+          <div class="separator"></div>
+          <div class="property">
+              <div class="name">scale</div>
+              <div class="ui-input-slider" data-topic="scale"
+                  data-unit="%" data-max="300" data-sensitivity="10">
+              </div>
+          </div>
+          <div class="separator"></div>
+          <div class="property">
+              <div class="name">draggable</div>
+              <div class="ui-checkbox" data-topic='drag-subject'></div>
+          </div>
+          <div class="property right">
+              <div class="name">section height</div>
+              <div class="ui-input-slider" data-topic="preview-area-height"
+                  data-min="400" data-max="1000">
+              </div>
+          </div>
+      </div>
+
+      <div id="preview_section" class="group section">
+          <div id="subject">
+              <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+              <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+              <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+              <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+          </div>
+          <div id="preview"> </div>
+      </div>
+
+      <!-- controls -->
+      <div id="controls" class="group section">
+
+          <!-- border-image-slice -->
+          <div id="border-slice-control" class="category">
+              <div class="title"> border-image-slice </div>
+              <div class="property">
+                  <div class="name">fill</div>
+                  <div class="ui-checkbox" data-topic='slice-fill'></div>
+              </div>
+          </div>
+
+          <!-- border-image-width -->
+          <div id="border-width-control" class="category">
+              <div class="title"> border-image-width </div>
+          </div>
+
+          <!-- border-image-outset -->
+          <div id="border-outset-control" class="category">
+              <div class="title"> border-image-outset </div>
+          </div>
+
+          <!-- other-settings -->
+          <div id="additional-properties" class="category">
+              <div class="title"> additional-properties </div>
+              <div class="property">
+                  <div class="name"> repeat-x </div>
+                  <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                      <div data-value="0">repeat</div>
+                      <div data-value="0">stretch</div>
+                      <div data-value="0">round</div>
+                  </div>
+              </div>
+              <div class="property">
+                  <div class="name"> repeat-y </div>
+                  <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                      <div data-value="1">repeat</div>
+                      <div data-value="1">stretch</div>
+                      <div data-value="1">round</div>
+                  </div>
+              </div>
+              <div class="property">
+                  <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                      data-unit="px" data-value="12" data-sensitivity="3">
+                  </div>
+              </div>
+
+              <div class="property">
+                  <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                       data-unit=" px" data-min="10" data-max="10000" data-sensitivity="3"></div>
+              </div>
+              <div class="property">
+                  <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                      data-unit=" px" data-min="10" data-max="10000" data-sensitivity="3">
+                  </div>
+              </div>
+          </div>
+
+          <div id="output" class="category">
+              <div class="title"> CSS Code </div>
+              <div class="css-property">
+                  <span class="name"> border-image-slice: </span>
+                  <span id="out-border-slice" class="value"> </span>
+              </div>
+              <div class="css-property">
+                  <span class="name"> border-image-width: </span>
+                  <span id="out-border-width" class="value"> </span>
+              </div>
+              <div class="css-property">
+                  <span class="name"> border-image-outset: </span>
+                  <span id="out-border-outset" class="value"> </span>
+              </div>
+              <div class="css-property">
+                  <span class="name"> border-image-repeat: </span>
+                  <span id="out-border-repeat" class="value"> </span>
+              </div>
+              <div class="css-property">
+                  <span class="name"> border-image-source: </span>
+                  <span id="out-border-source" class="value">  </span>
+              </div>
+              <div class="css-property">
+                  <span class="name"> border-style: </span>
+                  <span id="out-border-style" class="value">solid;</span>
+              </div>
+          </div>
+       </div>
+    </div>
+
+  <script src="script.js"></script>
+  </body>
+
+</html>
diff --git a/tools/border-image-generator/resize.png b/tools/border-image-generator/resize.png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,5 @@ The "object-fit-basics" directory contains a simple page demonstrating typical u
		The "object-fit-gallery" directory contains a fun image gallery that uses <code>object-fit</code> to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/).

		The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different <code>overscroll-behavior</code> values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/).

		The "tools" directory contains various tools for working with CSS, including a [color picker](http://mdn.github.io/css-examples/tools/color-picker/) and a [box shadow generator](http://mdn.github.io/css-examples/tools/box-shadow-generator/).