投稿日：2012年7月12日
更新日：2017年6月6日
目次
普段からWEBサイト制作でお世話になっている便利なCSSジェネレーターを集めてみました。
目次
- 複雑な角丸もコピペでOK
- グラデーションを作成
- 三角の吹き出しをつくる
- 三角形に特化したジェネレーター
- CSS Spriteが簡単
- テキストシャドウ、ボックスシャドウからトランスフォームまでなんでもあり
- RGBへ変換
- ジェネレーターのおまけ：データURI スキームを作成
複雑な角丸もコピペでOK
border radius
4角が全て違う場合などでも簡単に作ることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 10px; border-top-right-radius: 4px; border-bottom-right-radius: 6px; border-bottom-left-radius: 5px; |
ベンダープレフィックスも選択して出力可能です。
グラデーションを作成
Ultimate CSS Gradient Generator
これは高い頻度でお世話になっているサービスです。
↑細かく指定するとこんなボタンみたいなグラデーションも作成できます。
三角の吹き出しをつくる
CSS ARROW PLEASE!
これを知るまでは、三角だけは画像で作っていました。
CSSで作成できるので簡単に修正もできますし便利です。
吹き出しとかで利用もできますね。
三角形に特化したジェネレーター
CSS triangle generator
これは様々な三角形を作成できます。
↑このような変形三角も簡単に作成できます。
CSS Spriteが簡単
CSS Sprite Generator
画像をzipで投げるとスプライト画像（並べた画像）にしてくれます。
↑しかもこんな感じにCSSも作ってくれます。
テキストシャドウ、ボックスシャドウからトランスフォームまでなんでもあり
CSS3 Playground
多機能過ぎて使いづらいです。
ただ、CSSがどのような動きをするのかはすごく勉強になります。
↑いじりまくると、このような形もCSSで作成することができます。
RGBへ変換
Yellowpipe Internet Services
CSS3で使用頻度の高いrgbaで書く時に変換するのに利用します。
|
1 2 3 |
box-shadow: 10px 10px 10px rgba(100,100,100,0.4); |
こんな感じで。
ジェネレータのおまけ
データURI スキームを作成
img2data
data:image/png;base64,を作成する時に利用します。
スマホなどは特に表示を早くしたい場合が多いので、リクエストを減らして速度を上げる工夫ですね。