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/
考え方
以下、先ほどのサイトを参考に、私の場合こんな感じで作成しています。
・その中に .mask nomal と .mask burn を作成し、重ねる
・nomal と burn でそれぞれクリップ（切り抜き）して文字色を変更する
・背景が明るい場合は after を使って背景を暗くする
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="visual"> <div class="mask normal"> <p class="txt"> <span>Hello world</span> <span>Hello world</span> </p> </div> <div class="mask burn"> <p class="txt"> <span>Hello world</span> <span>Hello world</span> </p> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | .visual { padding:2px; background: url(画像パス) no-repeat right center; margin: auto; position: relative; width: 860px; height: 400px; padding:0; } .mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .normal { color: #13e7fff8; -webkit-clip-path: polygon(0 0, 262px 0, 262px 410px, 0 410px); clip-path: polygon(0 0, 262px 0, 262px 410px, 0 410px); background-color: #fff; } .burn { color: #e4fffe; -webkit-clip-path: polygon(262px 0, 860px 0, 860px 400px, 262px 400px); clip-path: polygon(262px 0, 860px 0, 860px 400px, 262px 400px); mix-blend-mode: overlay; } /*背景を暗く*/ .burn::after{ content: ''; background-color: rgba(0, 5, 71, 0.692); position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 400px; } .txt { font-size: 90px; font-weight: 900; line-height: 1; position: absolute; top: 85px; left: 0px; } |
clip-path で切り抜く
イメージとしては、Photoshopやイラストレーターのような、レイヤーを重ねて作る感じになります。
.nomal と .burnで同じものを作成し重ね合わせます。（.mask のCSS）
その nomal、 burn でそれぞれ表示したい部分を cilp-path で切り抜きます。
1 2 3 4 5 6 7 8 9 10 11 | .normal { -webkit-clip-path: polygon(0 0, 262px 0, 262px 470px, 0 470px); clip-path: polygon(0 0, 262px 0, 262px 470px, 0 470px); } .burn { -webkit-clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px); clip-path: polygon(262px 0, 862px 0, 862px 460px, 262px 460px); } |
cilp-pathの詳細については以下。
要素のどの部分を表示するかを設定するクリッピング領域を作ります。
具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。
引用元：https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
引用元のサンプルが分かりやすいよ！
※今回は四角に切り取っていますので、下記はその例です。
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; を設定しています。
1 2 3 4 5 | .burn { mix-blend-mode: overlay; } |
片側の背景を塗りつぶす
このままだと、背景画像が大きくて参考サイトのようにならなかったので、
.nomal 側の背景色を指定して、背景が見えないように塗りつぶします。
1 2 3 4 5 | .normal { background-color: #fff; } |
背景画像に色を重ねる
このままだと文字が見えずらいので、背景画像に色を重ねます。
疑似要素を作ってあげて、そこに背景色を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | /*背景を暗く*/ .burn::after{ content: ''; background-color: rgba(0, 5, 71, 0.692); position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 460px; } |
こんな感じでこちらができました！
参考サイト様、ありがとうございます！
背景を文字型に切り抜く
次はこちらです。
1 2 3 4 5 | <div class="contein"> <p class="clipText">Hello world</p> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .clipText{ background: url(画像のパス) no-repeat center center; background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 90px; font-weight: 900; line-height: 1; position: relative; top: 40px; text-align: center; } |
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も楽しいですね～（＾＾）
また面白いものがあったら記事にしたいと思います。
ここまで読んで下さりありがとうございます。
<あわせ読みたい>
広告
