10

以下のように複数のグラデーションを作成する必要があります。

ここに画像の説明を入力

灰色/白のグラデーションの中心がどのように異なるかを見てみましょう。中心から来る場合もあれば、左中央から来る場合もあれば、中央下から来る場合もあります。

THISツールを使用して、以下のグラデーションを生成しました。

background: #f9f9f9;
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d1d6db',GradientType=1 );

FIDDLE HERE、上の画像で示したようにグラデーションを作成できるようになりましたか、それとも画像を使用する必要がありますか?

4

1 に答える 1

18

あなたの質問には2つの部分があります：

  1. 画像のようにグラデーションにすることはできますか？はい、可能です。radial-gradient定義はパラメータとして位置を取り、正しい値を設定することで、必要な効果を生み出すことができます。
  2. 勾配発生器自体はそれを生成できますか? 問題のリンクされたジェネレーターがこれを実行できるようには見えません。これは、Orientation が放射状に設定された時点で、位置がデフォルトで中央に設定され、その値を変更するフィールドがないためです。この値を設定するためのフィールドを持つ他のグラデーション ジェネレーターが存在する可能性がありますが、それでも自分で中心点を指定する必要があります。

以下は、参照用に異なる位置を持つ放射状グラデーションのスニペットです。

div {
  float: left;
  height: 200px;
  width: 200px;
  margin: 2px;
  background: #f9f9f9;
  }
div:nth-of-type(1){
  background: radial-gradient(ellipse at center, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(2){
  background: radial-gradient(ellipse at left bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(3){
  background: radial-gradient(ellipse at left top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(4){
  background: radial-gradient(ellipse at right bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(5){
  background: radial-gradient(ellipse at right top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(6){
  background: radial-gradient(ellipse at center top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(7){
  background: radial-gradient(ellipse at 10% 20%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(8){
  background: radial-gradient(ellipse at 75% 75%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
div:nth-of-type(9){
  background: radial-gradient(ellipse at 20% 80%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

于 2016-04-27T07:05:20.943 に答える