text-shadow 縁取りがおしゃれに効かない時はdrop-shadowで。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

CSS text-shadowで影がうまくいかない場合は、drop-shadowで代用可能。

text-stroke使用時は、text-shadowの挙動がすこし違う。

text-strokeを使っているときに、テキストにシャドウをかけたいことがある。

そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。

今回ベースとなるHTMLとCSS。

画像の真ん中に、テキストを配置するためのHTMLとCSSの例。

<div class="box">
<p class="text">文字と背景のバランスが大切。<p>
<img src="https://igawa.co/wp-content/uploads/2022/10/moulin-rouge-392147_1920.jpg" alt="CSSのtext-strokeで文字を縁取る。" width="1920" height="1440" class="alignnone size-full wp-image-9803" />
</div><!--box-->
.box {
 position: relative;
}
.box p.text {
 position: absolute;
 width: 100%;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 margin: auto;
 font-size: 3rem;
 font-weight: bold;
 -webkit-text-stroke: 1px #fff;
 text-stroke: 1px #fff;
 text-align: center;
 color: transparent;
 letter-spacing: 0.7rem;
}
.box p img {
 width: 100%;
}

このような賑やかな画像の場合、縁取り文字で、かつ文字色を透明にすると、視認性が悪い。

ムーラン・ルージュのネオンの強さと美しい照明に負けている。

文字と背景のバランスが大切。

CSS text-strokeでうまくいかない場合は、drop-shadowで。

Photo by Hermann

静かで澄んだ優しい画像の場合、文字色を透明にしても、可読性は保たれる。ただし透明感も強いので、軽くシャドウが欲しい。

文字と背景のバランスが大切。

CSS text-strokeでうまくいかない場合は、drop-shadowで。

Photo by Louis Reed


text-shadowでは、意図した感じではないシャドウとなることがある。

下記の通り、CSSの「text-shadow」プロパティで、x軸とy軸の距離が2px、ぼかしの半径が2pxで、軽く薄い黒(#777)のシャドウの指定をしているが、文字色までが黒く(#777)なる。

(「color」に色が適用されるような状態になる。)

<div class="box">
<p class="text shadow_01">文字と背景のバランスが大切。<p>
<img src="https://igawa.co/wp-content/uploads/2022/10/moulin-rouge-392147_1920.jpg" alt="CSS text-strokeでうまくいかない場合は、drop-shadowで。" width="1920" height="1440" class="alignnone size-full wp-image-9803" />
</div><!--box-->
.box p.text.shadow_01 {
 text-shadow: 2px 2px 2px #777;
}

「text-shadow」で黒いシャドウの指定をすると、透明に指定している文字色までが黒くなる。

文字と背景のバランスが大切。

CSS text-strokeでうまくいかない場合は、drop-shadowで。

こちらも同様に文字色までも変わっている。

文字と背景のバランスが大切。

CSS text-strokeでうまくいかない場合は、drop-shadowで。


filterプロパティのdrop-shadowで代用すれば解決する。

この問題の解決策としては、text-shadowを使わずに、filterプロパティのdrop-shadowを使えば良い。

<div class="box">
<p class="text shadow_02">文字と背景のバランスが大切。<p>
<img src="https://igawa.co/wp-content/uploads/2022/10/moulin-rouge-392147_1920.jpg" alt="CSS text-strokeでうまくいかない場合は、drop-shadowで。" width="1920" height="1440" class="alignnone size-full wp-image-9803" />
</div><!--box-->
.box p.shadow_02 {
 filter: drop-shadow(2px 2px 2px #777);
}

今回は2つの画像を見比べるために同じスタイルを当てているが、このムーラン・ルージュの写真の場合は、もっとシャドウを強くかけても良い感じだ。

文字と背景のバランスが大切。

CSS text-strokeでうまくいかない場合は、drop-shadowで。

こちらは程よい感じ、意図した控えめなシャドウがかかっている。

文字と背景のバランスが大切。

CSS text-strokeでうまくいかない場合は、drop-shadowで。


filterプロパティのdrop-shadowの本来の使い方。

ちなみに、filterプロパティのdrop-shadowは、本来はアイコンやロゴなどに適用させるものである。

  • box-shadowの場合は、PNGやSVGなどで透過されている図形でも全体をくくる長方形に影が付いてしまう。
  • drop-shadowの場合は、透過された部分は除き、図形の曲線の輪郭にシャドウを付けられる。

Appleの初期のレインボーロゴ。
drop-shadow

Appleの初期のレインボーロゴ。
box-shadow

logo design: Rob Janoff(ロブ・ジャノフ)

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。