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;

sponsors

top of page

©2018 coliss