【オリジナル】CSS効率的な開発実践：CSS 3、LESS、SASS、Bootstrap、Foundation 読書メモ(5) 放射状グラデーションを使った光と影の効果_html/css_WEB-ITnose

影効果は通常、オブジェクトに当たる光の感覚を表現するために使用されます。図 5.19 に示すように、テキストの光と影の効果を作成する場合は、背景の線形グラデーションを使用して作成できます。図 5.19 では、テキストを照らす光線に似た効果があり、テキストが強調表示されていることがわかります。これは非常に簡単に実装でき、テキストを中央に配置し、その中心から背景要素に放射状のグラデーションを設定するだけです。影の背景効果が完成しました。これを渡すことができます。色を調整して光と影の明るさを設定します。白に近づくほど明るくなります。図 5.20 に示すように、中心色が占める割合を調整して、ハロー効果の範囲を調整します。

図 5.20 ハロー効果の調整

画像と比較すると、開発者は CSS コード内のパラメータを直接調整して効果の変更を取得できるため、柔軟性と開発速度が大幅に向上します。

一緒に学びましょう