世の中、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にも対応できます。
コメント