CSSのテキストシャドウをカンタンにかけられる「Css Text Shadow」

2011-06-16 | Sigeo | 0 | カテゴリ WEBツール・サービス

以前にブロック要素にCSSのドロップシャドウを付けるサービスをご紹介しましたが、CSSを使った高度なテクニックをカンタンにおこなえるオンラインサービスが増えていますよね。

今回は、テキストにシャドウなどのクールなエフェクトをCSSでかけられるサービスのご紹介です。

「Css Text Shadow」は、テキストにドロップシャドウやネオン、炎などのエフェクトをかけるCSSを、プレビューで見ながら作成できるオンラインツール。

エフェクトは全部で１２種類。ログイン不要で、必要なときに手軽に使えるようになっています。

このように、テキストへエフェクトをかけることができます。

テキストシャドウも、カンタンにCSSを生成してくれます。

画像を使わずにサイトタイトルをカッコよく見せたい時にも便利ですね。

上記のようなCSSが生成されます。これをサイトの <head> 内に追加すればテキストシャドウなどのエフェクトをかけられます。

テキストをプレビュー
↑まずCss Text Shadowを開き、プレビュー部分にエフェクトをかけたい文章を入れます。

↑次に、プレビューを見ながらエフェクトを選択します。決まったら、【Get Code】ボタンを押します。

↑すると、エフェクトをかけるのに必要なCSSコードが発行されます。デフォルトは「h1」指定になっているので、エフェクトをかけたい部分に変更して使用します。ちなみに、この記事では「h1」を「p.shadow」などに変更しました。

興味がある方はCss Text Shadowへどうぞ。

デザイナーやコーダーの知恵によって生み出された、今回のようなCSSによるエフェクトが、体系化されてツールで実現できるようになる。他のあらゆることでも同じように考えないといけないなと、あらためて感じされられますね。

スポンサードリンク

テキストシャドウのCSSをサクっと作れるサービス。