【CSS】文字を中抜きしてオシャレに装飾する方法!!

こんにちは!ラクです。

この記事では、文字を中抜きしてオシャレにする方法を紹介します!

ラク

中抜きって良いよね!(語彙力)

文字を中抜きする方法

中抜きを実装するまでの手順はこんな感じ。

STEP1
文字の色を透明にする
「color: transparent;」を使う。
STEP2
文字を縁取りする
「text-stroke」を使う。
STEP3
完成!!

文字の色を透明にする

文字の色を透明にする場合は、以下のコードを使用します。

color: transparent;
【CSS】背景色や文字色を透明にする方法

文字を縁取りする

次に、文字を縁取りするには以下のコードを使います。

text-stroke: 2px black;
-webkit-text-stroke: 2px black;
MEMO
このプロパティは、ブラウザの拡張機能なので「-webkit-」をつけています。
【CSS】文字を超簡単に縁取りする方法!!

完成!!

これで、文字を中抜きできました!

ラク

縁の色や太さは、自分好みにアレンジして見て下さい!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です