CSS3のborder-radiusとgradientの設定を含めたボックスを生成できるジェネレータ「CSS Corners」

世の中、CSS3の広がりもありつつ徐々にCSS3の使用も多くなってきているのではないでしょうか？

その僕もCSS3がよく利用するようになりました。そこで、CSS3を用いた便利なジェネレーター 「CSS Corners」の紹介です。

この「CSS Corners」は、CSS3のCSS3のborder-radiusとgradientの設定を含めたボックスを生成できるオンラインジェネレータです。

設定できるのは、下記です。

  • 角丸
  • Gradient
  • Padding
  • 色

それぞれの項目に設定をすると自動で以下のようなソースコードを生成してくれます。

element {
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	padding: 5px;
	background: -moz-linear-gradient(center top, #0b570d 0%,#61610a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0b570d),color-stop(1, #61610a));
}

border-radiusもgradientも、接頭句を用いたCSS3ですので、FirefoxとSafari、Chromeのみの対応となりますので、状況におうじて接頭句を外したプロパティも加えるとOperaにも対応できます。