【CSS】mask-imageを使って文字や背景にテクスチャを適用してみよう

使用するスタイル

mask-image: {none | url() | linear-gradient() | image() };

概要

mask-imageのプロパティに設定した内容でマスキングをします。SVGを使用してマスクしたり、グラデーションを使ってマスクしたり、画像を使ってマスクすることができます。設定された内容のalphaの値でマスキングされます（rgbaのaの部分）。
試しに、左端をrgba( 255, 255, 255, 1 )、右端をrgba( 255, 255, 255, 0 )のグラデーションにしてみましょう。
グラデーションの作成方法はこちらをご覧ください。

上記のサンプルテキストのソースは下記です。

HTML
<div class="case-234"><span>サンプルテキスト Sample Text</span></div>
CSS
.case-234 {
  text-align: center;
}

.case-234 span {
  -webkit-mask-image: linear-gradient( to right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ) );
  mask-image: linear-gradient( to right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ) );
}

サンプル

mask-imageを使用してサンプルを作成しました。

mask-imageでヒョウ柄の文字を作成

あらかじめヒョウ柄のテクスチャーを用意して、透明度を設定しておきます。
必要ならここから落としてください。

.sample1-234 {
  color: hotpink;
  font-size: 60px;
  font-weight: 600;
  -webkit-mask-image: url( http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/hyou.png );
  mask-image: url( http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/hyou.png );
  -webkit-mask-size: 40px;
  mask-size: 40px;
  text-shadow: 1px   1px black,
                      -1px   1px black,
                        1px -1px black,
                      -1px -1px black;
}