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
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
Box Shadowと同じく縦、横、ブラー、色の値を適当に入力すると、以下のようにソースが生成されます。これも同じくCSSにコピペするだけです。
text-shadow: 5px 5px 5px #1f111f;
RGBA
R、G、B、Opacityに適当な数値を入力すると、以下のようにソースが生成されます。これも同じくCSSにコピペするだけです。背景色やフォントカラーで使用することができます。
background: rgba(255, 255, 0, 1);
@Font Face
FontNameとTypeを入力すると、以下のようにソースが生成されます。もちろん使うフォントをサーバにアップロードする必要があります。
@font-face {
font-family: 'DeliciousRoman';
src: url('DeliciousRoman.otf') format('opentype');
}
h1 { font-family: 'DeliciousRoman', Helvetica, Sans-Serif; }
Multiple Columns
カラム数とGapに適当な数値を入力すると、以下のようにソースが生成されます。
-moz-column-count: 5;
-moz-column-gap: 10px;
-webkit-column-count: 5;
-webkit-column-gap: 10px;
Box Resize
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
ここでは、456 Berea St's CSS3 Selectors Explainedを参考にしてほしいと表示されるだけです
コメント