【HTML】（css）背景色にグラデーションを実装する

背景色にグラデーションを実装する

CSSで背景色にグラデーションを実装する方法をご紹介します。

背景色にグラデーションを実装する（基本のかたち）



<style type="text/css">
#hogehoge {
  background: -moz-linear-gradient(left, #F9F9F9, #FFF);
  background: -webkit-linear-gradient(left, #F9F9F9, #FFF);
  background: linear-gradient(to right, #F9F9F9, #FFF);
  color:#000;
}

▽実際の動作はこちら▽

テスト

コードの解説

第二引数から第三引数に指定した色に変化していきます。
例では、赤色から白色に変わるグラデーションを指定しています。

背景色にグラデーションを実装する（段階を指定する）



<style type="text/css">
#hogehoge {
  background: -moz-linear-gradient(left, #F9F9F9 80%, #FFF);
  background: -webkit-linear-gradient(left, #F9F9F9 80%, #FFF);
  background: linear-gradient(to right, #F9F9F9 80%, #FFF);
  color:#000;
}

▽実際の動作はこちら▽

テスト

コードの解説

第二引数から第三引数に指定した色に段階を指定されたかたちで変化していきます。
例では、赤色から白色に変わりますが、
全体の80％までは赤色が指定されており、そこから白色に変化していくグラデーションとなっています。
前述の基本のかたちと見比べてみると違うことが分かります。

まとめ

いかがでしたでしょうか？
今回はCSSでグラデーションを実装する方法をご紹介しました。
一見すると指定するのは記述やパーセンテージの調整など難しいようにも思えます。
しかし一度試してみると使い回しや今後の為に楽になりますのでぜひ挑戦してみましょう。

▽こちらの記事もどうぞ！

【HTML】（Javascript）ページトップに戻るボタンの実装

ページトップに戻るボタンの実装ページトップに戻るボタンを実装するコードをご紹介します。 ▽css <style...

jinichiblog.com

以上、「【HTML】（css）背景色にグラデーションを実装する」でした。