助かりました。CSS3やSass & Compassのコードを生成するWebツール「CREATE CSS3」

tool-create-css3-thumb'

Compassを使って要素を回転させる処理をしたいなと調べていたら、まさにこの要望を補助してくれるツール「CREATE CSS3」を発見したのでご紹介します。

使い方はとっても簡単です。上にある「CSS3/Sass Compass」のスイッチで生成するコードを選び、左のメニューから使いたいCSSプロパティを選ぶだけ。

全体像
全体像
Sass Compassもあるのが嬉しい
Sass Compassもあるのが嬉しい

 

左のメニューはアコーディオン形式になっており、クリックして開くと各プロパティの調整ができます。

tool-create-css3_02
左のメニュー部分

 

メニューをクリックすると自動的にコードが生成されます。この白背景部分はエディタにもなっており、自分で削除したり改変したりできます。良いですね。またプレビュー部分も自動的にアニメーションするのでどのような結果になるのか分かりやすいです。

tool-create-css3_03
エディタ部分

CSS3バージョンでは自動的にベンダープレフィックスを付けてくれますし、これは今後使わない手がなさそうです。特にSass & Compassユーザーなら重宝するのではないでしょうか。


試しに当ブログのロゴをハチャメチャに回転させてみました。

最終更新日:2014年11月11日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/tool-create-css3/trackback/