All you need to do is to use the gradient text in the HTML page plus the outer container (span label or a tag), add the name attribute to the label for the gradient element, and the Rel property to indicate the color of the gradients, the format of the Rel attribute is important:
Copy Code code as follows:
One or more less than one character will not work.
<! 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>css+js Colorful gradient word </title> <script type=" Text/javascript "src=" Clip.js "> </script> <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; p{font:16px/1.5 "Blackbody", arial;padding:5px 10px;margin:0;} . code{padding:8px;} . Box{background-color: #fff; border:1px dashed #f60; margin:8px 0;padding:5px;list-style-position:inside}. Box li{ padding:0;} . F999{color: #999;} A:link{text-decoration:none;} A:hover{text-decoration:underline;} A:visited{text-decoration:underline;} Address{background-color: #f1f1f1; border:1px dashed #ddd;p adding:10px;font-style:normal;color: #999;} Address A,address a:visited{color: #c00;} </style> </pead> <body> <div > <p><strong>css+js Colorful gradient word usage Instructions </strong></ h3> <div class= "code" > First introduces Clip.js to HTML pages, and then adds the name and REL attributes to HTML elements that require a gradient effect, such as span, in the following format: <div class= "box "> <span name=" clip:g "rel=" #00ffff-#000000 "> Blue-Black gradient text </span> </div> <ol class=" box "> <li>name property as a gradient label, the name value is not correct, will not produce effects;</li> <li>rel value provides the head and tail color, whichever is the 16 color code, the format is "Start color-end Color", other formats are not supported. An incorrect format will not produce an effect. </li> <li> Finally, you need to add clip.gradient (). Init ({t:["SPAN", "A"]}) to the page; This code generates gradients. </li> </ol> <p> Demo: <span name= "clip:g" rel= "#00ffff-#000000" > Blue-Black gradient text </span> This is a piece of text that we can Choose a few words to do <span name= "clip:g" rel= "#ff008f-#00ff00" > Gradient effect </span> font style <span name= "Clip:g" # cc0000-#00ffff "> Changes with the global style of the page </span>, and this JS has nothing to do, here in bold can be seen more carefully. </p> <div class= "box" > by red-ash gradient link: I am connected, with a tag </div> </div> <address> designed by SilenCE, reprint please indicate the source http://www.silentash.com/?id=110 </address> </div> <script type= "Text/javascript" > Cl Ip.gradient (). Init ({t:["SPAN", "A"]}); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
How, the effect is very bright, hehe!
Such an effect of the HTML code is this:
Style of font
Copy Code code as follows:
<span name= "clip:g" rel= "#cc0000-#00ffff" > Changes with the global style of the page </span>
，
It is so simple, first with the span element contains text, and then to the span element plus the mark and color value it! It's not difficult.
Finally inserts the JS code at the last position of the HTML document to the tagged element coloring
<script type= "Text/javascript" >
Clip.gradient (). Init ({t:["SPAN", "A"]});
</script>
Where the {t:["SPAN", "a"]} This parameter indicates the element that needs to be given a response, now is only for SPAN and A label, if you need to give DIV inside text also use fade, you need to write {t:["SPAN", "A", "DIV"}, Originally this sentence can also be packaged into JS file inside, but considering everyone's needs are different, so put outside convenient configuration.
If some users of the browser disabled JS also do not worry about the page confusion or other problems.
PS:It always makes me feel that this gradient method has the perfect support for all browsers (except for JS =.=!)
