What? Gradext ?

Yeah, I’m a lightweight script, (less than 7 KB), which I don’t need other libraries because I’m free and Independent. My task is to fill your text with Gradient.

Gradient on the text? You want to make a picture for each text? Or like the others you have the Claim of being modern and make Canvas?

I hope you don’t upset, but none. Finally, The texts will remain as a text.

Well if it’s like what you say, it's really good! How to use it?

I have two types of gradient, linear and radial just, you should call each of them you want.
gradext.linear({ elemID: id });
// The elemID is the only thing that should determine, other items are optional, even colors. gradext.radial({elemID: id });
// The elemID is the only thing that should determine, other items are optional, even colors.

Well, how can I apply my own setting?

Oh! Now, we got to the good parts!
However, in this version I’m not too wide, but I promise that I will develop myself. A series of my options are the same in both methods, but also have some differences. First I will say the Subscriptions: startPosition: int // Starting point of Gradient endPosition: int // Ending point of Gradient startColor: hexadecimal code // First Color (*) endColor: hexadecimal code // Last Color (*) elemID: string // ID of the tag which contains the text mode: string // horizontal or vertical of the gradient was identified as the 'horizontal' and 'vertical' quality: string // If the Vertical mode be selected, specify the level of quality of the gradient (usually for a font size of 50 pixels, the quality between 30 to 40 is Ideal) rgb: boolean // accepts the true and false and specify the type of output color format which is hexadecimal or RGB * I have to say about the color that the acceptable color is hexadecimal code and I don’t accept the RGB code, but I will accept each hexadecimal codes which the css accepts.
But the radial method has some other settings : radius: int // Which shows the radius of the gradient animation: boolean // accepts true or false value, and determined that the Gradient can have Animation or not delay: float // a numeric scale of seconds which determined the pause scale between each animation. direction: string // It determined the direction of the animation, which can be left to right ('ltr') or right to left ('rtl')

You Seem Great! But, honestly, now the gradient is not too much used. where do you like to use you?

Of course there are always new ideas, but maybe for some titles, effects of the animation would be interesting thing. Or sometimes it becomes interesting if the texts have a Gradient from left to right and the background has the opposite. Or on success or error messages for some users requests or anywhere else...
this is your art to surprise me with your creativity ...
Just one issue that I want to say is that my animation don’t have a good performance ( it increases the cpu usage in some cases ) and it is better to set up at least half a second delay for it, but I'm hopeful that in other versions I will make it better.

Fork Me on Github

Well, where can I download you?

we will approach it soon, but before that I have a surprise method for you, hover-able ( gradext.hoverable() ) is a method that run radial gradient. But the start point of radius gradient is a character which mouse of the user is located over it and some settings are differences from radial, for example: animation: boolean // It accepts true or false value and it determines that the specified color on the character should applied quickly or with animation We do not work with delay and direction
I suggest that even once (even for testing) use it now, it’s such an interesting thing: D
I've forgotten, for download , you should go to my github page and download me!

May I still be in touch with you?

Sure! If you got problem using me, just open your console( shift+(K or J) ) and i am there ...
and also, If you had any questions or you had any idea for my development, if you think that would add a certain method or anything else, to connect with me be Relax ;)

Thanks

Hope to see you …

Some Examples


Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.

gradext.linear({ elemID:'fg', startColor:'#932', endColor:'#fa9', rgb:true });

Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.

gradext.linear({ elemID:'sg', mode:'vertical', quality:25, startPosition:7, endPosition:16, startColor:'#51A527', endColor:'#9AF780' });

Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.

gradext.radial({ elemID:'tg', mode:'vertical', quality:30, animation:true, delay:.75, startColor:'#3D87AF', endColor:'#80CDF7', radius:15, direction:'ltr' });

Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.

gradext.hoverable({ elemID:'ng', animation:true, startColor:'#EF9432', endColor:'#7F480E', radius:10 //hover text above :D });