CSS3で画像にドロップシャドウをつけたいときに便利なジェネレータ「Css3 drop shadow generator」

CSS3のドロップシャドウを簡単に作成
Css3 drop shadow generatorはCSS3のドロップシャドウを簡単に作成できるジェネレータです。
画像のサイズ(横幅・縦幅)を指定して、影の種類を選択。
あとは影の大きさや影の透明度を設定すれば完成。
HTMLとCSSのコードをコピペすれば終わりです。
とても簡単にCSS3でドロップシャドウが作れますよ。
以下に使ってみた様子を載せておきます。
画像のサイズ(横幅・縦幅)を指定して、影の種類を選択。
あとは影の大きさや影の透明度を設定すれば完成。
HTMLとCSSのコードをコピペすれば終わりです。
とても簡単にCSS3でドロップシャドウが作れますよ。
以下に使ってみた様子を載せておきます。
CSS3でドロップシャドウを作る
まず「Css3 drop shadow generator」にアクセスしましょう。
左側に影の種類や大きさを設定するスライドバーがあります。

バーを調整しながら、右側のプレビューでどんな影ができるかを確認できますよ。
画像の下に表示されるHTML, CSSをコピーすればOKです。
(CSSはX, Y値を操作しないとプレビューに表示されなかったです‥。)
ドロップシャドウをCSS3で作りたいときにどうぞ。
左側に影の種類や大きさを設定するスライドバーがあります。

バーを調整しながら、右側のプレビューでどんな影ができるかを確認できますよ。
画像の下に表示されるHTML, CSSをコピーすればOKです。
(CSSはX, Y値を操作しないとプレビューに表示されなかったです‥。)
ドロップシャドウをCSS3で作りたいときにどうぞ。

Css3 drop shadow generator
http://www.wordpressthemeshock.com/css-drop-shadow/

この記事をみた人はこんな記事も見ています
前後の記事もどうぞ
この記事をブックマーク/共有する
トラックバックURL
このブログを購読しますか?
FeedlyなどのRSSリーダーを使うと、このブログの更新情報をいち早くキャッチできます。このブログのRSS(http://20kaido.com/index.rdf)を登録すれば、更新されるたびに概要(記事タイトル・冒頭)が手に入ります。
また、Twitterによる更新情報の配信もおこなっております。
@20kaido をフォローしていただければ最新の情報をお届けします。
さらに、Facebookでも更新情報を流しています。ファンページがありますので、「いいね!」するだけで購読できますよ!
また、Twitterによる更新情報の配信もおこなっております。
@20kaido をフォローしていただければ最新の情報をお届けします。
さらに、Facebookでも更新情報を流しています。ファンページがありますので、「いいね!」するだけで購読できますよ!

・メール
20kaido@gmail.com
・Twitter
@kamekiti
・お問い合わせフォーム
http://ws.formzu.net/fgen/S70651833/
何か気になることがありましたら、お気軽にご連絡ください。
20kaido@gmail.com
@kamekiti
・お問い合わせフォーム
http://ws.formzu.net/fgen/S70651833/
何か気になることがありましたら、お気軽にご連絡ください。
記事公開日:2013年01月29日 コメント(0)
Twitterの声
はてなブックマークの声
Facebookの声
この記事についたコメント
コメントする
