CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3で対角グラデーションを作成する方法

CSS3のlinear-gradient()関数を使うと、左上から右下へと流れるような対角グラデーションを簡単に実装できます。グラデーションの開始方向を指定することで、要素の背景に美しい色の変化を加えることが可能です。

対角グラデーションの基本構文

対角グラデーションでは、開始位置としてto bottom right（右下方向）などを指定します。以下のコードは、左上から赤、右下に向かって青へと変化するグラデーションを表示する例です。

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue);
            background: -o-linear-gradient(bottom right, red, blue);
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue);
         }
      </style>
   </head>
   <body>
      <div id = "grad1"></div>
   </body>
</html>

コードのポイント

  • 標準構文： linear-gradient(to bottom right, red, blue) が現在のCSS標準の書き方です。to bottom right は「左上から右下へ」の方向を意味します。
  • ベンダープレフィックス： -webkit-、-moz-、-o- などのプレフィックス付きの記述は、古いブラウザ向けの互換性対応です。最新のブラウザでは標準構文のみで動作しますが、幅広い環境をサポートしたい場合は併記しておくと安心です。
  • 色の指定： カンマ区切りで複数の色を指定でき、ここでは red（赤）から blue(青) へと滑らかに変化させています。

このコードをブラウザで実行すると、高さ100pxのdiv要素に、左上の赤から右下の青へと斜めに変化するグラデーション背景が表示されます。色や方向を自由に変更して、さまざまなデザインに活用してみてください。

  1. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l

  2. CSS3でキーフレームアニメーションを定義する方法

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。以下に、CSS3でキーフレームを定義するコード例を示します。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;