CSS3プロパティジェネレーター

テキスト設定

フォントサイズ:
 

背景のグラデーション設定

 

 

 

Alpha: カンバス:

ドロップシャドウの設定

X: Y: Blur: Alpha:
 

テキストシャドウの設定

X: Y: Blur: Alpha:
 

角丸の設定

4隅の数字を固定

左上角丸 右上角丸
左下角丸 右下角丸

クリックでテキストを編集

 

CSS3ソース

※グラデーションだけ、色相環アイコンクリックで確定・・。

ヘルプ

CSS3ジェネレーターについて

このCSS3ジェネレーターは、CSS3で追加予定のプロパティ(主にグラデーション)をPhotoshopライクに作れることを目標にしたものです。

グラデーション作成の操作は、Photoshopとほぼ同じように扱えます。
ダブルクリックで色の設定、グラデーションの中間をクリックでポイントの追加ができます。また追加したポイントは、下にドラッグすることで削除することができます。

グラデーションのポイントをクリックしアクティブにすると、そのポイントのアルファ値が設定できます。 透明度の度合いを確認したい場合は、カンバスの設定を透明かテクスチャに変更することで確認がしやすくなります。

各設定が終わったら、右上にある「ソースを生成」ボタンをクリックすることで、設定したものがCSS3プロパティとして出力されます。

「IE用にfilterも出力する」にチェックを入れると、同じような設定のfilterプロパティを出力します。が、完全には再現されません。
グラデーションなどは始点・終点のみのグラデーションになります。

このジェネレーターについて、なにか不具合や問い合わせがありましたらブログ記事のコメントか、お問い合わせから連絡をお願いします。

Powered by CSS-EBLOG