Home > 技術 > CSS3のText-Shadowで文字にEffectをかけてみる

CSS3のText-Shadowで文字にEffectをかけてみる

Pure CSS Letterpress Effect.jpg

Create a Letterpress Effect with CSS Text-Shadowの記事を見て触発された。

text-shadowというCSS3のプロパティを使うと上の画像のように、テキストにエフェクトをかけることが可能になる。

たとえば以下の感じ。

指定している値については以下を参照。

X軸方向への距離
左右のぼかし距離、マイナス値だと左、プラス値だと右。
Y軸方向への距離
上下のぼかし距離、マイナス値だと上、プラス値だと下。
ぼかし距離
ここを大きくするとぼかしの範囲が大きくなる。
ぼかしの色、この部分は最後に書いても最初に書いても同じように動作する。
つまりtext-shadow: #555 2px 5px 5px;でもよい。

サンプルコード

テストページ作ってみた。
ファイアーの感じとかも出せるので、これは楽しいですね!
CSS3 text-shadow Effect

■関連リンク
text-shadow - CSS Dencitie

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1210
Listed below are links to weblogs that reference
CSS3のText-Shadowで文字にEffectをかけてみる from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > CSS3のText-Shadowで文字にEffectをかけてみる

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top