nicepaper @ ウィキ
nicepaper @ ウィキ

「CSSでグラデーションその1」の編集履歴（バックアップ）一覧はこちら

「CSSでグラデーションその1」(2015/05/29 (金) 21:54:31) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

グラデーションについて記述していきます。2015年5月25日記事です。 目次 #contents *グラデーションとは 色が連続的に変化すること。 一昔前、webページ制作の時のグラデーションの作り方は、幅10px×高さ60pxなどの画像でグラデーション画像を作り、CSSのbackgroundでその画像を指定し右方向に敷き詰めたり(repeart-x)したりして作っていました。 今では画像を用意せず、CSSのみで記述できるようになってきました。 CSSの記述のみでグラデーションを作る&color(red){メリットは、画像を作る必要がなくなるので、制作がより早くなるという点です。一方、デメリットでは、グラデーションは昔のブラウザには対応しないや、ブラウザごとにグラデーションのプロパティの表現が違うため、クロスブラウザ対応する場合にめんどくさい。ベンダープレフィックスをつけないといけない}などの部分があったりします。 ~ ※ベンダープレフィックスがわからない方は[[ベンダープレフィックスとは]]を参照してください。&color(red){読んでおくと、この先の記事が読みやすくなります。} ~ 昔のブラウザでも表現できるように画像にしようぜ！と思いがちな人は多いかと思いますが、セキュリティやリッチコンテンツのことを考えるとやはりCSSのみで表現できる方向を学習していかなければなりません。 ~ ~ *グラデーションのコツ（色の勉強？） グラデーションをうまく見せるコツは、&color(red){開始色と終了色が十六進法表記であまり変わらない色にするということです。また、カラーパレットで近い色にして見せることです。カラーパレットを参照} #image(width=400,カラーパレット.png) ※赤丸近辺ぐらいの範囲で開始色と終了色を選んでいく。 ~ **綺麗なグラデーションの例 #image(width=500,001.png) #image(width=500,002.png) ~ **汚いグラデーションの例 #image(width=500,003.png) #image(width=500,004.png) &color(red){※開始色と終了色の差が激しい。} ~ ~ *背景色のグラデーション divでなにかボックスを作ったり、liタグでメニューを作ったり、h1タグで見出しを作ったりとボックスレベル要素があるタグを使う場合、有効です。今回は真っ白（#FFFFFF）から白に近い灰色（#CCCCCC）にグラデーションをかけていきたいと思います。 **今後メンテナンスしやすいように記述するコツ グラデーションはとにかくブラウザ間での挙動が違いすぎます。 &color(red){毎回、グラデーションを書きたい部分に記述していくと、行数もかさみますし、後々変更したいときに、すべてのグラデーションを再び直していかなければなりません。そこでグラデーションだけのクラスを作っておき、自分の記述したいdivないしはliやh1を指定するときに、それぞれの基本属性＋グラデーション用の記述をさせておくと、あとあとメンテナンスが楽になります。}~ &u(){HTML部}~ &u(){クラス2つの場合} <div class="box gradient"><!--このようにスペースをあけてbox用のクラスとgradientのクラスを両方指定しておく。--> </div> &u(){ID１つクラス1つの場合} <div id="box" class="gradient"><!--こんな記述でもよい。--> </div> &u(){CSS部} .boxまたは#box{ margin:10px auto; width: 800;; height: 100px; } .gradient{ まったくグラデーションが効かない場合の対応を最初に指定 あるブラウザでの記述方法1 あるブラウザでの記述方法2 あるブラウザでの記述方法3 あるブラウザでの記述方法4 あるブラウザでの記述方法5 } ~ ~ **とにかく全部対応させたい &u(){HTML部}~ <div class="box gradient"> </div> ※CSSのクラスを二つ読み込む場合、空白をあけてセレクター名を記述します。今回はグラデーションのみのものと、ボックスの高さのものです。~ ※divで行いましたが、liやh1タグの場合はdivをh1などに変えてみてください。 &u(){CSS部} .box{ 　 width:800px; height: 100px; } .gradient{ background: #FFFFFF;/*超古い対応できない場合の背景色は白*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";/*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/ background: linear-gradient(top, #ffffff, #CCCCCC);/*liner-gradient今後ブラウザアップデートに備え必要になってくる記述*/ background: -o-linear-gradient(top, #ffffff, #CCCCCC);/*Opera10以降で必要*/ background: -ms-linear-gradient(top, #ffffff, #CCCCCC);/*IE10から*/ background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/ background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);/*Safari5.1以上で必要*/ background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/ } *それぞれの表示を確認してみる。 挙動を確認してみましょう。 &u(){HTML部} <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>グラデーション</title> <link rel="stylesheet" type="text/css" href="gradient.css"> </head> <body> <div class="box gradient1"><p>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/</p> </div> <div class="box gradient2"><p>-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";/*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/</p> </div> <div class="box gradient3"><p>background: linear-gradient(top, #ffffff, #CCCCCC);/*liner-gradient今後統一された時に 必要*/</p> </div> <div class="box gradient4"><p>background: -o-linear-gradient(top, #ffffff, #CCCCCC);/*Opera10以降で必要*/</p> </div> <div class="box gradient5"><p>background: -ms-linear-gradient(top, #ffffff, #CCCCCC);/*IE10から*/</p> </div> <div class="box gradient6"><p>background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/</p> </div> <div class="box gradient7"><p>background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);/*Safari5.1以上で必要*/</p> </div> <div class="box gradient8"><p>background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/</p> </div> </body> </html> &u(){CSS部} @charset "utf-8"; /* CSS Document */ p{ font-size:20px; color: #000000; } .box{ padding: 5px; margin: 10px auto; width: 800px; height: 70px; border: 1px solid #000; } .gradient1{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/ } .gradient2{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";/*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/ } .gradient3{ background: linear-gradient(top, #ffffff, #CCCCCC);/*liner-gradient今後必要*/ } .gradient4{ background: -o-linear-gradient(top, #ffffff, #CCCCCC);/*Opera10以降で必要*/ } .gradient5{ background: -ms-linear-gradient(top, #ffffff, #CCCCCC);/*IE10から*/ } .gradient6{ background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/ } .gradient7{ background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);/*Safari5.1以上で必要*/ } .gradient8{ background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/ } このように記述しました。 **IE(11.0) #image(width=600,ie.png) **GoogleChrome(43.0) #image(width=600,chrome.png) **Firefox(38.0) #image(width=600,firefox.png) **Opera(29.0) #image(width=600,opera.png) あれ？Operaがwebkitの認識になってる・・・調べてみる。 >2013年2月13日に、今後はレンダリングエンジンとしてのPrestoの開発とOpera Browserでの使用を終了し、今後のリリースにおいてはOpera Browserで使用するレンダリングエンジンをWebKitに変更すると発表した ~ [[wikipedia:http://ja.wikipedia.org/wiki/Opera]] ほうほう。今はWebkit系なのか。とういことで、&color(red){最新2015年5月25日現在operaは必要ないが、昔のブラウザのために一応指定はしておく。}ことがいいかもしれません。 *謎が残る でもなぜだろう。liner-gradientはサポートされてるはずなんだが・・・ http://caniuse.com/を見ると、つけなくてもいけるよ！という表が書かれています。小さくて見にくいですが、右上が黄色くなっているところが、ベンダープレフィックスを付ける必要ありという意味です。 #image(width=700,対応表.png) 謎です。コメントください。 #comment
グラデーションについて記述していきます。2015年5月25日記事です。 目次 #contents *グラデーションとは 色が連続的に変化すること。 一昔前、webページ制作の時のグラデーションの作り方は、幅10px×高さ60pxなどの画像でグラデーション画像を作り、CSSのbackgroundでその画像を指定し右方向に敷き詰めたり(repeart-x)したりして作っていました。 今では画像を用意せず、CSSのみで記述できるようになってきました。 CSSの記述のみでグラデーションを作る&color(red){メリットは、画像を作る必要がなくなるので、制作がより早くなるという点です。一方、デメリットでは、グラデーションは昔のブラウザには対応しないや、ブラウザごとにグラデーションのプロパティの表現が違うため、クロスブラウザ対応する場合にめんどくさい。ベンダープレフィックスをつけないといけない}などの部分があったりします。 ~ ※ベンダープレフィックスがわからない方は[[ベンダープレフィックスとは]]を参照してください。&color(red){読んでおくと、この先の記事が読みやすくなります。} ~ 昔のブラウザでも表現できるように画像にしようぜ！と思いがちな人は多いかと思いますが、セキュリティやリッチコンテンツのことを考えるとやはりCSSのみで表現できる方向を学習していかなければなりません。 ~ ~ *グラデーションのコツ（色の勉強？） グラデーションをうまく見せるコツは、&color(red){開始色と終了色が十六進法表記であまり変わらない色にするということです。また、カラーパレットで近い色にして見せることです。カラーパレットを参照} #image(width=400,カラーパレット.png) ※赤丸近辺ぐらいの範囲で開始色と終了色を選んでいく。 ~ **綺麗なグラデーションの例 #image(width=500,001.png) #image(width=500,002.png) ~ **汚いグラデーションの例 #image(width=500,003.png) #image(width=500,004.png) &color(red){※開始色と終了色の差が激しい。} ~ ~ *背景色のグラデーション divでなにかボックスを作ったり、liタグでメニューを作ったり、h1タグで見出しを作ったりとボックスレベル要素があるタグを使う場合、有効です。今回は真っ白（#FFFFFF）から白に近い灰色（#CCCCCC）にグラデーションをかけていきたいと思います。 **今後メンテナンスしやすいように記述するコツ グラデーションはとにかくブラウザ間での挙動が違いすぎます。 &color(red){毎回、グラデーションを書きたい部分に記述していくと、行数もかさみますし、後々変更したいときに、すべてのグラデーションを再び直していかなければなりません。そこでグラデーションだけのクラスを作っておき、自分の記述したいdivないしはliやh1を指定するときに、それぞれの基本属性＋グラデーション用の記述をさせておくと、あとあとメンテナンスが楽になります。}~ &u(){HTML部}~ &u(){クラス2つの場合} <div class="box gradient"><!--このようにスペースをあけてbox用のクラスとgradientのクラスを両方指定しておく。--> </div> &u(){ID１つクラス1つの場合} <div id="box" class="gradient"><!--こんな記述でもよい。--> </div> &u(){CSS部} .boxまたは#box{ margin:10px auto; width: 800;; height: 100px; } .gradient{ まったくグラデーションが効かない場合の対応を最初に指定 あるブラウザでの記述方法1 あるブラウザでの記述方法2 あるブラウザでの記述方法3 あるブラウザでの記述方法4 あるブラウザでの記述方法5 } ~ ~ **とにかく全部対応させたい &u(){HTML部}~ <div class="box gradient"> </div> ※CSSのクラスを二つ読み込む場合、空白をあけてセレクター名を記述します。今回はグラデーションのみのものと、ボックスの高さのものです。~ ※divで行いましたが、liやh1タグの場合はdivをh1などに変えてみてください。 &u(){CSS部} .box{ 　 width:800px; height: 100px; } .gradient{ background: #FFFFFF;/*超古い対応できない場合の背景色は白*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC'); /*IE5.5以上10未満*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')"; /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/ background: linear-gradient(top, #ffffff, #CCCCCC); /*liner-gradient今後ブラウザアップデートに備え必要になってくる記述*/ background: -o-linear-gradient(top, #ffffff, #CCCCCC); /*Opera10以降で必要*/ background: -ms-linear-gradient(top, #ffffff, #CCCCCC); /*IE10から*/ background: -moz-linear-gradient(top, #ffffff, #CCCCCC); /*Firefox 3.6・4以降で必要*/ background: -webkit-linear-gradient(top, #ffffff, #CCCCCC); /*Safari5.1以上で必要*/ background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC)); /*Safari5以上で必要*/ } *それぞれの表示を確認してみる。 挙動を確認してみましょう。 &u(){HTML部} <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>グラデーション</title> <link rel="stylesheet" type="text/css" href="gradient.css"> </head> <body> <div class="box gradient1"><p>filter: progid:DXImageTransform.Microsoft.gradient (startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/</p> </div> <div class="box gradient2"><p>-ms-filter: "progid:DXImageTransform.Microsoft. gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')"; /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/</p> </div> <div class="box gradient3"><p>background: linear-gradient(top, #ffffff, #CCCCCC) ;/*liner-gradient今後統一された時に 必要*/</p> </div> <div class="box gradient4"><p>background: -o-linear-gradient(top, #ffffff, #CCCCCC); /*Opera10以降で必要*/</p> </div> <div class="box gradient5"><p>background: -ms-linear-gradient(top, #ffffff, #CCCCCC); /*IE10から*/</p> </div> <div class="box gradient6"><p>background: -moz-linear-gradient(top, #ffffff, #CCCCCC); /*Firefox 3.6・4以降で必要*/</p> </div> <div class="box gradient7"><p>background: -webkit-linear-gradient(top, #ffffff, #CCCCCC); /*Safari5.1以上で必要*/</p> </div> <div class="box gradient8"><p>background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/</p> </div> </body> </html> &u(){CSS部} @charset "utf-8"; /* CSS Document */ p{ font-size:20px; color: #000000; } .box{ padding: 5px; margin: 10px auto; width: 800px; height: 70px; border: 1px solid #000; } .gradient1{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC'); /*IE5.5以上10未満*/ } .gradient2{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')"; /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/ } .gradient3{ background: linear-gradient(top, #ffffff, #CCCCCC); /*liner-gradient今後必要*/ } .gradient4{ background: -o-linear-gradient(top, #ffffff, #CCCCCC); /*Opera10以降で必要*/ } .gradient5{ background: -ms-linear-gradient(top, #ffffff, #CCCCCC); /*IE10から*/ } .gradient6{ background: -moz-linear-gradient(top, #ffffff, #CCCCCC); /*Firefox 3.6・4以降で必要*/ } .gradient7{ background: -webkit-linear-gradient(top, #ffffff, #CCCCCC); /*Safari5.1以上で必要*/ } .gradient8{ background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC)); /*Safari5以上で必要*/ } このように記述しました。 **IE(11.0) #image(width=600,ie.png) **GoogleChrome(43.0) #image(width=600,chrome.png) **Firefox(38.0) #image(width=600,firefox.png) **Opera(29.0) #image(width=600,opera.png) あれ？Operaがwebkitの認識になってる・・・調べてみる。 >2013年2月13日に、今後はレンダリングエンジンとしてのPrestoの開発とOpera Browserでの使用を終了し、今後のリリースにおいてはOpera Browserで使用するレンダリングエンジンをWebKitに変更すると発表した ~ [[wikipedia:http://ja.wikipedia.org/wiki/Opera]] ほうほう。今はWebkit系なのか。とういことで、&color(red){最新2015年5月25日現在operaは必要ないが、昔のブラウザのために一応指定はしておく。}ことがいいかもしれません。 *謎が残る でもなぜだろう。liner-gradientはサポートされてるはずなんだが・・・ http://caniuse.com/を見ると、つけなくてもいけるよ！という表が書かれています。小さくて見にくいですが、右上が黄色くなっているところが、ベンダープレフィックスを付ける必要ありという意味です。 #image(width=700,対応表.png) 謎です。コメントください。 #comment

