このエントリーをはてなブックマークに追加

CSS3 の text-shadow は何層もエフェクトがかけられる

読了目安 1分31秒
shadow TEST

上のテキストは、CSS3 の text-shadow を利用して表示しています。たぶん IE では見れないと思うので、Firefox かwebkit系のブラウザで見てください。たぶん IE にも対応させる方法はありますが、ここでは扱わないので検索してちょ。

うまく表示されれば、白文字に赤・黒・黄・青・白のシャドウが系5層になっているかと思います。何層もエフェクトがかけられることを知らなかったのでシェアってみました。WordBeach Nagoya のサイトで使われていて気が付きました。

 text-shadow に何層もエフェクトをかけてみた。

text-shadow に何層もエフェクトをかけてみた。こんな感じになります。

文字は、Google font を使っています。今回は、font-family: 'Geo', sans-serif;

スタイルシート

text-shadow:
1px 1px #E03,
2px 2px #111,
3px 3px #FFEA00,
4px 4px #1999C0,
5px 5px #FFF

1pxずつ増やしてゆくと綺麗に段々のシャドウがかかると思います。まぁ text-shadow はググると色々出てくると思うので、何やら試してみると面白いと思います。そんなこんなで今日はここまでーではではー。

CSS3 の text-shadow でレインボーのタワーを作ってみた | ウエツハラ
という記事も追加しました。合わせてご覧ください!!

このエントリーをはてなブックマークに追加
読了目安 0分31秒

ウエツハラについて

主に Web 系、アプリ系のネタを提供していくかもしれないサイトです。比較的雑多。

中の人

横浜でタネマキというコワーキングスペースをやっています。
コーヒースポット(2014年1月)」ってのを作りはじめました。最近は、iPhoneアプリの制作してます。

連絡手段など

info@uetsuhara.com
≫Twitter
≫Facebookページ

I love comments !

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です