こんにちは、工藤です。
今回はCSSジェネレーターのまとめ2017年版です。
コーディングの際にいつも本当にお世話になっています…。
グラデーション
Ultimate CSS Gradient Generator
サイトへ
シンプルながらも使い勝手がよいジェネレーターです。
Blend
サイトへ
2色を選択して、中央の『Let’s Blend!』をクリックするとグラデーションが出来上がります。
右上のアイコンからコードの取得やグラデーションの設定を行うことができます。
動きが面白くてついつい触りたくなります。
shade
サイトへ
背景全体でグラデーションのサンプルを表示してくれます。
背景にグラデーションを使用する、などの時にイメージがわきやすくなるかもしれないです。
CSS Gradient Generator
サイトへ
『Add』をクリックしていくとどんどん明度をあげた色が追加されていきます。
Gradient Generator
サイトへ
面白いグラデーションのサンプルが用意されています。
ボタン
Grad3
サイトへ
細かい設定を行うことができ、グラデーションを使用する際に少々設定が億劫なアイコンの設定もしてくれます。
CSS3 Button Generator
サイトへ
段階を踏んでボタンの調整をできるのが優しいです。
サイトのロゴの横にある『SHOWCASE』をクリックすると豊富なサンプルが用意されていて、そこからさらに設定を行うことができます。
Css Gradient Button
サイトへ
hover時のボタンも一緒に用意・プレビューしてくれます。
style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">
その他
OneClickCSS
サイトへ
HTMLソースをもとに、idやclass名などが付加された状態でCSSを生成してくれるジェネレーターです。大変便利です。
CSS3gen
サイトへ
text-shadow用のジェネレーターです。
bad-company
サイトへ
box-shadow以外にもメニューからtext-shadowやnth-childのジェネレータ―も使用することができます。
CSS3 Generator
サイトへ
計12種類のジェネレーターを用意してくれます。シンプルなものを求めている方向けです。
css-generator.net
サイトへ
こちらは計10種類のジェネレーターを用意してくれます。
CSS3 Generator
サイトへ
計12種類のジェネレーターを用意してくれます。
scaleなどのプレビューができるのがうれしいです。
cssarrowplease
サイトへ
吹き出し付きのボックスを生成してくれます。見た目はシンプルながら、大変便利なジェネレーターです。
3D Ribbon Generator
サイトへ
タイトル部分などに使えそうなリボンの装飾をCSSで生成してくれます。
