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

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

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

CSS3のテキストシャドウ

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

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

CSSのテキストシャドウを作れる「Css Text Shadow」

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

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

炎のエフェクトのサンプル

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

テキストシャドウのサンプル

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

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

生成されるコード

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

手順はカンタン

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

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

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

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

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

スポンサードリンク

この記事を読んだ方は以下の記事もご覧いただいています

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

コメントする