【CSS3】文字にマスクをかける

説明が難しいんですけど、下の画像のとおりのデザインを作ります。 f:id:secon:20170925011654p:plain
こういったレイアウトをcssのみで実装出来ないかと思い調べたのでまとめました。

忙しい人向け

html

<div class="text-mask container">
  <div><span>カブトムシ<span></div>
</div>

css

.container {
  width: 100%;
  margin: 24px 0;
  padding: 40px 0;
}

.text-mask {
  /* 文字の設定 */
  font-size: 80px;
  font-weight: bold;
  text-align: center;

  /*** 背景色の設定 ***/
  /* 左半分(0～50%)が黒, 右半分(50%～100%)が白 */
  background: -webkit-linear-gradient(left, #0a0a0a 0%, #0a0a0a 50%, #fafafa 50%, #fafafa 100%);
}

.text-mask div {
  /*** 文字色の設定 ***/
  /* 左半分(0～50%)が黒, 右半分(50～100%)が白 */
  background: -webkit-linear-gradient(left, #fafafa 0%, #fafafa 50%, #0a0a0a 50%, #0a0a0a 100%);
  /* 文字色を透明化 */
  -webkit-text-fill-color: transparent;
  /* 背景を文字でマスク */
  -webkit-background-clip: text;
}

何をしているの

各プロパティを見ていきます。

- background: -webkit-linear-gradient(...);

linear-gradient() は色の線形グラデーションを表現します。
引数にはグラデーションの開始方向と色の変更場所を渡しています。
linear-gradient - CSS | MDN

今回は引数に(left, #0a0a0a 0%, #0a0a0a 50%, #fafafa 50%, #fafafa 100%)を指定しているので、グラデーションを左方向から初め、0～50%は白、50～100%は黒が設定されます。

-webkit-text-fill-color: transparent;

-webkit-text-fill-color - CSS | MDN

文字の塗りつぶし色を指定します。colorと違って、アウトラインは塗りつぶせません。
transparent によって文字色を透明にしています。

-webkit-background-clip: text;

background-clip - CSS | MDN
背景を文字でマスクします。いってしまえば、backgroundプロパティの値を文字に反映さえることができます（背景は消える）。
ですが優先度はcolorなどの文字色プロパティの方が高いので、text-fill-color: transparent によって文字色を透明化する必要があります。