cssで縁取り文字をつくる
1564
この記事を書いている人
縁取りの文字をつくるよ！
今日はこんな縁取り文字をcssで作ってみます。
縁取り文字を作るプロパティ
text-stroke
text-strokeを使います。
今年もあと少し
<p class="fuchidori">今年もあと少し</p>.fuchidori {
color: #fff;
-webkit-text-stroke: 1px #000;
text-stroke: 1px #000;
font-weight: bold;
font-size: 3em;
}text-strokeは縁取り文字を作れますが、IEには対応していません。(でももうIE対応してなくても良いと思います）
ただ、このプロパティは標準ではないようなので、あまり使わないようにとは書いてあります。
使うときはしっかり確認をしてくださいね
“出なくてもまぁいいだろう”という感じなら使っても良いかもですね。
SVGを使う
SVGを使うと堂々と縁取り可能です
<svg width="300" height="40" viewBox="0 0 300 40">
<text x="0" y="30">次はうさぎ年</text>
</svg>text {
font-size: 35px;
font-weight: bold;
stroke: gray;
fill: #fff;
}strokeが縁で、fillは塗りつぶしです。
svgの<text>で文字を書いて、cssプロパティのstrokeとfillを使って縁取り文字を作りましょう
こんなのもできる！
<div class="p1">
<svg class="text2" width="300" height="40" viewBox="0 0 300 40">
<text x="0" y="30" font-size="35">こんなのもできる</text>
</svg>
</div>.p1 {
position: relative;
}
.p1::after {
content: "こんなのもできる";
line-height: 1;
z-index: -1;
font-size: 35px;
font-weight: bold;
position: absolute;
top: .04em;
left: .04em;
color: hotpink;
display: block;
}推しの::afterを使って文字をもう1つ作って、下から重ねています。
テキストシャドウで何とかなるかもですが擬似要素を使う方が確実だと思います
text {
fill:transparent;
}↑textのfillを透明にしたらこんな風に可愛くもできます。
ただこれだと文字が変わるたびに毎回contentの中身を書き換えないといけないというデメリットはありますね。
避けようと思ったらやっぱりテキストシャドウを使ってなんとかした方が良いですね。
うーん見出しとかだったら2つ出力してもいいかも？
例えば、
<h2>タイトル<span>タイトル</span></h2>みたいな感じで2回出るようにしておいて、spanの方をposition: absoluteで移動させるとかどうでしょうかね
まぁまた何か思いついたら追記しますね
いいなと思ったら
TAPしてね♡↓
SVGの三角形と円でクリスマスツリーの簡単アニメーション 要素の余白paddingのつけ方【コーディング初心者さんへ】
コメントは承認後に表示されます。