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

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

図 5.20 ハロー効果の調整

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

学びたい人とコミュニケーションを取ろう