CSSで背景画像の切り抜き、文字色をmix-blend-modeで途中から変える

CSSで背景画像の切り抜き、文字色をmix-blend-modeで途中から変える

こんにちは!

今回の記事は、

 CSSを使って文字色をmix-blend-modeで途中から変える、背景画像を文字に沿って切り抜く 

記録です。


サンプル画像はこちら↓

 

文字をマスクして途中から色を変える
背景画像を文字に沿って切り抜く

デモはこちら↓(スクロールすると、文字の切り抜きもあるよ!)

See the Pen 背景マスク、切り抜きCSS by dyna (@sakudyna) on CodePen.

 

テキストにマスクをする

こちらの画像から行ってみたいと思います。

 

文字をマスクして途中から色を変える

 

※こちらのサイトを参考に、ちょっとカスタマイズさせていただいてます。(いつもありがとうございます)

https://b-risk.jp/blog/2019/10/text-mask-animation/

考え方

以下、先ほどのサイトを参考に、私の場合こんな感じで作成しています。


テキストマスクの考え方


・div(visual)でくくり、背景を設定する。
・その中に .mask nomal と .mask burn を作成し、重ねる
・nomal と burn でそれぞれクリップ(切り抜き)して文字色を変更する
・背景が明るい場合は after を使って背景を暗くする


clip-path で切り抜く

イメージとしては、Photoshopやイラストレーターのような、レイヤーを重ねて作る感じになります。

 .nomal と .burnで同じものを作成し重ね合わせます。(.mask のCSS)

その nomal、 burn でそれぞれ表示したい部分を cilp-path で切り抜きます。

 

 

cilp-pathの詳細については以下。

 

要素のどの部分を表示するかを設定するクリッピング領域を作ります。

具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

引用元:https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

 

引用元のサンプルが分かりやすいよ!

 

clip-path: polygon は、多角形にできます。

※今回は四角に切り取っていますので、下記はその例です。
clip-path: polygon( 左上頂点の座標, 右上頂点の座標 , 右下頂点の座標 , 左下頂点の座標);
頂点の座標(左上)を時計周りに指定し、作成できます。
順番的には「左上」・「右上」・「右下」・「左下」です。

簡単なデモはこちら↓(スマホの方はResultをおしてね)

See the Pen cp-polygon by dyna (@sakudyna) on CodePen.


mix-blend-modeで文字色を変える

mix-blend-modeを使うと、Photoshopや画像加工のように、背景色を変化させることができます。

 

要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

引用元:https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

 

上記URLに見え方のサンプルがあるよ!
こちらも分かりやすいです↓
https://fit-jp.com/demo/blendmode/

 

対応ブラウザは以下です。

引用元:https://caniuse.com/?search=mix-blend-mode

 

ここでは、.burn に mix-blend-mode: overlay; を設定しています。


片側の背景を塗りつぶす

このままだと、背景画像が大きくて参考サイトのようにならなかったので、

.nomal 側の背景色を指定して、背景が見えないように塗りつぶします。

 

 

背景画像に色を重ねる

このままだと文字が見えずらいので、背景画像に色を重ねます。

疑似要素を作ってあげて、そこに背景色を追加します。

 

 

こんな感じでこちらができました!

 

文字をマスクして途中から色を変える

 

参考サイト様、ありがとうございます!

 



背景を文字型に切り抜く

次はこちらです。

背景を文字型に切り抜く

 


background-clip: text; を使う

こちらを使うと、背景画像をテキスト型に切り抜きができます。

参考サイト:

https://developer.mozilla.org/ja/docs/Web/CSS/background-clip


ちなみに、ポイントとしては、

1.画像を指定

background: url(画像のパス) no-repeat center center;

 

2.テキストクリップ
background-clip: text;
-webkit-background-clip: text;

 

3.color: transparent; の指定

color: transparent;

  

を記載しないと、うまく表示してくれません。

 

対応ブラウザは以下。

引用元:https://caniuse.com/?search=background-clip

 

 


CSSも楽しいですね~(^^)

また面白いものがあったら記事にしたいと思います。

ここまで読んで下さりありがとうございます。

<あわせ読みたい>