必見総まとめ！Web制作者でも覚えていられないCSS3の装飾がとっても簡単に実現できるWebサービスをまとめました。
CSS3は現在のブラウザでほぼ実装されていますが、少し前のバージョンのブラウザの場合、書き方異なります。きっとWeb制作者でも全て覚えていられないでしょう。私は無理です・・・なので筆者もよく使うジェネレーターをここにまとめました。
ホームページ作成にお役立てください。
目次
ボタンを作りたい
CSS3 Button Generator
昔から有名なサービスです。ボタンを作りたい時に重宝します。ショーケース（作成例）もあるのでイメージが思いつかない時にも使えます。
公式サイトCSS3 Button Generator
テキストシャドウ
CSS3Gen
テキストシャドウを作りたいならここがシンプルでわかりやすいです。
公式サイトTextShadow CSS3Gen
ボックスシャドウ
CSS3 Generator – By Peter Funk & Eric Hoffman
ボックスへの装飾ができます。ボックスシャドウ、角を丸める、グラデーション、不透明度が作れます。とってもわかりやすくておしゃれなインターフェイスがおすすめです。
公式サイトCSS3 Generator – By Peter Funk & Eric Hoffman
こちらのサイトは閉鎖されたようです。
css-generator
サイトのデザインがすごくわかりやすい。border-image,text-shadow,box-shadow,border-radius が作れます。UIがいいので初心者の方におすすめです。
公式サイトcss-generator
ボーダーを画像にしたい
border-image-generator
ボーダーイメージだけ作りたい時にとても便利です。画像をアップして色々試せます。
公式サイトBorder Image Generator
グラデーション
Ultimate CSS Gradient Generator
Firefoxブラウザアプリで有名なColorZillaが提供しているグラデーションを作れるウェブサービスです。グラデーションは今でこそブラウザの対応も進んでいますが、古いブラウザに対応させるためにはベンダープレフィックスのみならず書き方が全く異なりますので、ジェネレーターを使うととても楽ちんです。CollarZillaについてはホームページのカラー選びで役立つWebサイト・ツールの記事で紹介しています。
公式サイトUltimate CSS Gradient Generator
アニメーション・トランジションなど
CSS3.0 Maker
総合的に対応しています。Animasion/Toransition/Transformにも対応しています。
公式サイトCSS3.0 Maker
総合ランキング
CSS3 Playground by Mike Plate
個人的に１番のおすすめです。ほぼ全部に対応しており、直感的に操作できるのでとても使いやすいcolumnにも対応しています。
公式サイトCSS3 Playground by Mike Plate
CSS3 Generator
総合的にまとまっていていいのですが、CSS3について、知識のある人か、ある程度調べられる人でなければ使えません。
公式サイトCSS3 Generator
