| Author: | Oliver Steele |
| Copyright: | Copyright 2006 Oliver Steele. All rights reserved. |
| License: | MIT License (Open Source) |
| Homepage: | http://osteele.com/sources/javascript |
| Download: | http://osteele.com/sources/javascript/gradients.js |
| Docs: | http://osteele.com/sources/javascript/docs/gradients |
| Example: | http://osteele.com/sources/javascript/demos/gradients.html |
| Blog: | http://osteele.com/archives/2006/03/javascript-gradient-roundrects |
| Created: | 2006-03-12 |
| Modified: | 2006-03-20 |
gradients.js adds rounded rectangular gradients to a page, without the use of images.
gradients.js uses the canvas tag if it is available. Otherwise it creates the gradient through the use of div tags.
A gradient can be applied to an element procedurally, via JavaScript, or (with the use of the DivStyle library) through the use of CSS embedded within an element’s div tags.
OSGradient.applyGradient(properties, element) applies a gradient to element.
properties is a hash of properties:
Colors must be specified as the hex number 0xrrggbb, e.g. 0xff0000 for red. (The Divstyle API, below, allows the use of symbolic color names.) border-radius must be specified as a Number of pixels, e.g. 25 (not 25px).
<html>
<head>
<script type="text/javascript" src="gradients.js"></script>
</head>
<body>
<div id="elt">Some text</div>
<script type="text/javascript">
var elt = document.getElementById('elt');
var style = {'gradient-start-color': 0x0000ff,
'border-radius': 25};
OSGradient.applyGradient(style, elt);
</script>
</body>
</html>
If the divstyle.js and behaviour.js files are included, you can also specify a gradient using CSS syntax inside a div tag with class style. CSS selectors within the div style can select multiple tags, and multiple selectors can add properties to a single element.
divstyle.js is available from http://osteele.com/sources/javascript/. behaviour.js is available from http://bennolan.com/behaviour/. (That’s the British spelling of "behaviour".)
<html>
<head>
<script type="text/javascript" src="behaviour.js"></script>
<script type="text/javascript" src="divstyle.js"></script>
<script type="text/javascript" src="gradients.js"></script>
<style type="text/css">
.style {display: none}
#red, .blue-grade {width: 100px}
</style>
</head>
<body>
<div class="style">
#red {gradient-start-color: red}
.blue-grade {gradient-start-color: blue}
.rounded {border-radius: 10}
</div>
<div id="red">Red</div>
<div class="blue-grade">Blue...</div>
<div class="blue-grade rounded">...rounded</div>
</body>
</html>
The style div can contain a subset of CSS syntax. This subset is
described in the documentation
for