Safariでちゃんと文字がマスクされない時【CSS】

ブラウザ毎に違った挙動をするので主にSafari、Chrome、Firefoxで確認してますが、Safariで何故か文字がちゃんとマスクされなかったので色々試して修正しました。

文字で背景画像、もしくは背景色をマスクしてオサレに表示したい時に使えます。


まず、普通にマスクする為のCSSを準備

以下のCSSコードでマスクできます。


.masktxt {
	color: rgba(0, 0, 0, 0);
	background: -webkit-linear-gradient(-45deg, rgba(4,191,207,0.7), rgba(191,25,203,0.7));
	-webkit-background-clip: text;
}

color: rgba(0, 0, 0, 0);で文字を透明にして、
background:-webkit-linear-gradient(-45deg, rgba(4,191,207,0.7), rgba(191,25,203,0.7));で背景にグラデーションをつけます。
あとは、-webkit-background-clip: text;でマスクするだけです。

ここで僕はHTMLで何故かpタグを使っていました。
一応HTMLはこんな感じ


<h2 class="masktxt">
			<div class="smalltxt">
				<p>These are my</p>
			</div>
			<span>S</span>
			<span>k</span>
			<span>i</span>
			<span>l</span>
			<span>l</span>
			<span>s</span>
		</h2>

*色々エフェクトをつける予定なのでspanで囲んでます。

Safariでの表示はこんな感じ

smalltxtの部分が表示されていません。*画像のやつはCSSでフォントとかサイズ、スタイルを変更しています。

Chromeなどではpタグでも表示されましたが、何故かSafariでは表示されなかったです。*文字をダブルクリックすると出てきました(謎です)
こんな感じ

そこでpタグをspanタグに変えるとちゃんと表示されるようになりました。それだけですww

見えない文字をダブルクリックする人いないですし、スマホだとそんなん出来ないのでちゃんと表示されて良かった笑

こんな感じでオサレな文字の完成です〜

では〜



Posted

in

,

Tags: