Skip to content

Commit

Permalink
update example
Browse files Browse the repository at this point in the history
  • Loading branch information
dsorel committed Jun 18, 2014
1 parent 344237a commit 368c86a
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 65 deletions.
39 changes: 31 additions & 8 deletions README.md
View file
Expand Up @@ -34,11 +34,11 @@ The colors are parsed with TinyColor, [multiple formats are accepted](https://gi

```javascript
var gradient = tinygradient([
tinycolor('#ff0000'), // tinycolor object
{r: 0, g: 255, b: 0}, // RGB object
tinycolor('#ff0000'), // tinycolor object
{r: 0, g: 255, b: 0}, // RGB object
{h: 240: s: 1, v: 1, a: 1}, // HSVa object
'rgb(120, 120, 0)', // RGB CSS string
'gold' // named color
'rgb(120, 120, 0)', // RGB CSS string
'gold' // named color
], 20);
```

Expand All @@ -47,22 +47,45 @@ var gradient = tinygradient([
```javascript
// RGB interpolation
var colorsRgb = gradient.rgb();
```
![rgb](images/rgb.png)

```javascript
// HSV clockwise interpolation
var colorsHsv1 = gradient.hsv();
var colorsHsv = gradient.hsv();
```
![hsv](images/hsv.png)

```javascript
// HSV counter-clockwise interpolation
var colorsHsv2 = gradient.hsv(true);
var colorsHsv = gradient.hsv(true);
```
![hsv2](images/hsv2.png)

There are also two methods which will automatically choose between and clockwise and counter-clockwise.

```javascript
// HSV interpolation using shortest arc between colors
var colorsHsv3 = gradient.hsv('short');
var colorsHsv = gradient.hsv('short');

// HSV interpolation using longest arc between colors
var colorsHsv4 = gradient.hsv('long');
var colorsHsv = gradient.hsv('long');
```

Each function returns an array of TinyColor objects, [see available methods](https://github.com/bgrins/TinyColor/blob/master/README.md#methods).

### Get CSS gradient string

The `css` method will output a valid W3C string (without vendors prefix) to use with `background-image` css property.

```javascript
// linear gradient to right (default)
var gradientStr = gradient.css();

// radial gradient ellipse at top left
var gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');
```

### Reversing gradient

Returns a new instance of TinyGradient with reversed colors.
Expand Down
104 changes: 47 additions & 57 deletions examples/index.htm
View file
Expand Up @@ -3,74 +3,64 @@
<head>
<meta charset="utf-8">

<title>TinyGradient</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet.css">

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="../bower_components/tinycolor/tinycolor.js"></script>
<script src="../tinygradient.js"></script>
<script>
$(function() {
var grad = tinygradient('#00E5BC', '#BF0022', 9);
//grad = grad.reverse();

$('#css').css({
'background': grad.css(null, 'to bottom'),
'height': '360px'
});
grad.rgb().forEach(function(color) {
$('#rgb').append('<div style="background:'+ color.toHexString() +';">'+ color.toHexString() +'</div>');
});
grad.hsv('short').forEach(function(color) {
$('#hsv').append('<div style="background:'+ color.toHexString() +';">'+ color.toHexString() +'</div>');
});
grad.hsv('long').forEach(function(color) {
$('#hsv2').append('<div style="background:'+ color.toHexString() +';">'+ color.toHexString() +'</div>');
});

var grad = tinygradient(['red', 'blue', 'green', 'gold'], 19);
//grad = grad.reverse();
function addExample(grad) {
var html = '<section class="col-md-12">';

$('#css-multiple').css({
'background': grad.css(null, 'to bottom'),
'height': '760px'
});
grad.rgb().forEach(function(color) {
$('#rgb-multiple').append('<div style="background:'+ color.toHexString() +';">'+ color.toHexString() +'</div>');
});
grad.hsv('short').forEach(function(color) {
$('#hsv-multiple').append('<div style="background:'+ color.toHexString() +';">'+ color.toHexString() +'</div>');
});
grad.hsv('long').forEach(function(color) {
$('#hsv2-multiple').append('<div style="background:'+ color.toHexString() +';">'+ color.toHexString() +'</div>');
});
// CSS
html+= '<article><h4>CSS reference</h4>';
html+= '<div class="out css" style="background:'+ grad.css() +';width:'+ (grad.steps*60) +'px;"></div>';
html+= '</article>';

// RGB
html+= '<article><h4>RGB interpolation</h4>';
html+= '<div class="out rgb">';
grad.rgb().forEach(function(color) {
html+= '<span style="background:'+ color.toRgbString() +';" title="'+ color.toHexString() +'"></span>';
});
html+= '</div></article>';

// HSV
html+= '<article><h4>HSV short interpolation</h4>';
html+= '<div class="out hsv">';
grad.hsv('short').forEach(function(color) {
html+= '<span style="background:'+ color.toRgbString() +';" title="'+ color.toHexString() +'"></span>';
});
html+= '</div></article>';

// HSV2
html+= '<article><h4>HSV long interpolation</h4>';
html+= '<div class="out hsv2">';
grad.hsv('long').forEach(function(color) {
html+= '<span style="background:'+ color.toRgbString() +';" title="'+ color.toHexString() +'"></span>';
});
html+= '</div></article>';

html+= '</section>';

$('.container').append(html);
}

addExample(tinygradient('#00E5BC', '#BF0022', 9));
addExample(tinygradient(['red', 'blue', 'green', 'gold'], 15));
});
</script>

<style>
.out {
display:inline-block;
margin:0 10px;
min-width:50px;
vertical-align:top;
}
.out div {
height:40px;
color:white;
font-family:'Calibri';
padding:0 1em;
}
</style>
</head>

<body>

<div class="out" id="css"></div>
<div class="out" id="rgb"></div>
<div class="out" id="hsv"></div>
<div class="out" id="hsv2"></div>

<div class="out" id="css-multiple"></div>
<div class="out" id="rgb-multiple"></div>
<div class="out" id="hsv-multiple"></div>
<div class="out" id="hsv2-multiple"></div>

<div class="container">
<h1>TinyGradient</h1>
</div>

</body>
</html>
34 changes: 34 additions & 0 deletions examples/stylesheet.css
View file
@@ -0,0 +1,34 @@
body {
background:#eee;
}

section {
background:#fff;
border:1px solid #ddd;
border-radius:10px;
margin:15px 0;
padding:0 10px 10px 10px;
}

article div {
height:40px;
margin-bottom:20px;
}
article div.css {
margin-bottom:0;
}

article div span {
display:inline-block;
position:relative;
height:40px;
width:60px;
}

article div span:after {
content:attr(title);
position:absolute;
bottom:-15px;
font-family:monospace;
font-size:12px;
}
Binary file added images/hsv.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/hsv2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/rgb.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 368c86a

Please sign in to comment.