こんにちは!ラクです。
この記事では、文字を中抜きしてオシャレにする方法を紹介します!
ラク
中抜きって良いよね!(語彙力)
目次
文字を中抜きする方法
中抜きを実装するまでの手順はこんな感じ。
STEP1
文字の色を透明にする
「color: transparent;」を使う。
STEP2
文字を縁取りする
「text-stroke」を使う。
STEP3
完成!!
文字の色を透明にする
文字の色を透明にする場合は、以下のコードを使用します。
color: transparent;

文字を縁取りする
次に、文字を縁取りするには以下のコードを使います。
text-stroke: 2px black;
-webkit-text-stroke: 2px black;
MEMO
このプロパティは、ブラウザの拡張機能なので「-webkit-」をつけています。
完成!!
これで、文字を中抜きできました!
ラク
縁の色や太さは、自分好みにアレンジして見て下さい!