<div class="class_box_shadow"><img class="none" src="http://d3qt5c962pj1kq.cloudfront.net/images/2011/05/css3-drop-shadow.jpg" alt="CSS3のドロップシャドウをカンタンに作れるジェネレータ" title="css3-drop-shadow" width="514" height="204" class="aligncenter size-full wp-image-18141" /></div>

<p>画像にドロップシャドウを付けるには、Photoshopなどの画像編集ソフトで画像にエフェクトをかける必要がありますが、そのようなことをしなくても、CSSを使ってドロップシャドウの効果をつけることもできるようになりました。</p>
<p>ただ、できるとは言っても、自分のやりたいように０からその効果をつけるのは、なかなか至難の業。そこで今回は、ドロップシャドウを付けるCSSを簡単に生成してくれるサービスをご紹介します。</p><div class="class_box_shadow">
<!--more--></div>
<h3 class='header-label'>CSS3のドロップシャドウをカンタンに作れるジェネレータ</h3>
<p>「<a href="http://www.wordpressthemeshock.com/css-drop-shadow/" target="_blank">Css3 drop shadow generator</a>」は、<strong>スライダでドロップシャドウの効果を調整するだけで、HTMLタグとCSSを生成</strong>してくれるサービス。</p>
<p>影の付け方も全部で８種類と豊富で、この記事の冒頭にある画像のようなエフェクトを簡単にかけられるようになっています。</p>

<h4 class='tips'>ドロップシャドウを簡単に設定</h4>
<div class="class_box_shadow"><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2011/05/css3-drop-shadow1.png" alt="８種類のドロップシャドウ" title="css3-drop-shadow1" width="328" height="215" class="aligncenter size-full wp-image-18152" /></div>
<p>↑上下、左右や下だけなど、ドロップシャドウのつけ方を自由に選ぶことができます。ちなみに、この記事の画像はすべてエフェクトをかけてみますｗ</p>
<div class="class_box_shadow"><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2011/05/css3-drop-shadow2.png" alt="スライダでエフェクトを調整" title="css3-drop-shadow2" width="321" height="532" class="aligncenter size-full wp-image-18151" /></div>
<p>↑影の輪郭のボカシや透明度などをスライダでサクっと調整可能。</p>
<div class="class_box_shadow"><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2011/05/css3-drop-shadow3.png" alt="プレビューと生成タグ" title="css3-drop-shadow3" width="500" height="518" class="aligncenter size-full wp-image-18150" /></div>
<p>↑プレビューを見ながら作成でき、あっというまにHTMLタグとCSSを生成してくれます。</p>


<h4 class='tips'>今回の記事で使ったタグ</h4>

<h5 class='tips'>HTML</h5>
<textarea name="code" class="xhtml" id="code">
<div class="class_box_shadow">ここに画像タグ</div>
</textarea>

<h5 class='tips'>CSS</h5>
<textarea name="code" class="css" id="code">
.class_box_shadow{ width: 514px; min-width: 200px; min-height: 130px; margin: auto; background: #ccc; border: 5px solid white; position:relative; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80); -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80); -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);}
</textarea>

<p>ジェネレータ上では幅に制限がありますが、更に大きなサイズであっても今回の記事で使ったように幅の指定を変更すればそのまま使えます。</p>

<p>試してみたいかたは<a href="http://www.wordpressthemeshock.com/css-drop-shadow/" target="_blank">Css3 drop shadow generator</a>へどうぞ。</p>

<p>プレーンな画像を使っているのに、ちょっとプロっぽい効果を簡単に付けることができるのはうれしいですね。</p>