Gradient text for picture control

Gradient | Control the so-called continuous fading text that we saw before, is a word-changing color. And we see the following demo in the real continuous gradient text, you should not have seen it? And the demo is a text input box that can accept user input!

　　Demo:

In fact, the color of the gradient text that we see is the color of the gradient-changing picture behind the transparent text. Now let's see how it's done.

Let's introduce this magical filter: Chroma () filter.

Its syntax is: Filter:chroma (color= #FF0000), where "#FF0000" is the color value.

The effect is that, within the control of the filter, the pixel (including the pixel of the picture) becomes transparent if the color of the pixel is the same as that of its color value. For example, if you use a statement that is Filter:chroma (color= #FF0000), all pixels with red color in the filter's scope become transparent.

So we can use this filter, the text of the input box into a transparent, and then put a dynamic gradient in its background image, you can achieve this effect.

The demo is using the following picture:

This is a very simple animation, but only the location of components move, it is not difficult to do one. The following code describes the implementation:

<!--The first step, set the background picture. We set it to the smallest size, because it will be "propped up". The black background is set to prevent the text from--> when the picture is loaded incorrectly
<div style= "Background:url (mcolor.gif) Background-color: #000000; width:1;height:1" >

<!--Step two, use the chroma () filter to set the red color to transparent. In order to just text transparently, we set the white background color as a cover-->
<div style= ' Filter:chroma (color= #FF0000); Background-color: #FFFFFF; width:1;height:1; ' >

<!--The third step is to set the text color of the input box to red-->
<input type= "text" name= "text" size= "style=" color: #FF0000; border:1px solid #000000; "Value=" This is the gradient text in the input box >

<!--OK, end all tags-->
</div>

</div>

OK, this effect has been done, more simple and practical than you think? In fact, not only text input box, in many places can also be achieved in Oh!