Encapsulates a JS class (CLIP) that automatically generates gradient words)

Source: Internet
Author: User

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: CopyCode Code: rel = "# hexadecimal color-# hexadecimal color"

It cannot contain one or more characters.Xmlns = "http://www.w3.org/1999/xhtml">


CSS + JS colorful gradient words instructions for useFirst, introduce clip. js to the HTML page, and then add the name and rel attributes to the HTML elements (such as span) that require gradient effect. The format is as follows:

<Span name = "clip: G" rel = "# 00ffff-#000000"> blue-black gradient text </span>
    1. The name attribute is used as a gradient sign. If the name value is incorrect, no effect will be generated;
    2. The rel value provides the color of the header and tail, which is subject to the hexadecimal color code. The format is "start color-end color". Other formats are not supported. Incorrect format will not produce results.
    3. Add clip. gradient (). INIT ({T: ["span", "a"]}) to the page. This code will generate a gradient.

Demo:Blue-black gradient text

This is a piece of text. We can select a few words as needed.Gradient effect, Font StyleChanges with the global style of the pageAnd has nothing to do with this Js. You can look at it more carefully here.

Gradient link from red to Gray: I am a connection, using the tag designed by silence. For details, please indicate the source.

Http://www.silentash.com /? Id = 110

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.