tn198403s 高校時代blog

「人生に無意味な時間は無い。ただ、その時間の意味を感じることなく生きているだけである。」この言葉を確かめてみようと、徒然なるまま、私の高校時代(1984.03卒業)の意味を振り返り綴るブログです。

黒地に金を映えさせてみた(影の役者テスト)

 LSSさんちの blog にあった小ネタで、ちょっと遊んでみました。

 

little-strange.hatenablog.com

に紹介されていた黒地に金文字です。

黒地に金って映えるかな?

 これが元のコードです。

コード

<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 ですがこの色を変えてみるとどうなるのかなと遊んでみました。 

f:id:tn198403s:20210615203426p:plain

黒地に金 sample

 

 

左上の影を変えてみる

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 が好みかな。

 

みなさんの好みはどうでしょう?

 

 

 

LSSさん、面白い記事をありがとうございました。