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;
}

関連記事

2021.02.02

HTML・CSS

flex-growプロパティを利用した横並びのリスト

flex-growプロパティを利用して、左右にボーダーのある横並びのリストを作ります。リスト内のテキストの文字数が異なる場合でも、簡単にレスポンシブ対応できます…

2021.07.04

HTML・CSS

background-positionプロパティを利用した背景画像の右寄せ

background-positionプロパティを利用して背景画像を右寄せします。Y軸方向の位置は中央寄せにします。単純な右寄せであればbackground-p…

2020.08.26

HTML・CSS

Google Fontsの使い方

Google Fontsのサイトで使用したいフォントを全て選択します。複数のフォントも一度に読み込めます。Google Fonts Embedタブの<li…

2024.09.09

HTML・CSS

border-radiusプロパティを利用した要素サイズいっぱいの角丸

border-radiusプロパティを利用して、要素サイズいっぱいの角丸を作成します。デモページはこちら まず正方形にborder-radius: 50%を指定…

2023.02.22

HTML・CSS

縦積みinline-flexの折り返しとwriting-modeによる代用

inline-flexで縦積みにした場合の折り返しと、writing-modeで縦積みにした場合の折り返しを確認します。デモページはこちら htmlは以下の単純…

上に戻る