二重縁取りテキストのCSS作成ツール
CSSのtext-strokeと擬似要素を使って、文字に二重の縁取り（ボーダー）を作成するCSSジェネレーターです。
プレビュー
<span class="double-border-text" data-text="{{text}}">{{text}}</span>.double-border-text {
position: relative;
font-size: {{size}}px;
font-weight: bold;
color: {{color_text}};
-webkit-text-stroke: {{width_outer}}px {{color_outer}};
}
.double-border-text::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: {{color_text}};
-webkit-text-stroke: {{width_inner}}px {{color_inner}};
}機能・使い方
- CSSの
-webkit-text-strokeと擬似要素::beforeを重ねることで、二重の縁取り文字を作成します。 - 文字色、外側の縁取り、内側の縁取りの各色と太さを調整できます。
- HTMLの
data-text属性と中身のテキストは一致させる必要があります（ツールが自動で同期します）。
CSSプロパティの説明
-webkit-text-strokeで文字の縁取りを行っています。
このプロパティだけでは縁取りが文字の内側にも食い込んで文字が潰れてしまうため、::before擬似要素を使って元のテキスト（内側用）を上に重ねて表示することで、綺麗な二重縁取りを実現しています。
