ホームページ > 記事 > ウェブフロントエンド > 効率的な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:121467ブラウズ
影効果は通常、オブジェクトに当たる光の感覚を表現するために使用されます。図 5.19 に示すように、テキストの光と影の効果を作成する場合は、背景の線形グラデーションを使用して作成できます。図 5.19 では、テキストを照らすビームに似た効果があり、テキストが強調表示されていることがわかります。これは非常に簡単に実装でき、テキストを中央に配置し、背景要素の中央から放射状のグラデーションを設定するだけです。コードは次のとおりです。光と影の背景効果が完成します。色を調整すると、白に近づくほど明るくなります。図 5.20 に示すように、中心色が占める割合を調整して、ハロー効果の範囲を調整します。
図 5.20 ハロー効果の調整
画像と比較して、開発者は CSS コード内のパラメータを直接調整して効果を変更できるため、柔軟性と開発速度が大幅に向上します。
学びたい人とコミュニケーションを取ろう
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。