The colorful gradient effect of js Clip whimsy

Source: Internet
Author: User

Previously, the Clip attribute was used to splice up and down two half different colors of text.
Colorful gradient words, compatible with all mainstream browsers.
Only the colorful () function is really useful in page JS:
Copy codeThe Code is 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 ("");
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 implements 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 "", 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: # f1f1 F1; border: 1px dashed # ddd; padding: 10px; font-style: normal; color: #999;} address a, address a: visited {color: # c00 ;} </style> </pead> <body> <strong> CSS colorful gradient words </strong> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td height = "10" colspan = "2" align = "center"> </td> </tr> <td width = "19%" height = "30" align = "right"> text: </td> <td width = "81%"> <input name = "text" type = "text" id = "ctext" s Ize = "30" maxlength = "16" value = "Enter the text you want to generate gradient here" onkeyup = "setDiv () "/> </td> </tr> <td height =" 30 "align =" right "> r value: </td> <select name = "rvalue" id = "rvalue"> </select> initialize the R value in the RGB color </td> </tr> <tr> <td height = "30" align = "right"> G value: </td> <select name = "gvalue" id = "gvalue"> </select> initialize the G value in the RGB color </td> </tr> <tr> <td height = "30" align = "right"> value B: </td> <select name = "bvalue" id = "bvalue"> </se Lect> initialize the B value in the RGB color </td> </tr> <td height = "30" align = "right"> gradient mode: </td> <select name = "ctype" id = "ctype"> <option value = "0"> grayscale gradient </option> <option value = "1 "selected =" selected "> variable R value </option> <option value =" 2 "> variable G value </option> <option value =" 3 "> change B value </option> </select> the value range is 0 to 0 ~ 255 variation </td> </tr> </table> <button onclick = "javascript: createData ()"> gradient coloring </button> Designed by Silence, reprint please indicate the source http://www.silentash.com /? Id = 109 </address> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Although IE has its own gradient filter, it is not supported by other browsers. Applications with the CLIP attribute can support all browsers! Through the program, we can easily add the CLIP attribute to each text copy to split a text section into pixels, color them separately, and combine them to achieve a colorful gradient!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.