CSS3の各プロパティの値を少しずつ変えた見栄えが比較できるオンラインサービス -i2Style

角丸やボックスシャドウなど、CSS3をはじめとする各プロパティの少しずつ異なる値の見栄えをブラウザで比較・確認しながらスタイルシートを生成できるオンラインサービス紹介します。

i2Style

[ad#ad-2]

上記キャプチャは、背景色（background-color）の値を少しずつ変え一覧にしたもので、他にも多くのプロパティに対応しています。

Rounded Corners Variations
上左の角丸（border-radius）の値

Box Shadow Variation
ボックスのシャドウ（box-shadow）の値

[ad#ad-2]

プロパティは、他にも多数のものが用意されています。

• Background Color
• Text Color
• Font Face
• Font Size
• Text Shadow
• Box Shadow
• Border
• Rounded Corners

気に入った見栄えのものはラジオボタンをチェックすると、その値が保存できます。

お気に入りはラジオボタンをチェック

各プロパティで保存されたものは、「Generate CSS」よりCSSとHTMLが生成されます。

CSS

font:bold 45px Verdana, Geneva, sans-serif;
font-style:normal;
color:#ffffff;
background:#03c8eb;
border:10px inset #ffffff;
text-shadow:1px 1px 5px #000000;
box-shadow:1px 0px 8px #000000;
-moz-box-shadow:1px 0px 8px #000000;
-webkit-box-shadow:1px 0px 8px #000000;
border-radius:60px 0px 60px 0px;
-moz-border-radius:60px 0px 60px 0px;
-webkit-border-radius:60px 0px 60px 0px;