end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転しました

「Ultimate CSS Gradient Generator」によるスタイルシート・グラデーション作成

クロスブラウザ対応のグラデーションはスクラッチでは無理

グラデーションや角丸はクロスブラウザの考慮が必要ですが、グラデーションの場合、linerグラデーションすら、スクラッチでは実装する気になりません。

http://www.impressivewebs.com/css3-linear-gradient-syntax/

#element {  
  background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
  background: -ms-linear-gradient(black, white); /* IE10 */  
  /* Safari 4+, Chrome 2+ */  
  background: -webkit-gradient(linear, left top, left bottom,
                               color-stop(0%, #000000),
                               color-stop(100%, #ffffff));
  /* Safari 5.1+, Chrome 10+ */  
  background: -webkit-linear-gradient(black, white);
  background: -o-linear-gradient(black, white); /* Opera 11.10 */  
  /* IE6 & IE7 */  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
                                                     endColorstr='#ffffff');
   /* IE8+ */  
  -ms-filter:
    "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
  background: linear-gradient(black, white); /* the standard */  
}  

「Ultimate CSS Gradient Generator」はcolorzillaだし、オススメ

「Ultimate CSS Gradient Generator」はGUIクロスブラウザなグラデーションCSSを自動生成してくれますが、使いやすいし、www.colorzilla.com 製なので安心かと。

http://www.colorzilla.com/gradient-editor/