【CSS】text-shadowで縁取り文字

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

text-shadowプロパティで縁取り文字の調整について。

text-shadowプロパティ

HTMLとCSSで縁取り文字を表現する場合、text-strokeを使いますが、以下のようにtext-shadowプロパティでもできます。

 <p class="text">1234あああabcd</p>
.text {
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 0 orange;
}

text-strokeやpaint-orderと組み合わせることもできます。

-webkit-text-stroke: 6px green;
paint-order: stroke;
text-shadow: 2px 2px 0 orange;

text-strokeと組み合わせても表現が難しい場合は、以下のようにtext-shadowの値を重ねて使ってもいいでしょう。（あえてわかりやすくするため、値を大きくしてます）

.text {
    font-size: 24px;
    font-weight: 700;
    color: black;
    text-shadow: 
    1px -20px 0 red,
    1px 10px 0 orange,
    11px -30px 0 blue
    ;
}

元のテキストは黒色のもので、それ以外は全てCSSによるシャドウになります。

数値を微調整すればいい感じに重ねることもできます。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