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

今回は、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文字ごとにカラー指定する形でグラデーションを表現しておりました。

これがまた、大変な作業でした。

なので、これを実現化するために専用のアプリなどを作る人もおりました。

（かく言う自分も作った口です(笑)）

しかし、こんな苦労も…

「background-clip: text;」

というCSSが出来てきてから、状況は一変します(笑)

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

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

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

こんな形で使われます。

で、例の「background-clip: text;」 ですが…なんと、テキストの形にのみ、背景を反映するという…誰が考えたのか奇妙奇天烈ですが、ありがたいCSSとなっております。

ただし、colorで文字色を指定すると、文字色が優先されるので、

「color: transparent;」

を指定しておかないといけません。

【HTML】

<span class="gradient">あいうえおかきくけこさしすせそ</span>

【CSS】

.gradient {
    color: transparent; /* 文字色を透明化 */
    background:linear-gradient(90deg,#f00,#0f0); /* 背景色にグラデーションを指定 */
    background-clip: text; /* テキストでくり抜く */
}

これだけで、文字のグラデーションが可能になります。

感の鋭い方ならわかるかと思いますが・・・

グラデーションのみでなく、画像やbackgroundで生成した模様など、どんな背景でもテキストの形で切り抜きができます。

これで素晴らしいグラフィカルなテキストが表現できる！！

となることはなるんですが…

実は注意点もあります。

■text-shadow とは併用できないが・・・

もう、見出しの通りです。

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

まあ、やってみるとわかると思うんですが…

「text-shadow」

が優先されて、文字内の背景が表示されなくなります。

ただし、前回のルーズリーフCSSの回でご紹介した

filter: drop-shadow();

を使用すれば、文字に沿っての影つけをすことが可能です！！

text-shadow を使ってしまうとうまくいきませんが、

filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4));

という風に text-shadow から filter: drop-shadow に差し替えることで、グラデーション文字に影つけが実現できます☆

■まとめ

文字装飾の可能性が「background-clip: text;」のおかげで大幅に広がったわけで、これを覚えておくだけでもデザインの幅がかなり広がりそうではありますね(^▽^)/

CSS、もうほぼPhotoShopの領域ですやん(笑)