クロスプラットフォームのカラーグラデーションテキスト

ここに2つの画像があります-ここにあります： ^*







両方の画像に美しいテキストがあります。 その美しさの大部分は、このテキストは1つの単純な色で描かれているのではなく、滑らかな色の遷移、いわゆるグラデーション塗りつぶしで描かれているという事実によるものです。



ここで、Web開発者がグラデーションを背景画像として使用することを徐々に学習したことを思い出してください。この目的のために、プロパティ「 background： linear-gradient（ ... ）; 「 CSS画像値で説明し、 コンテンツモジュールレベル3の標準を置き換えました 。 そして、ハイパーリンクで標準に目を向けると、すでに「候補勧告」のステータスに達していることがわかり、2012年4月17日にさかのぼります。 この日の最初の記念日を記念して、 テキストのグラデーションレンダリングは、背景のグラデーションレンダリングよりもWeb上でまだ一般的であるという事実についてお話ししましょう。



これはなぜですか？ はい、テキストのグラデーション色付けのための広く知られている唯一の手段は、テキストの境界に沿って背景（グラデーションを含む）を切り取る非標準のCSSコード 「 -webkit-background-clip：text 」であり、通常、 CSSコード 「 -webkit-text-fill-color： transparent 」は、テキスト自体の文字の透明性を確保し、背景がテキストを透過するようにします。 このコードは2008年の春から機能していますが、残念ながらWebKitベースのブラウザーでのみ使用されていますが、最近はその数が増えています（Operaのおかげで独自のエンジンから後退しているため）、それだけではグローバルブラウザーエンジニアリングの成果を使い果たしていません。 このコードは、FirefoxでもInternet Explorerでも機能しません。



このデッドロックを克服し、色のグラデーションで描画されたテキストのクロスプラットフォーム性を達成することは可能ですか？ はい、可能です。 ただし、このためにはCSSではなくjavascriptを使用する必要があります。



Codename RainbowsプロジェクトのWebサイトにアクセスし、 そこでデモページを開きます （たとえば、 Firefoxで）-グラデーション内のテキストの9つの例が表示されます。 上記の2つの例を借りたのはそこからでした。



これはどのように達成されますか？ マニュアルを読むと、jQueryプラグインが機能していることがわかります。jQueryプラグインは、テキストを1ピクセルの幅の狭い水平ストリップにカットします。このストリップ内：







Codename Rainbowsプロジェクトの作者の頭に浮かんだこの幸せな考えのおかげで、テキストのクロスプラットフォームレンダリングの解決されたタスクは、与えられた色のグラデーションであると考えることができます。 確かに、1つの特定の場合にのみ解決されました：勾配は垂直でなければなりません。さらに、この実装では、上部と下部の色のみを設定できます。たとえば、いくつかの特別な中間点を割り当てて「クロム」文字の効果を実現することはできません。 しかし、そういうわけで、私たちは喜ぶべきことがあります。



_______________

* _{シェークスピア、「デンマークの王子のハムレット」、第3幕、場面IV、パステルナク訳。}