【CSS】テキストのグラデーション～文字でマスク！

とりあえず、先行してサンプルHTMLを載せておきます。
https://revenue-test.biz/test_html/text-gradient.html
これを見ればまあだいたいはどんなものかわかるかと思いますが…(^▽^;)

HTMLでテキストをグラデーション・黎明編

「HTMLで、テキストをグラデーション表現したい！」
という欲求は、インターネット創世記から割とあったようです。

<font color="#ff0000">あ</font><font color="#cc3300">い</font><font color="#996600">う</font><font color="#669900">え</font><font color="#33cc00">お</font>

こんな感じで、1文字1文字ごとにカラー指定する形でグラデーションを表現しておりました。
これがまた、大変な作業でした。
なので、これを実現化するために専用のアプリなどを作る人もおりました。
（かく言う自分も作った口です(笑)）

サンプルHTMLでは、<span style="color:●●"></span> で表現しております。いや、だって<font>タグは現在非推奨ですし(^_^;)

しかし、こんな苦労も…
「background-clip: text;」
というCSSが出来てきてから、状況は一変します(笑)
いや、このCSSがブラウザ対応してきたのは、ごく最近のことで…
いまだに-webkit-のベンダープレフィックスが必要なんです。
（FireFoxのみ-webkit-なしでも反映できるようです。）

HTMLでテキストをグラデーション・NextGeneration
テキストでマスク！？

「background-clip」というCSSは、背景の範囲を指定するものなんですが、

background-clip: border-box; （borderの範囲にまで背景を反映）
background-clip: padding-box; （paddingの範囲にまで背景を反映）
background-clip: content-box; （paddingの内側まで背景を反映）

こんな形で使われます。
サンプルHTML（4.background-clip の他の値 参照）

で、例の「background-clip: text;」ですが…なんと、テキストの形にのみ、背景を反映するという…誰が考えたのか奇妙奇天烈ですが、ありがたいCSSとなっております。
ただし、colorで文字色を指定すると、文字色が優先されるので、
「color: transparent;」
を指定しておかないといけません。
（サンプルHTMLでは、非対応ブラウザ対策で、「-webkit-text-fill-color: transparent;」で対応）

というわけで、テキストの形で背景をくりぬけるということは…背景にグラデーションや画像などを使用すれば、その通りにテキストが表現されるということになります。
細かいCSSは、サンプルHTMLでご確認をお願いします。

これで素晴らしいグラフィカルなテキストが表現できる！！
となることはなるんですが…
実は注意点もあります。

text-shadow とは併用できない

もう、見出しの通りです。
「text-shadow」は、文字通りテキストに影をつけるCSSですが、背景に対して影をつける機能ですので、テキストの形に背景を表示させる「background-clip: text;」とは、まったく相容れません。

まあ、やってみるとわかると思うんですが…
「text-shadow」
が優先されて、文字内の背景が表示されなくなります。

ですので、
「文字をグラデーションにして～、そして文字に影をつけて～」
という欲張りな願望は、今のところCSSでは不可能…という状態です。
（無理やりBOXを2段重ねにして、強引に影のみとグラデーションテキストのみを重ね表示にすればできなくもないかもしれませんが…キーワードの羅列になりSEO的にもよろしくないですし、かかる手間も結構なものになりそうです）

まとめ

上記（文字をグラデーションにして～、そして文字に影をつけて～）のような欲求は果たしてCSSで叶えられるのか定かではないですが…
ただ、文字装飾の可能性が「background-clip: text;」のおかげで大幅に広がったことは事実で、これを覚えておくだけでもデザインの幅がかなり広がりそうではありますね(^▽^)/