More than 3 years have passed since last update.

【初心者でもわかる】文字の縁取りにも使える！box-shadowやtext-shadowを太く濃くする方法

Posted at 2021-03-01

#どうも7noteです。影を太く、濃くする方法についての考察

cssで影を作るときに使われる、box-shadowとtext-shadowですが太さや濃さといった部分の調整って結構難しい。

そんな時の解決方法について考えてみました。

対処法①：色を濃い色を使ってみる。

これはいうまでもなくですね。もし薄い色を使っているのであれば、単純に濃い色を使うことで解決できるかもしれません。色も濃い方がハッキリみえるので若干太くもみえます。

でも真っ白の影をより濃くしようとおもっても、なかなか難しいので、この方法では難しいかもしれません。

影を濃くしたい時に一般的に使われる方法がこれです。
cssの影はカンマ（,）でつなぐことで、複数指定することができます。

sample.css

/* 例 */

text-shadow    : 
   2px  2px 1px #003366,
  -2px  2px 1px #003366;
}

わざわざ計算しなくても、ツールを使うことで簡単に影を作ることができます。
こちらのツールは文字の縁取りを簡単にできるツールです。
縁取りで太くなった分の字間まで自動調整してくれるすぐれものです。

現状完璧に思い通りの太さや濃さの影を作るには少々クセを掴まないと作れません。
でもそこをカバーしてくれるのがツールなので積極的に使って時短をして、空いた時間はほかのところに使っていくのがいいのかなと思います。