Cross-platform color gradient text

Here are two images - here and here: ^*



On that and on another image we see a beautiful text. For the most part of its beauty, this text is due to the fact that it is not drawn with one simple color, but with a smooth color transition - the so-called gradient fill.

It is appropriate to recall that web developers have gradually learned to use gradients as background images: for this purpose, they correctly use the property “ background: linear-gradient ( ... ); " Described in CSS Image Values ​​and Replaced Content Module Level 3". And if we now turn to the standard by hyperlink, we will see that it has already reached the status of “Candidate Recommendation”, and that it dates back to the seventeenth of April 2012. In honor of the first anniversary of this day, let me talk about the fact that gradient rendering of text is still common on the Web much less than gradient rendering of the background.

Why is this so? Yes, because the only widely known tool for gradient coloring of text is the non-standard CSS code “ -webkit-background-clip: text ”, which cuts any background (including gradient) along the border of the text - and which is usually used in combination with CSS code " -webkit-text-fill-color: transparent», Which ensures the transparency of the letters of the text itself, so that the background looks through it. This code has been working since the spring of 2008 , but, unfortunately, only in WebKit-based browsers, although the number has recently increased (thanks to Opera, which has stepped back from its own engine), they alone do not exhaust the fruits of global browser engineering. Neither in Firefox nor in Internet Explorer will this code work.

Is it possible to overcome this deadlock and achieve cross-platform text drawn in a color gradient? Yes it is possible; but for this you have to resort to javascript instead of CSS.

Go to the site of the project « of Codename Rainbows », open there the demo page(for example, in Firefox) - and you will see nine examples of text in a gradient. It was from there that I borrowed the two examples given above.

How is this achieved? Reading the manual , it’s easy to find that the jQuery plugin works, which cuts the text into narrow horizontal strips of one-pixel height, and inside each such stripe displays a copy of the text painted in the necessary intermediate color and shifted vertically so that it fits exactly in place of the original text inside this strip:



Thanks to this happy thought that came to the mind of the authors of the Codename Rainbows project, we can consider the solved task of cross-platform rendering of text to be a given color gradient. True, it was solved only for one particular case: the gradient should be vertical, and besides, in this implementation it is possible to set only the top and bottom colors of it - it will not work, for example, to assign a number of special intermediate points and thereby realize the effect of “chrome” letters. But so and so we have something to rejoice.

_______________
* _{Shakespeare, “Hamlet, Prince of Denmark,” Act III, Scene IV, translated by Pasternak.}