CSS Text-Shadowを使用して、エンボステキストを作成します

キーテイクアウト

• CSS Text-Shadowプロパティを使用して、光と色合いをシミュレートすることにより、エンボステキスト効果を作成できます。これは、ポジティブな白い影と否定的な黒い影をテキストに適用し、上部の文字と日陰の下部に光の印象を作成することによって達成されます。 エンボス効果をより現実的にするために、部分的な不透明度にRGBA色の値を使用し、X方向とY方向の両方で影を相殺しないようにし、使用中の色の組み合わせに従って影を調整します。たとえば、色付きの背景に明るいテキストの場合、0.25の不透明度で暗いネガティブシャドウを使用します。
最終効果は、明るい色の暗い色合い、または暗い色の明るい色合いに向かって移動することでさらに強化できます。これは、明るい影と暗い影の両方の微妙な組み合わせを使用して、暗い影の不透明度が低く、明るい影に高い不透明度があり、背景のシェードにわずかなバイアスを使用することで実現できます。
• Text-Shadowプロパティは、名前から明らかなテキストの下に影を作成します！構文と機能はBox-Shadowに似ていますが、要素の境界ボックスの周りにレンダリングするのではなく、個々の文字の形状に従います。このタイプの効果が求められていたデザインに取り組んだことはありませんが、とても素敵に見えるとは思いません。安っぽいです - スパムメールやジオシティサイトで見つけられるもののように。
クラスのタッチ
• テキストシャドウ
は

です

text-shadow:3px 3px 1px #999;

はは特定のタスクに非常に役立ちます。このシャドウプロパティがあります。

text-shadow:3px 3px 1px #999;

慎重に行われ、あまりにも勇敢に行われず、効果は魅力的です。ボタンやキャプションなどの機能的なテキストにクラスの特別なタッチを提供します。このページでは、上部の検索フォームの「検索」ボタンなど、右側の列の「サブスクライブ」ボタンの「サブスクライブ」ボタンの「サブスクライブ」ボタンなどのいくつかの例を見ることができます。受信トレイ」、または上部の近くのカテゴリタブ

• ライトとシェード
影と深さの効果は、光と色合いをシミュレートすることによって作成されます。テキストシャドウを適用してエンボス加工された効果を作成する2つの基本的な方法があります。手紙：

しかし、発生する問題は、現実的な結果を達成するためにどれだけ適用すべきかという点で、色合いの適切なバランスを見つけることが非常に難しいということです。微妙すぎて、肉眼ではほとんど見えません。あまりにも明白で、それはドロップシャドウのように見え始めます。残念なことに、正しい効果を得るのが最も難しい効果の1つは、特にテキストシャドウがフォントの外側にレンダリングされているため、その上ではなく、フォントの外側で

の色の値を使用して、効果に部分的な不透明度があります。これにより、バックグラウンドとより良く溶け込み、効果の強度をより制御できます。 （RGBAの色はIE

ではサポートがありませんが、とにかくこのプロパティをサポートしていないので学術的です。） 視覚的に多すぎるための方向。ライトが真上にあるかのように、
• y

  text-shadow:0 -1px 1px rgba(0,0,0,0.5);

  方向でのみオフセットすると、より良く見えます。次の色の組み合わせに応じて異なる影を使用します。
• 色付きの（非常に暗い）背景の明るいテキストには、0.25の上向きの異常の暗いネガティブシャドウを使用します（価値が高くなります）。ここでは、1pxのぼやけたぼけで効果をわずかに和らげました。

  text-shadow:1px 1px 0 white;

光（白ではない）の色のテキストについては、かなり高い不透明度を持つ光のポジティブな影を使用します：>

他の組み合わせはより難しいです。暗い影は非常に暗い背景や非常に暗いテキストで効果がなく、明るい背景やテキストを持つ明るい影についても同じです。しかし、たくさんの実験の後、私は、明るい影と暗い影の両方の微妙な組み合わせで最良の効果が達成されたと思います。暗い影に低い不透明度、明るい影に高い不透明度、そして背景のシェードに向かってわずかなバイアスを追加します（したがって、明るい背景に暗いテキストの場合、もう少し明るい影を使用して、少し暗くなり、その逆も同様です）。これに似ています：

text-shadow:3px 3px 1px #999;

極端から遠く離れている（つまり、明るい色の暗い色合い、または暗い色の明るい色合いに向かって）、最終的な効果は良いはずです。しかし、彼らは厄介な色の組み合わせを最大限に活用していると思うので、すべての要因を考慮して、彼らは大丈夫に見えます。私はこれらの例のすべてを含むデモページをまとめました。あるいは、テキストシャドウのプロパティが適しているというまったく別のタスクがありますか？

CSSテキストの影とエンボステキストに関するよくある質問

CSSテキスト-Shadowを使用して、より顕著なエンボスエフェクトを作成するにはどうすればよいですか？

より顕著なエンボス効果を作成するには、テキスト-Shadowプロパティのぼやけの半径とオフセットを増やすことができます。ぼやけの半径はぼかしの量を決定し、オフセットはテキストからの影の距離と方向を決定します。たとえば、次のコードを使用できます。

Text-Shadow：2px 2px 2px＃000;

これにより、右に2ピクセル、2ピクセルの2ピクセルが2ピクセル、2ピクセルのぼかしがあります。影の色は黒です（＃000）。これらの値を調整して、望ましい効果を実現できます。

複数のテキストシャドを使用して、より複雑なエンボス効果を作成できますか？コンマで複数の影を分離することで、複数の影を指定できます。各影は、水平オフセット、垂直オフセット、およびぼかし半径の同じ3つの値で指定されています。たとえば、

Text -Shadow：1px 1px 1px＃000、-1px -1px 1px #fff;

これは2つの影を作成します。どちらの影にもぼやけた半径が1ピクセルです。

CSSテキスト-Shadow？

を使用してデボス（挿入図）テキスト効果を作成するにはどうすればよいですか？これにより、テキストの中にあるように見える影が作成され、挿入図またはデボスの外観が与えられます。たとえば、

テキストシャドウ：-1px -1px 1px＃000;これにより、1ピクセルのぼやけた半径で1ピクセルがテキストから1ピクセル、1ピクセルが1ピクセルになります。グロー効果を作成するためのテキストシャドウ。これを行うには、影に大きなぼやけた半径と明るい色を使用できます。たとえば、

Text-Shadow：0 0 10px＃f00;

これにより、テキストの周りに赤い輝きが生じます。たとえば：

Text-Shadow：1PX 1PX 1PX＃F00、2PX 2PX 1PX＃0F0、3PX 3PX右に3ピクセル、テキストから3ピクセル下の青い影。すべての影の半径は1ピクセルです

以上がCSS Text-Shadowを使用して、エンボステキストを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。