2024.08.28

HTML・CSS

text-shadowで作る縁取りの文字

text-shadowプロパティを複数指定して、縁取りの文字を作ります。
デモページはこちら

text-shadowはbox-shadowと違い、広がりの距離とinset(内側の影)は指定できません。

text-shadow: 水平方向の距離 垂直方向の距離 ぼかしの距離 影の色;

htmlの構造は以下の通りです。

<p>text-shadow:上・下・左・右</p>
<div class="div-parent">
<p class="text style01">Flower Garden</p>
</div>

<p>text-shadow:右下・左上・右上・左下</p>
<div class="div-parent">
<p class="text style02">Flower Garden</p>
</div>

<p>text-shadow:上・下・左・右・右下・左上・右上・左下</p>
<div class="div-parent">
<p class="text style03">Flower Garden</p>
</div>

<p>text-stroke:1px</p>
<div class="div-parent">
<p class="text style04">Flower Garden</p>
</div>

文字の縁取りをtext-shadowで作成する場合、ぼかしの距離は共通で0にします。

まず上・下・左・右にtext-shadowを指定します。
この場合、テキストの4つの角に隙間ができてしまい斜め方向の影が必要なことがわかります。

//上・下・左・右
.style01 {
  text-shadow: 0 -1px 0 #161616, 0 1px 0 #161616, -1px 0 0 #161616, 1px 0 0 #161616;
}

次に右下・左上・右上・左下にtext-shadowを指定します。
今度は隙間ができず、text-shadowで文字の縁取りが再現できています。

//右下・左上・右上・左下
.style02 {
  text-shadow: 1px 1px 0 #161616, -1px -1px 0 #161616, 1px -1px 0 #161616, -1px 1px 0 #161616;
}

試しに上・下・左・右・右下・左上・右上・左下にtext-shadowを指定します。
この場合でも右下・左上・右上・左下にtext-shadowを指定した時と変わりません。

//上・下・左・右・右下・左上・右上・左下
.style03 {
  text-shadow: 0 -1px 0 #161616, 0 1px 0 #161616, -1px 0 0 #161616, 1px 0 0 #161616, 1px 1px 0 #161616, -1px -1px 0 #161616, 1px -1px 0 #161616, -1px 1px 0 #161616;
}

最後にtext-strokeプロパティで文字に縁取りを作ってみます。
フォントによっては今回の例のようにうまく縁取りが再現できません。

//text-stroke
.style04 {
  -webkit-text-stroke: 1px #161616;
}

関連記事

2022.05.11

HTML・CSS

CSSのcalc記述時の注意点

CSSのcalcはCSS3で追加された関数です。calc記述時は以下の点に注意が必要です。 加算・減算の演算子の左右には半角スペースが必要 乗算は掛けられる方(…

2020.09.04

HTML・CSS

viewportの指定について

レスポンシブでサイトを制作する場合、HTMLでviewport、CSSでメディアクエリ、両方を設定する必要があります。CSSでメディアクエリを記述しても、vie…

2021.10.04

HTML・CSS

複数行のテキストの左側を縦のボーダーで装飾

デモページはこちら 複数行のテキストの左側を縦のボーダーで装飾します。CSSはborder-leftの場合とheightを設定した疑似要素beforeをabso…

2021.07.06

HTML・CSS

background-imageプロパティを利用した高さ可変の三角形

borderプロパティで三角形を作成した場合、高さを可変にすることができません。そこで、background-imageプロパティのlinear-gradien…

2025.08.12

HTML・CSS

background-clipを利用したグラデーションのテキスト

background-clip: textを利用してグラデーションのテキストを表示します。デモページはこちら 以下のhtml構造で確認します。グラデーションのテ…

上に戻る