ホームページ > 記事 > ウェブフロントエンド > 【オリジナル】CSS効率的な開発実践：CSS 3、LESS、SASS、Bootstrap、Foundation 読書メモ(5) 放射状グラデーションを使った光と影の効果_html/css_WEB-ITnose
【オリジナル】CSS効率的な開発実践：CSS 3、LESS、SASS、Bootstrap、Foundation 読書メモ(5) 放射状グラデーションを使った光と影の効果_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:52:12993ブラウズ
影効果は通常、オブジェクトに当たる光の感覚を表現するために使用されます。図 5.19 に示すように、テキストの光と影の効果を作成する場合は、背景の線形グラデーションを使用して作成できます。図 5.19 では、テキストを照らす光線に似た効果があり、テキストが強調表示されていることがわかります。これは非常に簡単に実装でき、テキストを中央に配置し、その中心から背景要素に放射状のグラデーションを設定するだけです。影の背景効果が完成しました。これを渡すことができます。色を調整して光と影の明るさを設定します。白に近づくほど明るくなります。図 5.20 に示すように、中心色が占める割合を調整して、ハロー効果の範囲を調整します。
図 5.20 ハロー効果の調整
画像と比較すると、開発者は CSS コード内のパラメータを直接調整して効果の変更を取得できるため、柔軟性と開発速度が大幅に向上します。
一緒に学びましょう
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。