<p class="thumb"><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2011/06/css-text-shadow.jpg" alt="CSS3のテキストシャドウ" title="css-text-shadow" width="514" height="204" class="aligncenter size-full wp-image-18323" /></p><p>以前に<a href="/web-tools/css3-drop-shadow-generator.html">ブロック要素にCSSのドロップシャドウを付けるサービス</a>をご紹介しましたが、CSSを使った高度なテクニックをカンタンにおこなえるオンラインサービスが増えていますよね。</p>
<p>今回は、テキストにシャドウなどのクールなエフェクトをCSSでかけられるサービスのご紹介です。</p>
<!--more-->
<h3 class='header-label'>CSSのテキストシャドウを作れる「Css Text Shadow」</h3>
<p>「<a href="http://www.wordpressthemeshock.com/css-text-shadow/" target="_blank">Css Text Shadow</a>」は、<strong>テキストにドロップシャドウやネオン、炎などのエフェクトをかけるCSSを、プレビューで見ながら作成できる</strong>オンラインツール。</p>
<p>エフェクトは全部で１２種類。ログイン不要で、必要なときに手軽に使えるようになっています。</p>

<h4 class='tips'>炎のエフェクトのサンプル</h4>

<p class="shadow">このように、テキストへエフェクトをかけることができます。</p>

<h4 class='tips'>テキストシャドウのサンプル</h4>
<p class="shadow2">テキストシャドウも、カンタンにCSSを生成してくれます。</p>
<p class="shadow2">画像を使わずにサイトタイトルをカッコよく見せたい時にも便利ですね。</p>


<h4 class='tips'>生成されるコード</h4>
<textarea name="code" class="xhtml" id="code">
<link href="http://fonts.googleapis.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" >
<style>
h1{
font-family: 'Aclonica', serif;
color:#333;
text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);
}
</style>
</textarea>
<p>上記のようなCSSが生成されます。これをサイトの &lt;head&gt; 内に追加すればテキストシャドウなどのエフェクトをかけられます。</p>

<h4 class='tips'>手順はカンタン</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2011/06/css-text-shadow1.jpg" alt="テキストをプレビュー" title="css-text-shadow1" width="500" height="265" class="aligncenter size-full wp-image-18322" /><br />↑まず<a href="http://www.wordpressthemeshock.com/css-text-shadow/" target="_blank">Css Text Shadow</a>を開き、プレビュー部分にエフェクトをかけたい文章を入れます。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2011/06/css-text-shadow2.jpg" alt="エフェクトを選択" title="css-text-shadow2" width="500" height="221" class="aligncenter size-full wp-image-18321" /><br />↑次に、プレビューを見ながらエフェクトを選択します。決まったら、【Get Code】ボタンを押します。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2011/06/css-text-shadow3.jpg" alt="CSSコード" title="css-text-shadow3" width="500" height="448" class="aligncenter size-full wp-image-18320" /><br />↑すると、エフェクトをかけるのに必要なCSSコードが発行されます。デフォルトは「h1」指定になっているので、エフェクトをかけたい部分に変更して使用します。ちなみに、この記事では「h1」を「p.shadow」などに変更しました。</p>

<p>興味がある方は<a href="http://www.wordpressthemeshock.com/css-text-shadow/" target="_blank">Css Text Shadow</a>へどうぞ。</p>
<p>デザイナーやコーダーの知恵によって生み出された、今回のようなCSSによるエフェクトが、体系化されてツールで実現できるようになる。他のあらゆることでも同じように考えないといけないなと、あらためて感じされられますね。</p>