全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
CSSでグラデーションを表示する
2019.01.03
※この記事は2019年01月03日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
CSSのグラデーションを表示するlinear-gradientを使用し、
グラデーションで表示する基本的なパターンをご紹介します。
- 1. ２色で分割する
- 2. 左から右へグラデーション
- 3. 右から左へグラデーション
- 4. 上から下へグラデーション
- 5. 下から上へグラデーション
- 6. 左上から右下に向かってグラデーション
- 7. 円形グラデーション
- 8. グラデーションの片側を透明にする
- 9. 写真にグラデーションを重ねる
- 10. 解説
２色で分割する
この方法であればウィンドウ幅に影響せず、
中心を区切りに背景色が2分割されます。
左から右へグラデーション
0%がスタート位置、100%がゴール位置として、
左から右へグラデーション表示されます。
右から左へグラデーション
100%がスタート位置、0%がゴール位置として、
右から左へグラデーション表示されます。
上から下へグラデーション
0%がスタート位置、100%がゴール位置として、
上から下へグラデーション表示されます。
下から上へグラデーション
100%がスタート位置、0%がゴール位置として、
下から上へグラデーション表示されます。
左上から右下に向かってグラデーション
※ この方法で指定できるのは45度のグラデーションだけです。
斜め具合を調整することはできません。
円形グラデーション
ここでは、radial-gradient()を使用します。
グラデーションの片側を透明にする
transparentを指定することで、段々と透明になります。
写真にグラデーションを重ねる
この画像を背景にオーバーレイさせます。
gradientの後にカンマ区切りでurl()を指定します。
解説
CSSでグラデーションを表示するには、
linear-gradientを使用します。
【書式】
background:linear-gradient(to 方向, 開始色, 終了色);
background: -moz-linear-gradient(開始位置, 開始色, 終了色);
background: -webkit-linear-gradient(開始位置, 開始色, 終了色);
| 【方向角度（グラデーションの向き）】 | ||
| ↑ (下から上へ) | 0deg | to top |
|---|---|---|
| → (左から右へ) | 90deg | to right |
| ↓ (上から下へ) | 180deg | to bottom |
| ← (右から左へ) | 270deg | to left |
※ 角度ではなくキーワードで指定することも可能。
※ 方向角度を省略した場合は自動的に to bottom(180deg) となります。
まとめ
デザインの再現に悩んだ際、
この方法で解決できた事案が幾つかありました。
便利ですので、是非ご活用ください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 今回はドラッグで左右の比較表示ができるjQueryプラグイン「twentytwenty…
