CSS3を使って画像にプロっぽいドロップシャドウのエフェクトをかけられるジェネレータ。

CSS3で画像のドロップシャドウを簡単に作成できる「CSS3 Drop Shadow Generator」

画像にドロップシャドウを付けるには、Photoshopなどの画像編集ソフトで画像にエフェクトをかける必要がありますが、そのようなことをしなくても、CSSを使ってドロップシャドウの効果をつけることもできるようになりました。

ただ、できるとは言っても、自分のやりたいように０からその効果をつけるのは、なかなか至難の業。そこで今回は、ドロップシャドウを付けるCSSを簡単に生成してくれるサービスをご紹介します。

CSS3のドロップシャドウをカンタンに作れるジェネレータ

「Css3 drop shadow generator」は、スライダでドロップシャドウの効果を調整するだけで、HTMLタグとCSSを生成してくれるサービス。

影の付け方も全部で８種類と豊富で、この記事の冒頭にある画像のようなエフェクトを簡単にかけられるようになっています。

ドロップシャドウを簡単に設定

↑上下、左右や下だけなど、ドロップシャドウのつけ方を自由に選ぶことができます。ちなみに、この記事の画像はすべてエフェクトをかけてみますｗ

↑影の輪郭のボカシや透明度などをスライダでサクっと調整可能。

↑プレビューを見ながら作成でき、あっというまにHTMLタグとCSSを生成してくれます。

今回の記事で使ったタグ

HTML

CSS

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

試してみたいかたはCss3 drop shadow generatorへどうぞ。

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