CSS3ジェネレーター8選

CSS3-Generator-By-Peter-Funk-&-Eric-Hoffman

必見総まとめ!Web制作者でも覚えていられないCSS3の装飾がとっても簡単に実現できるWebサービスをまとめました。

CSS3は現在のブラウザでほぼ実装されていますが、少し前のバージョンのブラウザの場合、書き方異なります。きっとWeb制作者でも全て覚えていられないでしょう。私は無理です・・・なので筆者もよく使うジェネレーターをここにまとめました。

ホームページ作成にお役立てください。

目次

ボタンを作りたい

CSS3 Button Generator

css3-botton-generator
昔から有名なサービスです。ボタンを作りたい時に重宝します。ショーケース(作成例)もあるのでイメージが思いつかない時にも使えます。
公式サイトCSS3 Button Generator

テキストシャドウ

CSS3Gen

css3-text-shadow-generator
テキストシャドウを作りたいならここがシンプルでわかりやすいです。
公式サイトTextShadow CSS3Gen

ボックスシャドウ

CSS3 Generator – By Peter Funk & Eric Hoffman

CSS3-Generator-By-Peter-Funk-&-Eric-Hoffman
ボックスへの装飾ができます。ボックスシャドウ、角を丸める、グラデーション、不透明度が作れます。とってもわかりやすくておしゃれなインターフェイスがおすすめです。
公式サイトCSS3 Generator – By Peter Funk & Eric Hoffman
こちらのサイトは閉鎖されたようです。

css-generator

css-generator
サイトのデザインがすごくわかりやすい。border-image,text-shadow,box-shadow,border-radius が作れます。UIがいいので初心者の方におすすめです。
公式サイトcss-generator

ボーダーを画像にしたい

border-image-generator

border image generator
ボーダーイメージだけ作りたい時にとても便利です。画像をアップして色々試せます。
公式サイトBorder Image Generator

グラデーション

Ultimate CSS Gradient Generator

ultimate css gradient generator
Firefoxブラウザアプリで有名なColorZillaが提供しているグラデーションを作れるウェブサービスです。グラデーションは今でこそブラウザの対応も進んでいますが、古いブラウザに対応させるためにはベンダープレフィックスのみならず書き方が全く異なりますので、ジェネレーターを使うととても楽ちんです。CollarZillaについてはホームページのカラー選びで役立つWebサイト・ツールの記事で紹介しています。
公式サイトUltimate CSS Gradient Generator

アニメーション・トランジションなど

CSS3.0 Maker

css3.0-maker
総合的に対応しています。Animasion/Toransition/Transformにも対応しています。
公式サイトCSS3.0 Maker

総合ランキング

CSS3 Playground by Mike Plate

CSS3Playground
個人的に1番のおすすめです。ほぼ全部に対応しており、直感的に操作できるのでとても使いやすいcolumnにも対応しています。
公式サイトCSS3 Playground by Mike Plate

CSS3 Generator

css3-generator
総合的にまとまっていていいのですが、CSS3について、知識のある人か、ある程度調べられる人でなければ使えません。
公式サイトCSS3 Generator