「CSS3 実戦」メモのテキストシャドウ: text-shadow_html/css_WEB-ITnose

書籍「CSS3 Practical Combat」を読んで勉強することによる要約
「CSS3 Practical Combat」/Cheng Lin.—Beijing Machinery Industry Press 2011.5

文法:

S値の簡単な説明:

は色を表し、

は浮動小数点数と単位識別子で構成される長さの値を表し、影の水平方向の延長距離を指定します。浮動小数点数とユニット識別子で構成される値。長さの値は負にすることはできず、ブラー効果の距離を指定します。ぼかし効果のみが必要な場合は、最初の 2 つの長さを 0 に設定します。

例:

none|<length>|none|[<shadow>,]*<shadow>或none|<color>|[,<color>]*

右下の影

左上の影

左下の影

ぼかし効果を加える影

定義テキスト 影効果

**シンプル概要: **text-shadow 属性の最初の値は水平方向の変位を表し、2 番目の値は垂直方向の変位を表します。正の値は右に、負の値は上に偏ります。または左; 3 番目の値はぼかし半径を表します。値はオプションです。4 番目の値は影の色を表します。

例: 影を介して前景色と背景色のコントラストを増やす

<style type="text/css">p{ text-align:center; margin:0; font-family:helvetica,arial,sans-serif; color:#999; font-size:80px; font-weight:bold; text-shadow:0.1em 0.1em #333;//右下角阴影 text-shadow:-0.1em -0.1em #333;//左上角阴影 text-shadow:-0.1em 0.1em #333;//左下角阴影 text-shadow:0.1em 0.1em 0.3em #333;//增加模糊效果的阴影 text-shadow:0.1em 0.1em 0.3em black;//定义文本阴影效果}</style>

概要:

影のオフセットは、テキストまでの距離からの 2 つの 値によって指定されます。最初の長さの値は、テキストの右側への水平距離を指定します。負の値は、テキストの左側に影を配置します。 2 番目の長さの値は、テキストの下端からの垂直距離を指定します。負の値を指定すると、テキストの上に影が配置されます。

影をオフセットした後、ぼかしの半径を指定できます。ブラー半径は、ブラー効果の範囲を指定する長さの値です。

シャド​​ウ効果の長さの値の前後に色の値を指定することもできます。カラー値はシャドウ効果の基礎として使用されます。色が指定されていない場合は、代わりに color 属性値が使用されます。

例: 複雑なテキスト効果をシミュレートします

p{ text-align:center; margin:150px auto; font-family:helvetica,arial,sans-serif; font-size:80px; font-weight:bold; color:#fff;//设置文字颜色 text-shadow:0.1em 0.1em 0.3em black;//通过阴影增加前景色和背景色的对比}

注:

各影効果では影のオフセット値を指定する必要がありますが、ぼかし半径と影の色はオプションのパラメータであり、各影の間はカンマで区切られています。

p{ text-align:center; margin:0; padding:24px; font-family:helvetica,arial,sans-serif; font-size:80px; font-weight:bold; color:#000;//设置文字颜色 background:#000;//设置背景颜色 text-shadow:0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;//使用阴影叠加出燃烧的文字特效}

影を使用して 3 次元のテキスト効果を重ね合わせる

: テキストの左上と右下に 1 ピクセルのオフセットの補完的な影を追加することで、軽い立体効果を実現できます。

影を使用して凹面テキスト効果をオーバーレイする

: これは、影を使用して 3D テキスト効果をオーバーレイすることの逆です。

シャドウを使用してテキストストローク効果をオーバーレイします

: テキストの 4 つの側面に 1 ピクセルの黒いシャドウを追加します。

影を使用してテキストのグロー効果を重ね合わせます

: 影が移動しないように設定し、同時にぼかされるように影を定義します。もちろん、単一の影または複数の影を使用できます。

例: 超クールな黒猫保安官のホームページ

p{    text-align:center;    margin:0;    padding:24px;    font-family:helvetica,arial,sans-serif;    font-size:80px;    font-weight:bold;    color:#D1D1D1;    background:#CCC;    text-shadow:-1px -1px white, -1px -1px #333;//使用阴影叠加出立体的文字特效                1px 1px white,                -1px -1px #444;//使用阴影叠加出凹体文字特效                -1px 0 black,                               0 1px black,                1px 0 black,                0 -1px black;//使用阴影叠加出文本描边特效                    0 0 0.2em #F87,                    0 0 0.2em #F87;//使用阴影叠加出文本外发光特 }

デモ効果: