DIR : /home/kozerus/public_html/pn/uize/site-source/examples/fade-css-style-across-nodes.html
/home/kozerus/public_html/pn/uize/site-source/examples
<!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>Fade CSS Style Across Nodes | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="color menu Uize.Curve Uize.Fx.xShadows"/>
<meta name="description" content="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."/>
<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.example.css"/>
<link rel="stylesheet" href="../css/widget.tabs.css"/>
<link rel="stylesheet" href="css/selector-links.css"/>
<link rel="stylesheet" href="css/params-table.css"/>
<link rel="stylesheet" href="css/params-inspector.css"/>
<style type="text/css">
#page-paramsInspector .tabShell {
width:480px;
}
#page_paramsInspector_settings {
width:400px;
height:286px;
font-size:12px;
}
#page_paramsInspector_preview {
width:466px;
}
.menuLinks {
position:relative;
width:200px;
background:#364040;
padding:10px;
padding-bottom:5px;
}
.menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active {
display:block;
font-size:12px;
text-transform:uppercase;
text-align:center;
letter-spacing:4px;
color:#bbb;
background:#000;
border:2px solid #000;
width:182px;
padding:5px 7px;
margin-bottom:5px;
text-decoration:none;
overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Fade CSS Style Across Nodes
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/fade-css-style-across-nodes.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>This example shows how the <code>Uize.Fx.fadeStyleAcrossNodes</code> method of the <a href="../reference/Uize.Fx.html"><code>Uize.Fx</code></a> module can be used to apply interesting color gradient effects to the items in a navigation menu (shown to the left), from the tasteful to the outlandish. There is no animation in this example - instead, the style fade is occurring across a series of nodes. A list of links in the <b>"PRESETS"</b> tab lets you select / preview effect presets. To fool around with the settings for a preset, switch over to the <b>"PARAMS"</b> tab to tweak values and then click the <b>"PREVIEW CSS STYLE FADE"</b> button to preview changes. <b>NOTE:</b> A number of the presets utilize the CSS3 <code>text-shadow</code> property, and this style property is not supported in all browsers.</p>
</div>
<!-- page layout's "wireframe" with slot for params inspector -->
<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
<td>
<div class="menuLinks">
<a href="javascript://" class="menuLink">About Us</a>
<a href="javascript://" class="menuLink">Products</a>
<a href="javascript://" class="menuLink">Services</a>
<a href="javascript://" class="menuLink">Technology</a>
<a href="javascript://" class="menuLink">Solutions</a>
<a href="javascript://" class="menuLink">My Account</a>
<a href="javascript://" class="menuLink">Locations</a>
<a href="javascript://" class="menuLink">Investors</a>
<a href="javascript://" class="menuLink">Support</a>
<a href="javascript://" class="menuLink">Contact Us</a>
</div>
</td>
<td id="page-paramsInspector"></td>
</tr>
</table>
</div>
<textarea id="page_paramsInspector-inlinePresets" style="display:none;">
Engraved and Beaten Oxidized Copper
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'8a8',
borderTopColor:'acb',
borderLeftColor:'698',
borderRightColor:'698',
borderBottomColor:'352',
backgroundColor:'576',
textShadow:[
'#0 -2 0 1',
'#0 0 -1 1',
'#f 2 0 2',
'#f 0 2 2',
'#f -50 -13 10',
'#f -25 -17 10',
'#f 25 -13 10',
'#f 50 -13 10',
'#0 -50 10 10',
'#0 -25 17 10',
'#0 25 10 10',
'#0 50 10 10'
]
},
{
color:'696',
borderTopColor:'597',
borderLeftColor:'264',
borderRightColor:'264',
borderBottomColor:'132',
backgroundColor:'254',
textShadow:[
'#0 -2 0 1',
'#0 0 -1 1',
'#f 2 0 2',
'#f 0 2 2',
'#f -50 -13 10',
'#f -25 -17 10',
'#f 25 -13 10',
'#f 50 -13 10',
'#0 -50 10 10',
'#0 -25 17 10',
'#0 25 10 10',
'#09c 50 10 10'
]
}
)
Blue Gradient, Embossed Text, Lit from Left
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'f',
borderTopColor:'578',
borderLeftColor:'9ab',
borderRightColor:'001',
borderBottomColor:'578',
backgroundColor:'456',
textShadow:[
'#0 3 0 3',
'#0 0 2 3',
'#f -1 0 2',
'#f 0 -1 2',
'#f -140 -5 15',
'#f -140 5 15',
'#f -90 -5 20',
'#f -90 5 20',
'#0 100 -5 20',
'#0 100 5 20',
'#0 120 0 15',
'#0 120 0 15'
]
},
{
color:'c',
borderTopColor:'235',
borderLeftColor:'357',
borderRightColor:'010',
borderBottomColor:'235',
backgroundColor:'124',
textShadow:[
'#0 3 0 3',
'#0 0 2 3',
'#c -1 0 2',
'#c 0 -1 2',
'#c -120 -5 20',
'#c -120 5 20',
'#c -90 -5 15',
'#c -90 5 15',
'#0 100 -5 20',
'#0 100 5 20',
'#0 120 0 15',
'#0 120 0 15'
]
}
)
Tarnished Plate Metal Plaques
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'a62',
borderTopColor:'962',
borderLeftColor:'742',
borderRightColor:'642',
borderBottomColor:'540',
backgroundColor:'853',
textShadow:[
'#0 2 0 1',
'#0 0 1 1',
'#600 2 0 2',
'#c -2 -1 2',
'#900 -50 -13 5',
'#9cf -25 -17 5',
'#f80 25 -13 5',
'#ffc 50 -13 7',
'#ff0 -50 10 10',
'#f00 -25 17 2',
'#700 25 10 10',
'#0 50 10 6'
]
},
{
color:'a62',
borderTopColor:'742',
borderLeftColor:'530',
borderRightColor:'300',
borderBottomColor:'0',
backgroundColor:'420',
textShadow:[
'#0 2 0 1',
'#0 0 1 1',
'#620 2 0 2',
'#9 -2 -1 2',
'#0 -50 -17 2',
'#f -25 -13 9',
'#f70 50 -13 5',
'#07f 25 -13 8',
'#640 -25 17 10',
'#900 -50 10 8',
'#200 50 10 5',
'#900 45 0 12'
]
}
)
Rusty Plate Metal Plaques, Corroded at Edges
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'a62',
borderColor:'0',
backgroundColor:'853',
textShadow:[
'#0 -50 0 10',
'#0 50 0 10',
'#0 -70 -15 2',
'#0 70 -15 2',
'#0 -70 15 2',
'#0 40 15 2',
'#0 -2 0 1',
'#0 0 -1 1',
'#600 2 0 2',
'#f 2 1 2',
'#900 -50 -13 5',
'#9cf -25 -17 5',
'#f80 25 -13 5',
'#ffc 50 -13 7',
'#ff0 -50 10 10',
'#f00 -25 17 2',
'#700 25 10 10',
'#0 50 10 6'
]
},
{
color:'a62',
borderColor:'0',
backgroundColor:'420',
textShadow:[
'#0 -130 0 5',
'#0 140 0 4',
'#0 50 -15 2',
'#0 -50 -15 2',
'#0 70 15 2',
'#0 -70 15 2',
'#0 -2 0 1',
'#0 0 -1 1',
'#620 2 0 2',
'#f 1 1 2',
'#0 -50 -17 2',
'#f -25 -13 9',
'#f70 50 -13 5',
'#07f 25 -13 8',
'#640 -25 17 10',
'#900 -50 10 8',
'#200 50 10 5',
'#900 45 0 12'
]
}
)
Glowy Magenta to Tangerine Blend
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'c9f',
backgroundColor:'317',
textShadow:[
'-20px 0 2em #00f',
'-10px -4px 2em #0ff',
'0 -6px 2em #00f',
'20px 0 2em #09f',
'10px 0 2em #f6f',
'0 6px 2em #0ff'
]
},
{
color:'fc9',
backgroundColor:'920',
textShadow:[
'-20px 0 2em #ff0',
'-10px -4px 2em #ff0',
'0 -6px 2em #f00',
'20px 0 2em #9f0',
'10px 0 2em #f6f',
'0 6px 2em #ff0'
]
}
)
Pastel Blue Through Green Through Pink Through Peach
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'f',
backgroundColor:'68a',
borderLeftColor:'0ff',
borderTopColor:'09f',
borderRightColor:'044',
borderBottomColor:'004',
textShadow:'#0 1 1 2'
},
{
color:'f',
backgroundColor:'d76',
borderLeftColor:'faa',
borderTopColor:'fcc',
borderRightColor:'fca',
borderBottomColor:'fac',
textShadow:'#0 1 1 2'
},
{
curve:{
color:Uize.Curve.easeInPow (6),
borderLeftColor:[
Uize.Curve.easeInOutPow (8),
Uize.Curve.easeInPow (2),
Uize.Curve.easeInPow (3)
],
borderTopColor:[
Uize.Curve.easeMiddlePow (4),
Uize.Curve.easeInPow (3),
Uize.Curve.easeMiddlePow (8)
],
borderRightColor:[
Uize.Curve.easeInOutPow (8),
Uize.Curve.easeInPow (3),
Uize.Curve.easeMiddlePow (5)
],
borderBottomColor:[
Uize.Curve.easeInOutPow (4),
Uize.Curve.easeInPow (9),
Uize.Curve.easeMiddlePow (2)
],
backgroundColor:[
Uize.Curve.easeInOutPow (2),
Uize.Curve.easeInPow (4),
Uize.Curve.easeMiddlePow (7)
]
}
}
)
Subtle Pastel Green to Blue Blend
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'d',
borderColor:'59a',
backgroundColor:'375',
textShadow:'#0 2 2 3'
},
{
color:'d',
borderColor:'375',
backgroundColor:'357',
textShadow:'#0 2 2 3'
}
)
Glow Green Gradient
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'f',
borderColor:'8cb',
backgroundColor:'576',
textShadow:'#6bb -4 0 4,#6bb 4 0 4,#6bb 0 -2 4,#6bb 0 2 4'
},
{
color:'f',
borderColor:'375',
backgroundColor:'253',
textShadow:'#0bb -4 0 4,#0bb 4 0 4,#0bb 0 -2 4,#0bb 0 2 4'
}
)
Gray-dient
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'f',
backgroundColor:'9',
borderColor:'c',
textShadow:'#0 2 2 3'
},
{
color:'8',
backgroundColor:'3',
borderColor:'4',
textShadow:'#0 2 2 3'
}
)
Military Uniform Dirty Shades of Gray
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'cbb',
borderColor:'b',
backgroundColor:'7',
textShadow:'#411 -2 0 3,#033 2 0 3,#630 -100 -5 9,#0 20 5 9'
},
{
color:'988',
borderColor:'5',
backgroundColor:'3',
textShadow:'#0 -2 0 3,#0 2 0 3,#630 100 10 8,#030 -100 -10 9'
},
{
curve:{
backgroundColor:[
Uize.Curve.easeMiddlePow (5),
Uize.Curve.easeMiddlePow (4),
Uize.Curve.easeMiddlePow (3)
],
borderColor:[
Uize.Curve.easeMiddlePow (4),
Uize.Curve.easeMiddlePow (5),
Uize.Curve.easeMiddlePow (2)
],
textShadow:[
null,
null,
Uize.Curve.saw (5,.5),
Uize.Curve.saw (7,.5)
]
}
}
)
Gradient From Light Greenish Gray to Dark Blueish Gray
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'efe',
backgroundColor:'9aa',
borderColor:'bcb',
textShadow:'#0 2 2 3'
},
{
color:'899',
backgroundColor:'234',
borderColor:'345',
textShadow:'#0 2 2 3'
}
)
Green to Blue, with Blurry Text Shadows
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'7fb',
borderColor:'0',
backgroundColor:'045',
textShadow:[
'#0 -3 0 3px',
'#0 3 0 3px',
'#0 0 -2 3px',
'#0 0 2 3px',
'#0a8 -40px 0 .7em',
'#0bb 30px 0 .7em',
'#0f0 -20px 0 1em',
'#0f0 50px 0 1em'
]
},
{
color:'6bf',
borderColor:'0',
backgroundColor:'024',
textShadow:[
'#0 -3 0 3px',
'#0 3 0 3px',
'#0 0 -2 3px',
'#0 0 2 3px',
'#06f -30px 0 .7em',
'#09f 10px 0 .7em',
'#03f 30px 0 1em',
'#05f 50px 0 1em'
]
}
)
Fiery Embers
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'ffa',
backgroundColor:'740',
borderColor:'620',
textShadow:[
'-3 0 3 #0',
'3 0 3 #0',
'#f90 -25 -5 .5em',
'#ff0 25 5 .5em',
'#f96 -20 5 1em',
'#fc9 20 -5 1em'
]
},
{
color:'fc9',
backgroundColor:'400',
borderColor:'0',
textShadow:[
'30 0 9 #400',
'-30 0 12 #f90',
'#950 25 9 .5em',
'#930 -25 -5 1em',
'#f96 20 -5 1em',
'#fc9 -20 5 1em'
]
}
)
Gradient From Greenish Gray to Purple
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'f',
backgroundColor:'567',
borderColor:'789',
textShadow:[
'#225 0 -5 .7em',
'#255 0 -2 .6em',
'#252 0 2 .4em',
'#0 0 5 .6em'
]
},
{
color:'f',
backgroundColor:'226',
borderColor:'006',
textShadow:[
'#099 0 -9 1em',
'#aaf 0 -7 2em',
'#aaf 0 7 2em',
'#099 0 9 1em'
]
}
)
Blues and Greens Watercolor Blur
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'0',
backgroundColor:'6a6',
borderColor:'7c9',
textShadow:[
'#036 -1 0 2',
'#036 1 0 2',
'#036 0 -1 2',
'#036 0 1 2',
'#06c -10 0 .5em',
'#06c -5 -3 .5em',
'#06c 5 -3 .5em',
'#06c 10 0 .5em',
'#06c -5 3 .5em',
'#06c 5 3 .5em',
'#06c 0 -4 .5em',
'#06c 0 4 .5em'
]
},
{
color:'0',
backgroundColor:'226',
borderColor:'006',
textShadow:[
'#032 -1 0 2',
'#032 1 0 2',
'#032 0 -1 2',
'#032 0 1 2',
'#6f6 -10 0 .5em',
'#6f6 -5 -3 .5em',
'#6f6 5 -3 .5em',
'#6f6 10 0 .5em',
'#6f6 -5 3 .5em',
'#6f6 5 3 .5em',
'#6f6 0 -4 .5em',
'#6f6 0 4 .5em'
]
}
)
Green to Red Neon Glow
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'0',
backgroundColor:'044',
borderColor:'046',
textShadow:[
'#6cf -1 0 1',
'#6cf 1 0 1',
'#6cf 0 -1 1',
'#6cf 0 1 1'
]
},
{
color:'0',
backgroundColor:'400',
borderColor:'740',
textShadow:[
'#fc6 -1 0 1',
'#fc6 1 0 1',
'#fc6 0 -1 1',
'#fc6 0 1 1'
]
}
)
Gold Ingots, Mold Lettering
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'a82',
backgroundColor:'a84',
borderTopColor:'fd8',
borderLeftColor:'fd8',
borderRightColor:'652',
borderBottomColor:'532',
textShadow:[
'#0 -1 0 1',
'#f 1 0 1',
'#0 -1 -1 2',
'#f 1 1 2'
]
},
{
color:'861',
backgroundColor:'431',
borderTopColor:'542',
borderLeftColor:'542',
borderRightColor:'0',
borderBottomColor:'0',
textShadow:[
'#0 -1 0 1',
'#f 1 0 1',
'#0 -1 -1 2',
'#a82 1 1 2'
]
},
{
curve:{
color:Uize.Curve.resolve (3),
backgroundColor:Uize.Curve.resolve (1.5),
borderLeftColor:Uize.Curve.resolve (-1.5),
borderTopColor:Uize.Curve.resolve (-2),
borderRightColor:Uize.Curve.resolve (2),
borderBottomColor:Uize.Curve.resolve (-3)
}
}
)
Gold Ingots, Crisp Stamped Lettering
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'fc5',
backgroundColor:'a84',
borderTopColor:'fd8',
borderLeftColor:'fd8',
borderRightColor:'652',
borderBottomColor:'532',
textShadow:[
'#b73 0 0 1',
'#0 0 0 2',
'#a82 -1 -1 1',
'#f -2 -1 3',
'#310 1 0 1',
'#310 3 0 2'
]
},
{
color:'973',
backgroundColor:'431',
borderTopColor:'542',
borderLeftColor:'542',
borderRightColor:'0',
borderBottomColor:'0',
textShadow:[
'#941 0 0 1',
'#0 0 0 2',
'#b61 -1 -1 1',
'#b -2 -1 3',
'#0 1 0 1',
'#0 3 0 2'
]
},
{
curve:{
color:Uize.Curve.resolve (-2),
backgroundColor:Uize.Curve.resolve (1.5),
borderLeftColor:Uize.Curve.resolve (-1.5),
borderTopColor:Uize.Curve.resolve (-2),
borderRightColor:Uize.Curve.resolve (2),
borderBottomColor:Uize.Curve.resolve (-3)
}
}
)
Bronze Bars, With Diagonal Glint
settings::
Uize.Fx.fadeStyleAcrossNodes (
{className:'menuLink'},
{
color:'db9',
backgroundColor:'765',
borderTopColor:'a97',
borderLeftColor:'dca',
borderRightColor:'652',
borderBottomColor:'532',
textShadow:[
'#b73 0 0 1',
'#0 0 0 2',
'#a84 -1 -1 1',
'#f -2 -1 3',
'#310 1 0 1',
'#310 3 0 2',
'#f -50 -7 20',
'#0 150 -7 15',
'#0 150 0 15'
]
},
{
color:'ba8',
backgroundColor:'332822',
borderTopColor:'542',
borderLeftColor:'542',
borderRightColor:'0',
borderBottomColor:'0',
textShadow:[
'#941 0 0 1',
'#0 0 0 2',
'#b61 -1 -1 1',
'#f -2 -1 3',
'#0 1 0 1',
'#0 3 0 2',
'#f -150 7 20',
'#0 50 -7 15',
'#0 50 0 15'
]
},
{
curve:{
color:Uize.Curve.resolve (3),
backgroundColor:Uize.Curve.resolve (1.5),
borderLeftColor:Uize.Curve.resolve (-4),
borderTopColor:Uize.Curve.resolve (-2),
borderRightColor:Uize.Curve.resolve (2),
borderBottomColor:Uize.Curve.resolve (-3)
}
}
)
</textarea>
<!-- JavaScript code to make the static HTML "come alive" -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'UizeSite.ParamsInspector.InlinePresets',
'Uize.Fx.xShadows',
'Uize.Curve',
'Uize.Curve.Rubber',
'Uize.Curve.Mod',
'Uize.Dom.Basics',
'Uize.Json'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** create the params inspector widget ***/
var
menuNodes = Uize.Dom.Basics.find ({className:'menuLink'}),
initialStyle = Uize.Dom.Basics.getStyle (
menuNodes [0],
{color:null,backgroundColor:null,borderColor:null,textShadow:null}
),
lastSettings
;
page.addChild (
'paramsInspector',
UizeSite.ParamsInspector.InlinePresets,
{
params:{settings:'string-multiline'},
previewButtonText:'PREVIEW CSS STYLE FADE',
settingsPropertyName:'settings'
}
).wire (
'Preset Selected',
function () {
var values = page.children.paramsInspector.getValues ();
if (values.settings != lastSettings) {
Uize.Dom.Basics.setStyle (menuNodes,initialStyle); // reset all nodes to initial style, so there's no style lingering from previous CSS fade
Uize.eval (lastSettings = values.settings);
}
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
);
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer