Dynamic Text Gloss Effect
Enhance your web pages with this small JavaScript to dynamically add a Gloss Effect on your normal header texts.
The script dynamically applies Css Text Gloss Effect by Cris Yap of BestWebBuzz.com, by manipulating HTML DOM to insert a <span> and css styles into every target element that contains the text to gloss up such as H1, H2, H3, H4, etc.
Optionally, you can set the background color of the <span> to be consistent with your text background. By default, the script sets it from the target element if available. Otherwise, the script assumes white background color.
Here are samples in different colors.
JAVASCRIPT
DOM MANIPULATION
CSS STYLE EFFECTS
DHTML
WEB DESIGN
CROSS BROWSER
Below is the code that produces output similar to the samples above.
<!DOCTYPE>
<!-- Make sure to include any !DOCTYPE or this will not work on IE. -->
<html>
<head>
<script type="text/javascript">
<!--
/* Function that applies text gloss effect to an element. */
function applyTextGlossToElement(el, options) {
if (options == undefined) options = {};
if (options.bgColor == undefined) {
/* <span> background color not specified,
** get background color from target element or assume white
*/
options.bgColor =
el.style.backgroundColor != undefined && el.style.backgroundColor
? el.style.backgroundColor
: '#FFFFFF';
}
/* Create and append <span> as child to target element. */
var span = document.createElement('span');
el.appendChild(span);
/* Use .style.cssText to effectively apply styles.
** It works on all major browsers.
** .setAttribute() does different thing in IE.
*/
el.style.cssText = el.style.cssText + ';position:relative;';
span.style.cssText = ';position:absolute;top:0;left:0;'
+ 'height:45%;'
+ 'width:100%;'
+ 'background-color:' + options.bgColor + ';'
+ 'filter:alpha(opacity=60);-moz-opacity:0.60;opacity:0.60;';
}
/* Function that applies text gloss effect to an array of elements. */
function applyTextGlossToElements(elements, options) {
for (var i = 0, count = elements.length; i < count; i++) {
applyTextGlossToElement(elements[i], options);
}
}
window.onload = function(){
/* Apply effect to single element */
applyTextGlossToElement(document.getElementById('title'));
/* Apply effect to multiple elements */
applyTextGlossToElements(document.getElementsByTagName('h4'));
}
-->
</script>
<style type="text/css">
<!--
h3,h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
margin:0px;
padding:5px;
}
-->
</style>
</head>
<body>
<h3 id="tgeTitle" style="color:#663300">JAVASCRIPT</h3>
<h4 style="background-color:#FFFFCC;color:#0079b6">DOM MANIPULATION</h3>
<h4 style="background-color:#eeeeee;color:#009933">CSS STYLE EFFECTS</h3>
<h4 style="background-color:#CCCC66;color:#FF6600">DHTML</h3>
<h4 style="background-color:#CCFFFF;color:#993300">WEB DESIGN</h3>
<h4 style="background-color:#000000;color:#99CC00">CROSS BROWSER</h3>
</body>
</html>
Comments
BW
