助かりました。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ユーザーなら重宝するのではないでしょうか。


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

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone