CSS | テキストが浮かび上がっているように見せる方法

2021-11-24CSS テキスト,CSS

CSSのtext-shadowプロパティを使ってテキストが背景から少し浮かび上がっているように見せるシンプルなサンプルを紹介しています。

テキストを浮かせる

text-shadowプロパティを利用した単純な方法でテキストを浮かび上がらせるサンプルコードです。

See the Pen CSS | Responsive Text by yochans (@yochans) on CodePen.

サンプルのHTMLには、通常のpx指定したものと、レスポンシブに対応したものとふたつのpタグを作成しています。

<p class="text">ONE NOTES</p>
<p class="resp-text">ONE NOTES</p>

text-shadowプロパティのオプション引数は、横の位置、縦の位置、影の大きさ、影の色となっています。

浮かせるように見せるには、元のテキストより少し離れた場所に影を用意します。

.text {
	margin: 0;
	font-size: 50px;
	text-shadow: 5px 5px 3px rgba(0,0,0,0.5);
}

以下はレスポンジフサイズに対応したテキストを使った影文字を指定したサンプルコードになります。

PCからアクセスされている場合はブラウザサイズの拡縮で確認できると思います。

.resp-text {
	margin: 0;
	font-size: 10vw;
	text-shadow: .9vw .6vw .3vw rgba(0,0,0,0.5);
}