cssのみでグラデーションテキストを実装する
目次
cssのみで対応できますがブラウザによっては対応してないため、諦めるか、無難な表示になるようにフォールバックしておきます。例えばIE11は未対応です。
MDNは大変参考になりました。
https://developer.mozilla.org/ja/docs/Web/CSS/background-clip
使用プロパティ
テキストをグラデーションさせる際に使用する主なプロパティです。
- background
- background-clip (-webkit-background-clip)
- color
実装
backgroundでグラデーション背景を指定します。background-clip: textを指定してbackgroundがテキストで切り抜かれるようにします。color: transparentで文字を透過して、backgroundが見えるようにします。
これをscssのmixinにしてサンプル実装したものがこちらのcodepenです
IEでは@supportsが対応していないので、フォールバックスタイルをデフォルトとして、対応している時だけグラデーションスタイルにします。
対応しているブラウザではこのようになります。
chromeスクリーンショット
対応していないブラウザではこのようになります。
（codepenがIE11で見れなかったのでhttps://nao5151.github.io/gradation-text/ のスクショになってます）
IE11スクリーンショット
safariでハマったこと
buttonタグに上記のスタイルを適用してたところ、safari12で文字が見えないことに気が付きました。
要素によってそういうことがあるみたいです。
いくつかの要素にグラデーションスタイルを当てたcodepenも準備しました。
chromeスクリーンショット
mac safari12スクリーンショット
iOS safari12スクリーンショット
そのため、解決策として以下を考えました。
- buttonタグの利用をやめaタグなどにする
- buttonタグの中のテキストをspanタグでラップしてスタイルをあてる
機能としてはbuttonタグが妥当だったため、その時は2番目で対処しました。
まとめ
cssで対応できるため動的なテキストもグラデーションさせることができます。
多くのブラウザで表現が可能ですが、場合によってフォールバックスタイルにするか、動的ではなければ画像にするかなど、適宜デザイナーの方と相談するのが良いと思います。