В этом посте расскажу как можно повысьте качество страниц создаваемых для сайтов при помощи небольшого но интересного JavaScript, чтобы можно было добавить динамический глянцевый эффект для текста заголовков. Скрипт динамически применяет для текста глянцевый эффект, при желании можно установить цвет фона, чтобы соответствовать фону текста. По умолчанию, скрипт делает часть текста отличной от основного, придавая эффект блеска тексту. Если цвет не указывать, то по умолчанию получится белый цвет фона.
Ниже приведен код, который дает результат глянцевого эффекта заголовков (так же на рисунке можно увидеть наглядный пример глянцевых заголовков):
<!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>
|
20th Янв 2010
|
Фигня это все.
Почему фигня? очень даже ничего! Лично мне нравится этот эффект! Текст становится приятным на вид!