Home > Developer > JavaScript
All you need to do is add the text that requires gradient to the external container (the span tag or the tag can be used) in the HTML page, and add the name attribute to the tag to mark the gradient element, the rel attribute indicates the gradient color. The format of the rel attribute is very important:
Copy codeThe Code is as follows:
Rel = "# hexadecimal color-# hexadecimal color"
It cannot contain one or more characters.
<! 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 words </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; f Ont: 16px/1.5 arial;} p {font: 16px/1.5 "", 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; pa Dding: 10px; font-style: normal; color: #999;} address a, address a: visited {color: # c00 ;} </style> </pead> <body> <strong> CSS + JavaScript colorful gradient word instructions </strong> first, introduce clip on the HTML page. add the name attribute and rel attribute to the HTML elements (such as SPAN) that need the gradient effect. The format is as follows: <span name = "clip: g "rel =" #00ffff-#000000 "> blue-black gradient text </span> <ol class =" box "> <li> name attribute is used as the gradient identifier, if the name value is incorrect, no effect will be generated. </li> <li> the rel value provides the color of the header and tail. The hexadecimal color code prevails, the format is "start color-end color". Other formats are not supported. Incorrect format will not produce results. </Li> <li> Add clip to the page. gradient (). init ({t: ["SPAN", "A"]}); this code generates gradient. </Li> </ol> <p> Demonstration: blue-black gradient text is a piece of text. We can select a few words as needed for gradient effect. The font style varies with the global style of the page, it has nothing to do with this JS. Here we can look at it more carefully. </P> gradient link from red to Gray: I am A connection, with A label Designed by Silence, reprint please indicate the source http://www.silentash.com /? Id = 110 </address> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
How about it? The effect is amazing, hey!
The HTML code for such an effect is as follows:
Font Style
Copy codeThe Code is as follows:
<Span name = "clip: g" rel = "# cc0000-#00 ffff"> global style changes with the page </span>
,
This is simple. You can use the span element to contain text, and add the identifier and color value to the span element! It's not hard.
Finally, insert JS Code at the end of the HTML document to color the labeled elements.
<Script type = "text/javascript">
Clip. gradient (). init ({t: ["SPAN", "A"]});
</Script>
The {t: ["SPAN", "A"]} parameter indicates the elements that need to be reflected. Currently, it is only for the SPAN and A labels, if you want to use gradient color for the text inside the DIV, you need to write it as {t: ["SPAN", "A", "DIV"]}, this statement can also be encapsulated in the JS file together. However, considering the different requirements of each person, it is easy to configure the statement.
If Javascript is disabled in some browsers, you do not have to worry about page errors or other problems.
PS:I always think that this gradient method is useful because it can perfectly support all browsers (except for disabling JS =. = !)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
