CSSで簡単に縁取りされたアウトライン文字を作る
CSSでおしゃれな縁取り文字を作る方法です。モダンブラウザのみからレガシーブラウザにも対応したものまで紹介します。
text-stroke
<div class="text">縁取り</div>
.text {
color: #fff;
text-stroke: 1px #000;
-webkit-text-stroke: 1px #000;
}
非常に便利ですが、 IE では対応していません。また、線は文字の 内側 に引かれるので太くすると文字が潰れます。
text-shadow
<div class="text">縁取り</div>
.text {
color: #fff;
text-shadow: 1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
text-shadow
を使って上下左右に 1px
ずつ影を作る方法です。角に直角が多い英語フォントだと綺麗に表示されると思いますが、日本語だと角のつなぎ目が気になりますね。
SVG
CSS…ではありませんが、HTML内に記述できて、しかも IEにも対応 しているので紹介します。
<svg viewBox="0 0 200 100">
<text x="0" y="50%">縁取り</text>
</svg>
svg {
display: inline-block;
width: 250px;
height: auto;
overflow: visible;
}
text {
fill: #fff;
stroke: #000;
stroke-width: 1;
stroke-linejoin: round;
}
SVGの fill
と stroke
を使えば線を引くことができます。線は文字の 内側 に引かれます。
<svg viewBox="0 0 200 100">
<text class="background" x="0" y="50%">縁取り</text>
<text class="foreground" x="0" y="50%">縁取り</text>
</svg>
svg {
display: inline-block;
width: 250px;
height: auto;
overflow: visible;
}
.foreground {
fill: #fff;
}
.background {
stroke: #000;
stroke-width: 8;
stroke-linejoin: round;
}
線を 外側 に引きたいときはこのように2つの text
要素を重ねれば表現できます。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs