ＬＳＳさんちの blog にあった小ネタで、ちょっと遊んでみました。
に紹介されていた黒地に金文字です。
これが元のコードです。
コード
<div style="border-radius: 15px; background-color: black; border: 6px gold ridge; font-size: 200%; font-weight: bold; padding: 0.6em; color: gold; text-shadow: -1px -1px 0px lightyellow,1px 1px 0px brown;">黒地に金って映えるかな？</div>
元のコードでは、shadow の色が「lightyellow」になっています。
影の位置が text よりも、-1px -1px 0px（つまり左と上に1px）ずれるという設定だと思います。
わずか 1px ですがこの色を変えてみるとどうなるのかなと遊んでみました。
左上の影を変えてみる
white
lightgray
burlywood
yellow
gray
purple
red
salmon
mediumspringgreen
orange
こう並べると shadow が違うだけなのに文字の色が違って見えます。錯覚ですね。
こう並べると、私がCSSに詳しそうに思えてきますが、それも錯覚です。
私の目では、文字の色が鮮やかな金に見えるのは yellow で、落ち着いた感じに見えるのは orange です。この辺の見え方や好みには個人差があるかも知れません。
mediumspringgreen は緑青に見えてしまいます。
右下の影も変えてみる
再掲
コード
<div style="border-radius: 15px; background-color: black; border: 6px gold ridge; font-size: 200%; font-weight: bold; padding: 0.6em; color: gold; text-shadow: -1px -1px 0px lightyellow,1px 1px 0px brown;">黒地に金って映えるかな？</div>
ここでは、左上のshadow が orange の物を使って、右下の brown の色を変えて比べてみます。
右下が brown
white
lightgray
burlywood
yellow
gray
purple
salmon
mediumspringgreen
orange
私の好み
後になると好みが変わるかも知れませんが、現時点では
個人的には、左上 orange 、右下 purple が好みかな。
みなさんの好みはどうでしょう？
ＬＳＳさん、面白い記事をありがとうございました。
