最近は、コワーキングスペース タネマキ の方で、記事を更新しています。@uetsuhara でも気になったニュースや記事など流してます。良かったら覗いてみてください。
読了目安 1分31秒shadow TEST
上のテキストは、CSS3 の text-shadow を利用して表示しています。たぶん IE では見れないと思うので、Firefox かwebkit系のブラウザで見てください。たぶん IE にも対応させる方法はありますが、ここでは扱わないので検索してちょ。
うまく表示されれば、白文字に赤・黒・黄・青・白のシャドウが系5層になっているかと思います。何層もエフェクトがかけられることを知らなかったのでシェアってみました。WordBeach Nagoya のサイトで使われていて気が付きました。
text-shadow に何層もエフェクトをかけてみた。こんな感じになります。
文字は、Google font を使っています。今回は、font-family: 'Geo', sans-serif;
スタイルシート
[css title=””]
text-shadow:
1px 1px #E03,
2px 2px #111,
3px 3px #FFEA00,
4px 4px #1999C0,
5px 5px #FFF
[/css]
1pxずつ増やしてゆくと綺麗に段々のシャドウがかかると思います。まぁ text-shadow はググると色々出てくると思うので、何やら試してみると面白いと思います。そんなこんなで今日はここまでーではではー。
CSS3 の text-shadow でレインボーのタワーを作ってみた | ウエツハラ
という記事も追加しました。合わせてご覧ください！！