-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathBorder_Radius_Toy.html
executable file
·103 lines (103 loc) · 4.3 KB
/
Border_Radius_Toy.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border Radius Toy</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
var border = {"topLeft":[0,0],"topRight":[0,0],"bottomLeft":[0,0],"bottomRight":[0,0]};
function updateBorder(){
var bString = border.topLeft[0] + "px " + border.topRight[0] + "px " + border.bottomLeft[0] + "px "
+ border.bottomRight[0] + "px / " + border.topLeft[1] + "px " + border.topRight[1] + "px "
+ border.bottomLeft[1] + "px " + border.bottomRight[1] + "px";
$("#example").css({"-webkit-border-radius":bString,"-moz-border-radius":bString,"border-radius":bString});
$("#code").html("-webkit-border-radius:"+bString+";<br> -moz-border-radius:"+bString+";<br>border-radius:"+bString+";");
}
$(function() {
$("#xtopLeft").slider({
value:$("#xtl").text(),min:0,max:300,slide: function(event, ui) {
$("#xtl").text(ui.value);
border.topLeft[0] = ui.value;
updateBorder();
}});
$("#xtopRight").slider({
value:$("#xtr").text(),min:0,max:300,slide: function(event, ui) {
$("#xtr").text(ui.value);
border.topRight[0] = ui.value;
updateBorder();
}});
$("#xbottomLeft").slider({
value:$("#xbl").text(),min:0,max:300,slide: function(event, ui) {
$("#xbl").text(ui.value);
border.bottomLeft[0] = ui.value;
updateBorder();
}});
$("#xbottomRight").slider({
value:$("#xbr").text(),min:0,max:300,slide: function(event, ui) {
$("#xbr").text(ui.value);
border.bottomRight[0] = ui.value;
updateBorder();
}});
$("#ytopLeft").slider({
value:$("#ytl").text(),min:0,max:300,slide: function(event, ui) {
$("#ytl").text(ui.value);
border.topLeft[1] = ui.value;
updateBorder();
}});
$("#ytopRight").slider({
value:$("#ytr").text(),min:0,max:300,slide: function(event, ui) {
$("#ytr").text(ui.value);
border.topRight[1] = ui.value;
updateBorder();
}});
$("#ybottomLeft").slider({
value:$("#ybl").text(),min:0,max:300,slide: function(event, ui) {
$("#ybl").text(ui.value);
border.bottomLeft[1] = ui.value;
updateBorder();
}});
$("#ybottomRight").slider({
value:$("#ybr").text(),min:0,max:300,slide: function(event, ui) {
$("#ybr").text(ui.value);
border.bottomRight[1] = ui.value;
updateBorder();
}});
});
</script>
<style>
#code{border:1px solid #000;background:#aaa;padding:5px;}
#x,#y{width:350px;float:left;margin:0;padding:0;}
#y{margin:0 0 0 50px}
#example{border:2px solid #000;background:#888;height:300px;width:300px;margin:0 auto;}
#controls,#output{width:800px;margin:1em auto; padding:10px; clear:both;overflow:auto}
#controls h2{text-align:center}
</style>
<meta http-equiv="x-dns-prefetch-control" content="off"/></head>
<body>
<h1>Border Radius Toy</h1>
<p>This toy shapes a 300px square by setting all 8 border-radius parameters. You can get the code et al from <a href="http://github.com/JKirchartz/BorderRadiusToy">http://github.com/JKirchartz/BorderRadiusToy</a></p>
<div id="controls">
<div id="x">
<h2>X</h2>
<p><h3>Top Left: <span id="xtl">0</span>px</h3><div id="xtopLeft"></div></p>
<p><h3>Top Right: <span id="xtr">0</span>px</h3><div id="xtopRight"></div></p>
<p><h3>Bottom Left: <span id="xbl">0</span>px</h3><div id="xbottomLeft"></div></p>
<p><h3>Bottom Right: <span id="xbr">0</span>px</h3><div id="xbottomRight"></div></p>
</div>
<div id="y">
<h2>Y</h2>
<p><h3>Top Left: <span id="ytl">0</span>px</h3><div id="ytopLeft"></div></p>
<p><h3>Top Right: <span id="ytr">0</span>px</h3><div id="ytopRight"></div></p>
<p><h3>Bottom Left: <span id="ybl">0</span>px</h3><div id="ybottomLeft"></div></p>
<p><h3>Bottom Right: <span id="ybr">0</span>px</h3><div id="ybottomRight"></div></p>
</div>
</div>
<div id="example"></div>
<div id="output">
<h2>CSS:</h2>
<div id="code"> <br/> <br/> <br/></div>
</div>
</body>
</html>