表示オプション

横に並べて表示：
変化行の前後のみ表示：
  1. ...
  2. 76
  18. 77
  19. 78
  20. 79
  21. 80
  22. 81
  23. 82
  24. 83
  25. 84
  26. 85
  27. ...
  28. 98
  29. 99
  31. 100
  34. 101
  35. 102
  36. 103
  38. 104
  39. 105
  41. 106
  42. 107
  44. 108
  45. 109
  47. 110
  48. 111
  50. 112
  51. 113
  53. 114
  54. ...
  55. 137
  56. 138
  58. 139
  59. 140
  60. 141
  62. 142
  63. 143
  64. 144
  66. 145
  67. 146
  68. 147
  70. 148
  71. 149
  72. 150
  74. 151
  75. 152
  76. 153
  77. 154
  79. 155
  80. 156
  81. 157
  83. 158
  84. 159
  85. 160
  87. 161
  88. ...
  1. background: #FFFFFF;/*超古い対応できない場合の背景色は白*/
  17. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/
  18. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";/*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/
  19. background: linear-gradient(top, #ffffff, #CCCCCC);/*liner-gradient今後ブラウザアップデートに備え必要になってくる記述*/
  20. background: -o-linear-gradient(top, #ffffff, #CCCCCC);/*Opera10以降で必要*/
  21. background: -ms-linear-gradient(top, #ffffff, #CCCCCC);/*IE10から*/
  22. background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/
  23. background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);/*Safari5.1以上で必要*/
  24. background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/
  25. }
  26. <body>
  27. <div class="box gradient1"><p>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/</p>
  29. </div>
  32. <div class="box gradient2"><p>-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";/*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/</p>
  33. </div>
  34. <div class="box gradient3"><p>background: linear-gradient(top, #ffffff, #CCCCCC);/*liner-gradient今後統一された時に 必要*/</p>
  36. </div>
  37. <div class="box gradient4"><p>background: -o-linear-gradient(top, #ffffff, #CCCCCC);/*Opera10以降で必要*/</p>
  39. </div>
  40. <div class="box gradient5"><p>background: -ms-linear-gradient(top, #ffffff, #CCCCCC);/*IE10から*/</p>
  42. </div>
  43. <div class="box gradient6"><p>background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/</p>
  45. </div>
  46. <div class="box gradient7"><p>background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);/*Safari5.1以上で必要*/</p>
  48. </div>
  49. <div class="box gradient8"><p>background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/</p>
  51. </div>
  52. .gradient1{
  53. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/
  55. }
  56. .gradient2{
  57. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";/*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/
  59. }
  60. .gradient3{
  61. background: linear-gradient(top, #ffffff, #CCCCCC);/*liner-gradient今後必要*/
  63. }
  64. .gradient4{
  65. background: -o-linear-gradient(top, #ffffff, #CCCCCC);/*Opera10以降で必要*/
  67. }
  68. .gradient5{
  69. background: -ms-linear-gradient(top, #ffffff, #CCCCCC);/*IE10から*/
  72. }
  73. .gradient6{
  74. background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/
  76. }
  77. .gradient7{
  78. background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);/*Safari5.1以上で必要*/
  80. }
  81. .gradient8{
  82. background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/
  84. }
  1. ...
  2. 76
  3. 77
  4. 78
  5. 79
  6. 80
  7. 81
  8. 82
  9. 83
  10. 84
  11. 85
  12. 86
  13. 87
  14. 88
  15. 89
  16. 90
  17. 91
  25. 92
  26. 93
  27. ...
  28. 106
  29. 107
  30. 108
  31. 109
  32. 110
  33. 111
  34. 112
  35. 113
  36. 114
  37. 115
  38. 116
  39. 117
  40. 118
  41. 119
  42. 120
  43. 121
  44. 122
  45. 123
  46. 124
  47. 125
  48. 126
  49. 127
  50. 128
  51. 129
  52. 130
  53. 131
  54. ...
  55. 154
  56. 155
  57. 156
  58. 157
  59. 158
  60. 159
  61. 160
  62. 161
  63. 162
  64. 163
  65. 164
  66. 165
  67. 166
  68. 167
  69. 168
  70. 169
  71. 170
  72. 171
  73. 172
  74. 173
  75. 174
  76. 175
  77. 176
  78. 177
  79. 178
  80. 179
  81. 180
  82. 181
  83. 182
  84. 183
  85. 184
  86. 185
  87. 186
  88. ...
  1. background: #FFFFFF;/*超古い対応できない場合の背景色は白*/
  2. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');
  3. /*IE5.5以上10未満*/
  4. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";
  5. /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/
  6. background: linear-gradient(top, #ffffff, #CCCCCC);
  7. /*liner-gradient今後ブラウザアップデートに備え必要になってくる記述*/
  8. background: -o-linear-gradient(top, #ffffff, #CCCCCC);
  9. /*Opera10以降で必要*/
  10. background: -ms-linear-gradient(top, #ffffff, #CCCCCC);
  11. /*IE10から*/
  12. background: -moz-linear-gradient(top, #ffffff, #CCCCCC);
  13. /*Firefox 3.6・4以降で必要*/
  14. background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);
  15. /*Safari5.1以上で必要*/
  16. background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));
  24. /*Safari5以上で必要*/
  25. }
  26. <body>
  27. <div class="box gradient1"><p>filter: progid:DXImageTransform.Microsoft.gradient
  28. (startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/</p>
  29. </div>
  30. <div class="box gradient2"><p>-ms-filter: "progid:DXImageTransform.Microsoft.
  31. gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";
  32. /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/</p>
  33. </div>
  34. <div class="box gradient3"><p>background: linear-gradient(top, #ffffff, #CCCCCC)
  35. ;/*liner-gradient今後統一された時に 必要*/</p>
  36. </div>
  37. <div class="box gradient4"><p>background: -o-linear-gradient(top, #ffffff, #CCCCCC);
  38. /*Opera10以降で必要*/</p>
  39. </div>
  40. <div class="box gradient5"><p>background: -ms-linear-gradient(top, #ffffff, #CCCCCC);
  41. /*IE10から*/</p>
  42. </div>
  43. <div class="box gradient6"><p>background: -moz-linear-gradient(top, #ffffff, #CCCCCC);
  44. /*Firefox 3.6・4以降で必要*/</p>
  45. </div>
  46. <div class="box gradient7"><p>background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);
  47. /*Safari5.1以上で必要*/</p>
  48. </div>
  49. <div class="box gradient8"><p>background: -webkit-gradient(linear, center top,
  50. center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/</p>
  51. </div>
  52. .gradient1{
  53. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');
  54. /*IE5.5以上10未満*/
  55. }
  56. .gradient2{
  57. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')";
  58. /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/
  59. }
  60. .gradient3{
  61. background: linear-gradient(top, #ffffff, #CCCCCC);
  62. /*liner-gradient今後必要*/
  63. }
  64. .gradient4{
  65. background: -o-linear-gradient(top, #ffffff, #CCCCCC);
  66. /*Opera10以降で必要*/
  67. }
  68. .gradient5{
  69. background: -ms-linear-gradient(top, #ffffff, #CCCCCC);
  70. /*IE10から*/
  72. }
  73. .gradient6{
  74. background: -moz-linear-gradient(top, #ffffff, #CCCCCC);
  75. /*Firefox 3.6・4以降で必要*/
  76. }
  77. .gradient7{
  78. background: -webkit-linear-gradient(top, #ffffff, #CCCCCC);
  79. /*Safari5.1以上で必要*/
  80. }
  81. .gradient8{
  82. background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));
  83. /*Safari5以上で必要*/
  84. }
Pretty Diffを使用しています