白抜き文字(袋文字)のCSS作成ツール
文字の中を透明にしたり、指定色で塗りつぶした縁取り文字(アウトラインテキスト)を作成するCSSジェネレーターです。
プレビュー
<span class="outline-text">{{text}}</span>
.outline-text {
font-size: {{size}}px;
font-weight: bold;
color: {{color_fill}};
-webkit-text-stroke: {{width}}px {{color_outline}};
}
機能・使い方
- CSSの
-webkit-text-strokeを使用して、シンプルな白抜き文字(袋文字)を作成します。 - 文字の中(塗り)の色は、透過、白、黒、または好きな色を指定できます。
- 透過を選択すると、背景色が透けるデザインになります。
CSSプロパティの説明
-webkit-text-strokeを使用して文字の外側に線を描画(縁取り)しています。
文字の中の色(塗り)はcolorプロパティで指定しており、transparent(透明)を指定すると背景が透けるデザインになります。