Miobiki

  1. HOME
  2. css
  3. cssのみでグラデーションテキストを実装する

cssのみでグラデーションテキストを実装する

目次

cssのみで対応できますがブラウザによっては対応してないため、諦めるか、無難な表示になるようにフォールバックしておきます。例えばIE11は未対応です。

MDNは大変参考になりました。
https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

使用プロパティ

テキストをグラデーションさせる際に使用する主なプロパティです。

  • background
  • background-clip (-webkit-background-clip)
  • color

実装

  1. backgroundでグラデーション背景を指定します。
  2. background-clip: textを指定してbackgroundがテキストで切り抜かれるようにします。
  3. color: transparentで文字を透過して、backgroundが見えるようにします。

これをscssのmixinにしてサンプル実装したものがこちらのcodepenです

IEでは@supportsが対応していないので、フォールバックスタイルをデフォルトとして、対応している時だけグラデーションスタイルにします。

対応しているブラウザではこのようになります。
chromeスクリーンショット

chromeスクリーンショット

対応していないブラウザではこのようになります。
(codepenがIE11で見れなかったのでhttps://nao5151.github.io/gradation-text/ のスクショになってます)
IE11スクリーンショット

IE11スクリーンショット

safariでハマったこと

buttonタグに上記のスタイルを適用してたところ、safari12で文字が見えないことに気が付きました。
要素によってそういうことがあるみたいです。
いくつかの要素にグラデーションスタイルを当てたcodepenも準備しました。

chromeスクリーンショット chromeスクリーンショット

mac safari12スクリーンショット mac safari12スクリーンショット

iOS safari12スクリーンショット iOS safari12スクリーンショット

そのため、解決策として以下を考えました。

  1. buttonタグの利用をやめaタグなどにする
  2. buttonタグの中のテキストをspanタグでラップしてスタイルをあてる

機能としてはbuttonタグが妥当だったため、その時は2番目で対処しました。

まとめ

cssで対応できるため動的なテキストもグラデーションさせることができます。
多くのブラウザで表現が可能ですが、場合によってフォールバックスタイルにするか、動的ではなければ画像にするかなど、適宜デザイナーの方と相談するのが良いと思います。