Skip to content

Commit d210a64

Browse files
brianarnbrianarn
committed
Gradients stuff
1 parent 627fb6d commit d210a64

File tree

3 files changed

+124
-0
lines changed

3 files changed

+124
-0
lines changed

‎gradients/gengrad.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Gradient Testing</title>
6+
<style>
7+
#box {
8+
background-color: #C1C1C1;
9+
-webkit-border-radius: 7px;
10+
-moz-border-radius: 7px;
11+
border-radius: 7px;
12+
border: 2px solid #909090;
13+
-webkit-box-shadow: 2px 2px 1px #707070;
14+
-moz-box-shadow: 2px 2px 1px #707070;
15+
box-shadow: 2px 2px 1px #707070;
16+
/*
17+
background-image: -webkit-gradient(
18+
linear,
19+
left top,
20+
left bottom,
21+
color-stop(0, rgb(153,153,153)),
22+
color-stop(0.1, rgb(193,193,193)),
23+
color-stop(0.9, rgb(193,193,193)),
24+
color-stop(1, rgb(153,153,153))
25+
);
26+
*/
27+
height: 400px;
28+
width: 400px;
29+
padding: 20px;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<h1>A box!</h1>
35+
<div id="box">
36+
<button id="redo">Click me to regenerate the background</button>
37+
</div>
38+
<script src="gengrad.js"></script>
39+
</body>
40+
</html>

‎gradients/gengrad.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Messing around with generated gradients
2+
// Copyright (c) 2010 Brian Arnold
3+
// MIT License
4+
5+
// Keep global space cleeeeeeean
6+
(function () {
7+
function newGrad() {
8+
var box = document.getElementById('box'), grad = [], start, inc, end, noise, shade;
9+
10+
// A few 'settings'
11+
start = 0.02;
12+
end = 1 - start;
13+
inc = 0.01;
14+
noise = start + inc;
15+
16+
// Make a gradient bit by bit
17+
grad.push('linear');
18+
grad.push('left top');
19+
grad.push('left bottom');
20+
grad.push('color-stop(0, rgb(153,153,153))');
21+
grad.push('color-stop(' + start + ', rgb(193,193,193))');
22+
23+
// Introduce some noise!
24+
while (noise < end) {
25+
// Figure out a new shade
26+
shade = Math.floor(Math.random() * 20) + 180;
27+
grad.push('color-stop(' + noise + ', rgb(' + shade + ',' + shade + ',' + shade + '))');
28+
//noise += Math.floor(Math.random() * 0.1);
29+
noise += inc;
30+
}
31+
32+
// Finish it
33+
grad.push('color-stop(' + end + ', rgb(193,193,193))');
34+
grad.push('color-stop(1, rgb(153,153,153))');
35+
36+
// Set it on the box
37+
box.style.backgroundImage = '-webkit-gradient(' + grad.join(', ') + ')';
38+
} // function newGrad
39+
40+
// Events!
41+
document.addEventListener('DOMContentLoaded', newGrad, false);
42+
document.getElementById('redo').addEventListener('click', newGrad, false);
43+
console.log('Whee');
44+
})();

‎gradients/index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Gradient Testing</title>
6+
<style>
7+
#box {
8+
background-color: #C1C1C1;
9+
-webkit-border-radius: 7px;
10+
-moz-border-radius: 7px;
11+
border-radius: 7px;
12+
border: 2px solid #909090;
13+
-webkit-box-shadow: 2px 2px 1px #707070;
14+
-moz-box-shadow: 2px 2px 1px #707070;
15+
box-shadow: 2px 2px 1px #707070;
16+
/*
17+
background-image: -webkit-gradient(
18+
linear,
19+
left top,
20+
left bottom,
21+
color-stop(0, rgb(153,153,153)),
22+
color-stop(0.1, rgb(193,193,193)),
23+
color-stop(0.9, rgb(193,193,193)),
24+
color-stop(1, rgb(153,153,153))
25+
);
26+
*/
27+
height: 400px;
28+
width: 400px;
29+
padding: 20px;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<h1>A box!</h1>
35+
<div id="box">
36+
<button id="redo">Click me to regenerate the background</button>
37+
</div>
38+
<script src="gengrad.js"></script>
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)