新年明けましておめでとうございます。
コーダーの伊澤です。
早いもので1月も後半です。

今回はCSS3についてまとめようと思いましたが、
・説明するより見た方が早い
・見せるだけならもう他でもやっている
等の理由により、少し捻らせてもらいました。

【CSS3をジェネレーターを使って体感しよう】というのが今回の内容になります。

CSS3ジェネレーター（生成機）を使えるサイトをいくつか紹介させてもらいます。
難しくないので、CSS3に所縁が無い方も触ってみてください。

—————————————————————————————————-

■CSS 3.0 MAKER
http://www.css3maker.com/
アニメーション等のジェネレーター

タブの【CSS Transform】や【CSS Animation】など好きな項目を選択して、
左側にあるCSS Stylesという部分を適当に操作してみて下さい。

その場で結果が反映されるので、インパクトがあります。

—————————————————————————————————-

■CSSWARP
http://csswarp.eleqtriq.com/
パスに合わせてテキストを並べるジェネレーター

・主なパラメーター
【TEXT】:入力したいものを入れてWARP IT
【CURVE】:好きな形に配置(線の変更方法はベジェ曲線なので少し癖があるかも)
【TYPE】:フォントやフォントサイズ等

こちらもその場で反映。
目の前で文字が曲がり出すのは面白いです。

—————————————————————————————————-

■CSSLoad.net
http://cssload.net/
ローダーのジェネレーター
よく見るローディング画面のアイコン。

【Select your loader】の部分をクリックして
好きなローダーを装飾してください。

実はページによってはCSS3で作られているかもしれないですね。

—————————————————————————————————-

その他のジェネレーター

■cssarrowplease
http://cssarrowplease.com/
シンプルに使える吹き出しのジェネレーター

説明がいらいないほどスッキリした見た目。
簡単に吹き出しが作れます。

■css3generator
http://css3generator.com/
ページ自体の動きも楽しい、CSS3のジェネレーター

少しパラメーターが多いのは難点。
適当に0~255の数値を入力してみてください。
外枠に効果がかかります。

■LayerStyles
http://layerstyles.org/builder.html
Photoshopのような操作感で
ボックスのCSSを作成するジェネレーター

Photoshopを知らないと難しいかも。
それでも適当に数値を入れると中央のボックスが可変します。

—————————————————————————————————-

いかがでしたでしょうか？
CSS3の機能を体感出来たのではないかと思います。

必要であれば全てのページでCSS3のコードを取得出来るので、
活用してみてはいかがでしょうか。

それでは今回はこのあたりで、今年もよろしくお願い致します。