これは便利!!CSS3のセレクタを自動生成CSS3 Generator[CSS]

Firefox3.6、Google Chrome 4や5、Safari4、Opera10.50、そして、今年中(?)にリリース予定のIE9など、徐々にブラウザのCSS3のサポートがよくなってきています。

中には、実務でCSS3を導入している人も多いかと思いますが、CSS3のセレクタを自動生成してくれるCSS3 Generatorの紹介です。

生成できるCSS3のプロパティは以下です。また、それぞれのプロパティに対応しているブラウザのアイコンも表示されていますので、非常にわかりやすいです。

  • Border Radius
  • Box Shadow
  • Text Shadow
  • RGBA
  • @Font Face
  • Multiple Columns
  • Box Resize
  • Box Sizing
  • Outline
  • Selectors

Border Radius

css1003132.jpg

Border Radiusを選択すると以下のようなソースが表示してくれます。それをCSSファイルにコピペするだけです。

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ; 

Box Shadow

縦、横、ブラー、色の値を適当に入力すると、以下のようにソースが生成されます。これも同じくCSSにコピペするだけです。

-webkit-box-shadow: 5px 2px 3px #1a141a;
-moz-box-shadow: 5px 2px 3px #1a141a;
box-shadow: 5px 2px 3px #1a141a; 

Text Shadow

css1003134.jpg

Box Shadowと同じく縦、横、ブラー、色の値を適当に入力すると、以下のようにソースが生成されます。これも同じくCSSにコピペするだけです。

text-shadow: 5px 5px 5px #1f111f;

RGBA

R、G、B、Opacityに適当な数値を入力すると、以下のようにソースが生成されます。これも同じくCSSにコピペするだけです。背景色やフォントカラーで使用することができます。

background: rgba(255, 255, 0, 1);

@Font Face

css1003136.jpg

FontNameとTypeを入力すると、以下のようにソースが生成されます。もちろん使うフォントをサーバにアップロードする必要があります。

@font-face {
font-family: 'DeliciousRoman';
src: url('DeliciousRoman.otf') format('opentype');
}

h1 { font-family: 'DeliciousRoman', Helvetica, Sans-Serif; } 

Multiple Columns

css1003137.jpg

カラム数とGapに適当な数値を入力すると、以下のようにソースが生成されます。

-moz-column-count: 5;
-moz-column-gap: 10px;
-webkit-column-count: 5;
-webkit-column-gap: 10px; 

Box Resize

css1003138.jpg

Horizontalか Verticalか Bothを選ぶと、以下のようにソースが生成されます。

resize: vertical;
overflow: auto; /*needed for Safari*/
min-width: ; /*suggest you add mid-width and min-height*/
min-height ; 

Box Sizing

Optionを適当に選ぶと、以下のようにソースが生成されます。

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box; 

Outline

太さ、スタイル、色の値を入力すると、以下のようにソースが生成されます。

outline: 5px dashed #301630;
outline-offset: 10px; // Delete this line if you don't want an offset 

Selectors

css10031311.jpg

ここでは、456 Berea St's CSS3 Selectors Explainedを参考にしてほしいと表示されるだけです