CSS | テキストを白抜きにする方法

2022-01-25CSS テキスト,CSS

CSSでテキストの文字を白抜きにする方法を紹介しています。

テキストを白抜きにする

テキストを白抜きにする表示サンプルとCSSのサンプルコードになります。

See the Pen CSS | Bold text by yochans (@yochans) on CodePen.

中が白色に縁取りテキストにclass名「.text1」を指定、中が透過色の縁取りテキストにclass名「.text2」を指定しています。

<p class="text1">ONE NOTES</p>
<p class="text2">ONE NOTES</p>

縁取り部分は「-webkit-text-stroke」プロパティで2pxの太さにしています。
「-webkit-text-stroke」は「text-stroke」ではなくベンダープレフィックスで指定する必要があります。

縁取りより中の部分を透過させるにはテキストの色「color」に透過色を示す「transparent」を指定します。

.text1{
	margin: 10px;
	font-size: 70px;
	font-weight: bold;
	color: #FFF;
	-webkit-text-stroke: 2px #000;
}

.text2{
	margin: 10px;
	font-size: 70px;
	font-weight: bold;
	color: transparent;
	-webkit-text-stroke: 2px #000;
}