【CSS】多段text-shadow、試してみました【実験】
どうも！LSSです！！
ちょっと先日来、考えていた
「text-shadowを複数書き連ねてどんな効果が出るか？」
を何通りか試してみました。
CSSサンプル、というよりは実験的な内容となります。
虹色の影
虹色の影！
コード
<span style="font-size: 40px; font-weight: bold; color: #f00; text-shadow: 2px 2px 0 #f80,4px 4px 0 #dd0,6px 6px 0 #0d0,8px 8px 0 #0dd,10px 10px 0 #00f,12px 12px 0 #e0e;">虹色の影！</span>
間に白を挟む
間に白を挟む
コード
<span style="font-size: 40px; font-weight: bold; color: black; text-shadow: 2px 2px 0 #fff,4px 4px 0 #88e;">間に白を挟む</span>
疑似グラデーション
疑似グラデ―ション！？
コード
<span style="font-size: 40px; font-weight: bold; color: black; text-shadow: 1px -3px 0 #ccc,2px -6px 0 #aaa,3px -9px 0 #888,4px -12px 0 #666,5px -15px 0 #444;">疑似グラデ―ション！？</span>
とりあえず解説
虹色の影！
虹の七色を、赤を文字色に、あと2pxづつ右下にずらしながら、並べてみました。
「とにかく派手！」っちゃあ派手ですねｗ
間に白を挟む
右下4px離れたところに影を置き、その間の2pxのところに白を置きました。
すると、文字と影の間に謎の隙間ができるというか、影文字を従えてるというかそんな感じに？
あと、影の色を#88eとちょっと青の色気をつけています。
疑似グラデ―ション！？
右上、+5px -15pxの位置に濃い灰色#444を置き、そこから1px 3pxづつ本体に近づけながら灰色を薄くしてみました。
もうちょっと頑張るといい感じの立体感になるのかも？？
「text-shadowは複数続けて記述できる」事を活かして、何か新しい表現方法にならないかな？？と思って試してみました。
（袋文字も同様の実験ではありますが）
何かこう、一味たりない気がしますが、もし使いたい方がおられましたらご自由にどうぞです^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
