【transform】ボックスの変形
みいと
おじさんのWEBデザイン学習まとめ
CSSで画像が指定可能な場所では、url()の代わりにlinear-gradient()で、直線状のグラデーションを設定することができます。
基本的な設定方法は、下記の形式になっています。
background: linear-gradient(方向, 開始色, 終了色);
方向は角度、またはキーワードで指定します。
方向は省略可能で、デフォルト値は「to bottom(上から下)」です。
角度は、数値に「deg」を付けて指定します。
指定する角度によって、下記のようなグラデーションになります。
キーワードは、toに続けて「left」「right」「top」「bottom」のキーワードを指定します。
色は背景色などの指定と同じく、16進数やRGBなどで指定します。
また、開始色と終了色は、その色になる位置を指定することもできます。
位置は、色の指定の後に半角スペースで区切って、「単位を付けた実数」または「パーセンテージ」で指定します。
さらに開始色と終了色の間には、途中の色をいくつでも設定可能です。
linear-gradient(to top, blue 30%, white 60%, blue 100%)
今回は、直線状のグラデーションの設定についてまとめました。
意図したとおりにグラデーション設定ができれば、画像に頼ることも少し減りそうです。