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

スポンサーリンク

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

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

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

  1. <style type="text/css">
  2. #hogehoge {
  3.   background: -moz-linear-gradient(left, #F9F9F9, #FFF);
  4.   background: -webkit-linear-gradient(left, #F9F9F9, #FFF);
  5.   background: linear-gradient(to right, #F9F9F9, #FFF);
  6.   color:#000;
  7. }

▽実際の動作はこちら▽

テスト

コードの解説

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

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

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

▽実際の動作はこちら▽

テスト

コードの解説

第二引数から第三引数に指定した色に段階を指定されたかたちで変化していきます。
例では、赤色から白色に変わりますが、
全体の80%までは赤色が指定されており、そこから白色に変化していくグラデーションとなっています。

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

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

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

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする