ちょっとした飾りに使えるCSS3.0ジェネレータ『CSS3.0Maker』
2011年02月17日 公開
はてぶ数もすごいし既にご存知の人も多そうだけど、探してもなにかのまとめの一部としてさらっとしか紹介されてなかったので、とりあえずどんな事が可能なのかをご紹介。
かゆいところをパパっとCSSで書きだしてくれるジェネレータ「CSS3.0Maker」レビューです。
解説
特定のもの以外は大体トップページのドロップダウンメニューにあります。
CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator
トップページにある左のメニューと上の並ぶタブは同じページに繋がっています。
各ページには以下のブラウザ対応アイコンが有ります。
どのブラウザに対応していないのかも確認しておくといいでしょう。
Border Radius
ここでは枠線の装飾ができます。
Border Radius | CSS Border Radius
種類は豊富で、太さも左がわのバーで変更可能。
こんなのもらくらく。
CSS Transform
ここでは拡大縮小といった事が設定できます。
CSS Transform
Box Shadow
ここでは影の作成が出来ます。
Box Shadow
影の色、大きさ、ボカシ具合、位置など細かく決めれます。
Text Shadow
ここではテキストシャドウの設定が出来ます。
Text Shadow
Text Rotation
ここではテキストの角度が設定できます。
Text Rotation
RGBA
RGBでのカラー設定が出来ます・・・。
CSS 3.0 RGBA
@font Face
ここではフォントフェイスの細かい設定が行えます。
@Font Face
Outline Offset
ここでは、枠の外部のラインを装飾できます。
この項目はトップページのドロップダウンメニューにのみあります。
Transition
ここではホバーによってアニメーションするCSS3が書き出せます。
CSS Transition
マウスのせると↓
通常時と、ホバー後両方の設定を終えれば出来あがり。
CSS Gradient
ここではグラデーションの書きだしが出来ます。
CSS Gradient
CSS Animation
ここでは、常時動き続けるCSS Animationの書き出しが出来ます。
CSS Animation
この項目はトップページのドロップダウンメニューにありません。
以上が全機能です。
同時に以下のジェネレータも。
CSS Type Set
テキストまわりのCSSを手軽に生成してくれます。
それでは、また。