Before using the clip attribute to achieve the text up and down two different color stitching.
Colorful gradient word, compatible with all major browsers.
Page JS is really useful only colorful () function:
Copy Code code as follows:
function Colorful (Obj,font,r,g,b,type) {
var boxobj;
if (typeof (obj) = "string" | | typeof (obj) = = "Number") {
Boxobj = document.getElementById (obj);
}else{
Boxobj = obj;
}
Boxobj.innerhtml= "<a href= ' >" +font+ "</a>";
var num = boxobj.getelementsbytagname ("a") [0].scrollwidth;
Boxobj.innerhtml= "";
for (Var i=0;i<=num;i++) {
var j=i+1;
var c=math.round (255/num*i);
Switch (number (type)) {
Case 0:r=c;g=c;b=c;break;
Case 1:r=c;break;
Case 2:g=c;break;
Case 3:b=c;break;
}
var iobj = document.createelement ("A");
Iobj.innerhtml=font;
iobj.style.clip= "rect (auto" +j+ "px Auto" +i+ "px");
Iobj.style.color= "RGB" ("+r+", "+g+", "+b+") ";
iobj.href= "#";
Boxobj.appendchild (Iobj);
}
}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>clip implementation Color Gradient font </title> <style type=" text/css "> body{font:12px/1.5 Arial H3{padding:10px;margin:0;background-color: #c00; border:1px dashed #fff; color: #fff; font:16px/1.5 Arial; . Box{position:relative;background-color: #fff; width:auto;margin:0 auto;padding:0 30px;font:700 20px/1.5 "boldface", arial;border:1px dashed #f60; height:30px;margin-top:8px; . box A{position:absolute;font-style:normal;white-space:nowrap; . F999{color: #999;} A:link{text-decoration:none;} A:hover{text-decoration:underline;} A:visited{text-decoration:none;} Address{background-color: #f1f1f1; border:1px dashed #ddd;p adding:10px;font-style:normal;color: #999;} Address a,address A:visited{color: #c00;} </style> </HEAD> <body> <div > <p><strong>css Colorful gradient word </strong></p> <table width= "100%" border= " 0 "cellspacing=" 0 "cellpadding=" 0 "> <tr> <td height=" Ten "colspan=" 2 "align=" center "></td> </tr > <tr> <td width= "19%" height= "align=" right "> Text:</td> <td width=" 81% "><input name=" t Ext "type=" text "id=" Ctext "size=" maxlength= "value=" Please enter the text you need to generate gradients "onkeyup=" Setdiv () "/></td> < /tr> <tr> <td height= "a" align= "right" >r value:</td> <td><select name= "rvalue" id= "Rvalue" & gt;</select> <span class= "f999" > Initialize R value in RGB color </span></td> </tr> <tr> <td height= "align=" "right" >g value:</td> <td><select name= "Gvalue" id= "Gvalue" ></select> < Span class= "f999" > Initialize g value in RGB color </span></td> </tr> <tr> <td height= "align=" right >b value:</td> <td><select name= "bValue "id=" bvalue ></select> <span class= "f999" > Initialize the b value in RGB color </span></td> </tr> <tr> <td height= "align=" "right" > Gradient:</td> <td><select name= "CType" id= "CType" >< Option value= "0" > Grayscale gradient </option><option value= "1" selected= "selected" > Change r value </option><option Value= "2" > Change g Value </option><option value= "3" > Change b value </option></select> <span class= "f999" > The corresponding value will force the change between 0~255 </span></td> </tr> </table> <div class= "box" id= "box" ></div& Gt <button onclick= "Javascript:createdata ()" > Gradient coloring </button> <address > Designed by silence, reproduced please indicate the source http://www.silentash.com/?id=109 </address> </div> <script type= "t Ext/javascript "> var rs = document.getElementById (" Rvalue "); var GS = document.getElementById ("Gvalue"); var bs = document.getElementById ("bvalue"); function init () { var str; for (Var i=0;i<=255;i++) {var opr = document.createelement ("option"); var OPG = document.createelement ("option"); var OPB = document.createelement ("option"); opr.innerhtml = i; opg.innerhtml = i; opb.innerhtml = i; switch (i) {case 100:opb.selected= "selected"; Case 200:opg.selected= "selected"; } gs.appendchild (OPG); Rs.appendchild (OPR); Bs.appendchild (OPB); } setdiv (); function Setdiv () {var font = document.getElementById ("Ctext"). Value; var dobj = document.getElementById ("box"); Dobj.innerhtml=font; function Createdata () {var font = document.getElementById ("Ctext"). Value; var r = Rs.options[rs.selectedindex].text; var g = Gs.options[gs.selectedindex].text; var B = bs.options[bs.selectedindex].text; var type = document.getElementById ("CType"). Value; if (font== "" | | font== "undefined") {"Text cannot be empty, use default text"; document.getElementById ("Ctext"). Value = font; } Colorful (' box ', font,r,g,b,type); function Colorful (obj,font,r,g,b,type) {var boxobj; if (typeof (obj) = "string" | | typeof (obj) = = "Number") {boxobj = document.getElementById (obj); }else{boxobj = obj; } boxobj.innerhtml= "" +font+ ""; var num = boxobj.getelementsbytagname ("a") [0].scrollwidth; Boxobj.innerhtml= ""; for (Var i=0;i<=num;i++) {var j=i+1; var c=math.round (255/num*i); Switch (number (type)) {case 0:r=c;g=c;b=c;break; Case 1:r=c;break; Case 2:g=c;break; Case 3:b=c;break; var iobj = document.createelement ("A"); Iobj.innerhtml=font; iobj.style.clip= "rect (auto" +j+ "px Auto" +i+ "px"); Iobj.style.color= "RGB" ("+r+", "+g+", "+b+") "; iobj.href= "#"; Boxobj.appendchild (Iobj); } Init (); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Although IE has its own gradient filter, it is not supported by other browsers. The application of the clip attribute can support all browsers! Through the program, we can easily add clip attributes to each copy of text to split a piece of text into one pixel, respectively, color, and finally combined to achieve a colorful gradient!
