Skip to content

Commit 382a70d

Browse files
wbambergwbamberg
committed
Add the other CSS tools
1 parent 7028d4e commit 382a70d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+7613
-1
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,5 @@ The "object-fit-basics" directory contains a simple page demonstrating typical u
1515
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/).
1616

1717
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/).
18+
19+
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/).

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<html lang="en">
44
<head>
55
<meta charset="utf-8">
6-
<title>Border image generator</title>
6+
<title>Border-image generator</title>
77
<link rel="stylesheet" href="styles.css">
88
</head>
99

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

372 Bytes
Loading

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

275 Bytes
Loading

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

344 Bytes
Loading

‎tools/border-radius-generator/dropdown.png

330 Bytes
Loading

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

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Border-radius generator</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
10+
<body>
11+
12+
<div id="container">
13+
<div class="group section">
14+
<div id="preview" class="col span_12">
15+
<div id="subject">
16+
<div id="top-left" class="radius-container"
17+
data-X="left" data-Y="top">
18+
</div>
19+
<div id="top-right" class="radius-container"
20+
data-X="right" data-Y="top">
21+
</div>
22+
<div id="bottom-right" class="radius-container"
23+
data-X="right" data-Y="bottom">
24+
</div>
25+
<div id="bottom-left" class="radius-container"
26+
data-X="left" data-Y="bottom">
27+
</div>
28+
29+
<div id="radius-ui-sliders">
30+
<div id="tlr" class="ui-input-slider" data-topic="top-left"
31+
data-unit=" px" data-sensitivity="2"></div>
32+
33+
<div id="tlw" class="ui-input-slider" data-topic="top-left-w"
34+
data-unit=" px" data-sensitivity="2"></div>
35+
36+
<div id="tlh" class="ui-input-slider" data-topic="top-left-h"
37+
data-unit=" px" data-sensitivity="2"></div>
38+
39+
<div id="trr" class="ui-input-slider" data-topic="top-right"
40+
data-unit=" px" data-sensitivity="2"></div>
41+
42+
<div id="trw" class="ui-input-slider" data-topic="top-right-w"
43+
data-unit=" px" data-sensitivity="2"></div>
44+
45+
<div id="trh" class="ui-input-slider" data-topic="top-right-h"
46+
data-unit=" px" data-sensitivity="2"></div>
47+
48+
<div id="brr" class="ui-input-slider" data-topic="bottom-right"
49+
data-unit=" px" data-sensitivity="2"></div>
50+
51+
<div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
52+
data-unit=" px" data-sensitivity="2"></div>
53+
54+
<div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
55+
data-unit=" px" data-sensitivity="2"></div>
56+
57+
<div id="blr" class="ui-input-slider" data-topic="bottom-left"
58+
data-unit=" px" data-sensitivity="2"></div>
59+
60+
<div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
61+
data-unit=" px" data-sensitivity="2"></div>
62+
63+
<div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
64+
data-unit=" px" data-sensitivity="2"></div>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
<div id="controls" class="group section">
70+
71+
<div class="group section">
72+
<div id="dimensions">
73+
<div class="ui-input-slider" data-topic="width" data-info="width"
74+
data-unit=" px" data-min="150" data-max="700" data-sensitivity="1"></div>
75+
76+
<div class="ui-input-slider" data-topic="height" data-info="height"
77+
data-unit=" px" data-min="75" data-max="350" data-sensitivity="1"></div>
78+
</div>
79+
80+
<div id="output"></div>
81+
</div>
82+
83+
<div class="group section">
84+
<div id="radius-lock">
85+
<div class="info"> rounded corner </div>
86+
<div class="ui-checkbox" data-topic='top-left'></div>
87+
<div class="ui-checkbox" data-topic='top-right'></div>
88+
<div class="ui-checkbox" data-topic='bottom-right'></div>
89+
<div class="ui-checkbox" data-topic='bottom-left'></div>
90+
</div>
91+
92+
<div id="unit-selection">
93+
<div class="info"> select border units </div>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
99+
100+
<script src="script.js"></script>
101+
</body>
102+
103+
</html>

‎tools/border-radius-generator/resize-handle.png

239 Bytes
Loading

0 commit comments

Comments
 (0)