[align=center][b]CSS Gradient Text[/b] [/align] [b]Intro : [/b] hi everyone i have a timeout from DotA clan wars and spend a couple minutes for write this article. i will share a simple trick to make gradient text with CSS, but we need javascript to replace and add new element. the basic knowledge is [url=http://en.wikipedia.org/wiki/HTML_DOM]DOM[/url] replacement and [url=http://en.wikipedia.org/wiki/CSS]CSS[/url]. [b]Credit : [/b][url=http://www.webdesignerwall.com]WebDesignerWall[/url] [b]browser compatibility :[/b] FF2+, FF3, Opera, Safari, [s]Internet Explorer[/s] [b]CSS codes :[/b] [i]open your css file and put this code :[/i] [spoiler] /* --- gradient --- */ .shine { background: url(path/to/gradient-shine.png) repeat-x; background-position: top; position: absolute; display: block; width: 100%; height: 14px; } [i]see your global header style and edit look like this :[/i] [i]/* --- basic color of font and background can be edited and make it blend with your profile --- */[/i] .commonbox h1, .commonbox h2 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:[b]#cccccc[/b]; background-color:[b]#000000[/b]; [b] font-weight: bold; position: relative;[/b] /* underscore hack for IE */ _position:inherit !important; _display:block !important; } [i] gradient image : http://jollybear.freeunlimitedweb.com/80s/css/img/gradient-shine.png[/i] [quote][align=center][i][b]Tips :[/b] your background color must darker than font color[/i][/align][/quote] [/spoiler] [b]Example Replacement : [/b] [i]first back-up your main JS file, and replace default header with this script :[/i] [spoiler] //put this script inside onProfileLoad function //control panel header gr=document.getElementById("controlpanel_header"); gr.innerHTML="<span class=\"shine\"></span>[b]Control Panel Header[/b]"; //photo gallery g2=document.getElementById("1").getElementsByTagName("h2")[0]; g2.innerHTML="<span class=\"shine\"></span>[b]Photo Gallery[/b]"; //more about me g3=document.getElementById("6").getElementsByTagName("h2")[0]; g3.innerHTML="<span class=\"shine\"></span>[b]More About Gradient[/b]"; [i] if you already have header replacement, just put empty span with '[b]shine[/b]' class before your header title[/i] [quote][b]<span class=\"shine\"></span>[/b][/quote] [i]this effects also can be used on addBox Header or Show/Hide with effects by [b]ferruz[/b][/i] [/spoiler] [b]Preview :[/b] [spoiler][img]http://i38.tinypic.com/1exmdd.jpg[/img][/spoiler] [b]Demo :[/b] [url=http://profiles.friendster.com/60643239]Demo 1[/url] [quote][b]Internet Explorer Issue :[/b] - gradient effect not appear, but sometimes appear. - each of box header lose/hide/gone, but sometimes appear. - understanding box positioning IE(absolute box inside relative box). - transparent *.png image (IE6 only)[/quote]

Last edited by gumscumbag (2008-08-19 08:04:44)