0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

(自分用)スムーズにいかなかった点と解決方法②

Posted at

#グラデーション色について

CSS グラデーションは データ型で表現され、2つ以上の色の間の連続的な変>化から成る の特殊型です。グラデーションは3種類から選択することができます。線形linear (linear-gradient 関数によって生成)、放射radial (radial-gradient 関数によって生成)、扇形conic (conic-gradient 関数によって生成) の3種類です。 repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient の各関数によって、反復グラデーションを生成することもできます。
まずグラデーションは3種類から選択することができます。

① 線形 ⇨ linear-gradient
② 放射 ⇨ radical-gradient
③ 扇形 ⇨ conic-gradient    の3種類から選択できます。

#グラデーション色の使用方法

グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは色経由点color stopsと呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。

.simple-linear {
  background: linear-gradient(blue, pink);
}```
2種類以上の色を()内に入力することでグラデーションが適用されます。


#グラデーション色の方向の設定方法
####to right 左から右へ
```.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
} ```

####to bottom right 左上から右下へ
```.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}```

####70deg 70度の位置へ
```.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}```


[MDN]
(https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)

#余談
自分の勉強用として投稿していますが、同じ問題に悩んだときに参考になれば幸いです。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?