forked from UIZE/UIZE-JavaScript-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-color-examples.html
120 lines (105 loc) · 7.08 KB
/
javascript-color-examples.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Color Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="UIZE JavaScript Framework"/>
<meta name="description" content="The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 15 JavaScript color examples."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="css/page.css"/>
<link rel="stylesheet" href="css/page.simpledoc.css"/>
<link rel="stylesheet" href="css/page.index.css"/>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="index.html" title="UIZE JavaScript Framework home"></a>
JavaScript Color Examples
</h1>
<div class="main">
<div class="preamble">
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 15 JavaScript color examples.
<div class="tourPromo">
<div class="tourPromoHeading">TAKE A STEP-BY-STEP TOUR...</div>
<div class="tourPromoText">
You can take a step-by-step tour through the examples listed on this page. When you get into the tour, you can use the gigantic arrows that will appear on either side of the example pages to navigate from one page to the next (or back). You can also use the "thermometer" bar, that will appear right underneath the title bar of the example pages, to navigate to other pages in the tour. The highlighted segment of the thermometer shows you where you are in the tour.
</div>
<div>
<a href="javascript-feature-tours.html?tour=color" class="buttonLink">START THE TOUR<span class="arrow"> </span></a>
<br style="line-height:6px;"/>
<br style="clear:right;"/>
</div>
</div>
</div>
<ul id="page-index">
<li>
<div class="itemTitle"><a href="examples/color-cube.html">Basic Color Cube</a><span class="arrow"> </span></div>
<div class="itemBody">See an example of a color grid, where the color swatches in the grid are interpolated from RGB corner colors that can be dynamically set by the user.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-cube-with-pickers.html">Color Cube With Color Pickers</a><span class="arrow"> </span></div>
<div class="itemBody">See an example of a color grid, with RGB color pickers for editing corner colors, and the ability to click-and-drag in the grid to "smear" its colors.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-gradient-tool.html">Color Gradient Tool</a><span class="arrow"> </span></div>
<div class="itemBody">Explore a wide variety of color gradients - from basic gradients to intricate patterns. Tweak presets or build your own. Use gradients to pick colors.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-picker.html">Color Picker</a><span class="arrow"> </span></div>
<div class="itemBody">See how three RGB color picker widgets - with sliders for red, green, and blue - can be used to tweak text color, background color, and border color.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-pickers-with-gradient.html">Color Pickers With Gradient</a><span class="arrow"> </span></div>
<div class="itemBody">See a demo of a dynamically generated color gradient, where the two end colors of the gradient can be modified using RGB color pickers with sliders.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-sort-by-rgb-proximity.html">Color Sort by RGB Proximity</a><span class="arrow"> </span></div>
<div class="itemBody">When you have a limited palette of colors, how can you sort the colors to find the closest matches to a desired color? This example shows you how.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fade-as-a-color-chart.html">Fade As a Color Chart</a><span class="arrow"> </span></div>
<div class="itemBody">See how acceleration and deceleration affect fades in this visual representation using color gradients, where fades are blending between two colors.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fade-css-style-across-nodes.html">Fade CSS Style Across Nodes</a><span class="arrow"> </span></div>
<div class="itemBody">See how CSS style properties can be faded across a series of nodes to create color gradient effects you wouldn't think possible without using images.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fade-quantization-chart.html">Fade Quantization Chart</a><span class="arrow"> </span></div>
<div class="itemBody">See how different values for the quantization property affect a fade with this visualization using color gradients for different quantization values.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fading-an-object.html">Fading an Object</a><span class="arrow"> </span></div>
<div class="itemBody">Animate complex data objects with ease. UIZE supports compound value interpolation. See how an array of two RGB color objects can be faded over time.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-color-effects.html">Hover Fader Color Effects</a><span class="arrow"> </span></div>
<div class="itemBody">Who needs boring menus when you can have stunning menu animations that will have your users mesmerized! You have to see these effects to believe them.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-text-shadow-animation.html">Hover Fader Text Shadow Animation</a><span class="arrow"> </span></div>
<div class="itemBody">Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sliders-as-rgb-selectors.html">Sliders as RGB Selectors</a><span class="arrow"> </span></div>
<div class="itemBody">Get three sliders in the same room together and you've got yourself an RGB color selector. See how to get sliders to cooperate for the greater good.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sliders-in-color-blender.html">Sliders in a Color Blender</a><span class="arrow"> </span></div>
<div class="itemBody">Three sliders for one RGB color selector. Three sliders for another. One slider to blend between the colors. Three sliders to show the blended color.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sortable-color-table.html">Sortable Color Table</a><span class="arrow"> </span></div>
<div class="itemBody">See all the standardized colors of the CSS 3 specification in a sortable table, where you can sort by name, hue, saturation, lightness, and more.</div>
</li>
</ul>
</div>
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Doc.library',
'UizeDotCom.Page.Index'
],
builder:function () {(window.page = new UizeDotCom.Page.Index).wireUi ()}
});
</script>
</body></html>