Cross-platform text drawn with a color gradient

Here are two pictures - here and here: ^*







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

')

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



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



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



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



How is this achieved? Reading the manual , it is easy to find out that the jQuery plugin is in effect, which cuts text into narrow horizontal strips of one pixel height, and inside each such strip displays a copy of the text colored in the required intermediate color and vertically shifted so as to exactly become the original text inside this strip:







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



_______________

* _{Shakespeare, "Hamlet, Prince of Denmark", Act III, Scene IV, Pasternak.}