CSS3 チーム -- テキスト クローン text-shadow_html/css_WEB-ITnose

前回の記事：「CSS3チーム??border-radiusの攻撃」

前回の記事ではborder-radiusをステージに上げてショーを行いましたが、今日も引き続きキャラクター達と交代していきます。客席に影の集団がうごめいている さて、今日のステージにいるのは影属性だ。シャドウには box-shadow と text-shadow の 2 つの属性があります。今日はまず text-shadow について説明します。

text-shadow は CSS2 で登場しましたが、寿命が短く、CSS2.1 で放棄されました。このシャドウは CSS3 で完全な状態で戻ってきました。

その名前が示すように、text-shadow はテキストに影効果を追加するために使用されます。 Web ページではあらゆる種類の豪華なテキスト シャドウ効果が表示されるでしょう。おそらく、これらの効果がどのように実現されるのか、text-shadow を使用するときに値をどのように設定する必要があるのか​​、なぜその値ではなくこのように設定する必要があるのか​​を尋ねることになるでしょう。 。

これらの質問に答えるのは実際には難しいことではありません。まず、text-shadow とは何かを理解する必要があります。

テキストシャドウはただのテキストシャドウではないのかと言う人もいるかもしれません。何を言う必要がありますか?これが間違っているとは言えませんし、私が言いたいのはそういうことではありません。友達に理解してもらいたいのは、

text-shadow はテキストのコピーです。下の図を見てください:

白いテキストはテキストの本文、赤いテキストはテキストのシャドウ、そしてシャドウは本文のコピーまたはクローンです。

text-shadow は、変更されたテキストのコピーおよび変更されたテキストのクローンです。よく言われるように、シャドウが変更されていない場合、テキスト シャドウはテキストの正確なクローンです。この文を覚えておくと、さまざまなテキスト シャドウ効果の text-shadow 値を設定する方法を理解するのに非常に役立ちます。

まず、text-shadow の構文を確認する必要があります:

text-shadow: h-shadow v-shadow blur color;

h-shadow は水平方向のシャドウの位置を指します。つまり、水平オフセット。負の値が許可されます。値が正の場合、影は右にオフセットされ、値が負の場合、影は左にオフセットされます。

v-shadow は垂直方向の影の位置、つまり垂直方向のオフセット、負の値を指します。許可されています。値が正の場合、影は下に向かって移動し、値が負の場合、影は上に向かって移動します。

blur は、ぼかし範囲のサイズを指します。注: ブラーの意味を完全に理解するには、「セクション 3 の 2 番目の実装をここで見る」をクリックしてください。

カラーシャドウカラー。

このうち、h-shadow と v-shadow は必須ですが、ぼかしと色はオプションです。

text-shadow 属性の value メソッドを正式に説明する前に、text-shadow について私自身の理解を話させてください。

3. 原理に基づいた影効果の実装を理解する 以下の例を使用して、原理に基づいた独自のアイデアに基づいて対応する効果を実現する方法を説明します。まず、テキストデモを貼り付けます:

HTML マークアップ:

  <div class="text_demo">    text demo  </div>

CSS コード:

.text_demo{  background: #666666;  width: 400px;  height: 200px;  font-size: 60px;  line-height: 200px;  text-align: center;  font-weight: bold;  text-transform: uppercase;  color: #ffffff;}

DEMO 効果:

注: 次の例はすべて、この例の簡単な変更です。

1. グロー エフェクト

グロー エフェクトは比較的一般的なエフェクトです。念のため、最初にエフェクトを貼り付けてください:

レンダリングからわかるように、

を追加するだけなので、text-shadow の実装です。とてもシンプルです:

CSS コード:

text-shadow: 0 0 25px #ff0000;

最初にレンダリング:

このエフェクトは上記のグローエフェクトと似ているので、持っている友達もいるかもしれません。次のアイデア:テキストの色と影の色が同じ色であるだけで、この友人の実装は次のようになります:

color: #ff2200;text-shadow: 0 0 8px #ff2200;

効果はどうですか:

効果は明ら​​かに異なります、これは実際にはグローエフェクト。この友人が失敗した理由は、ボケの概念を理解していなかったからだ。

それで、私たちが達成したい効果は次のとおりです:

この友人の間違いは、ぼやけたテキストのコピーにテキスト エンティティを重ね合わせ、元のぼやけた部分を再び鮮明にしてしまったことです。したがって、正しい実装は次のようになります:

color: transparent;text-shadow: 0 0 8px #ff2200;

color: #ffffff; text-shadow: 1px 1px 0 #ff0000 , -1px -1px 0 #ff0000;

color: #ffffff;text-shadow: 1px 1px #cccccc,2px 2px #cccccc,3px 3px #cccccc,4px 4px #cccccc,5px 5px #cccccc,6px 6px #cccccc;

color: #ffffff;text-shadow: -1px -1px #cccccc,-2px -2px #cccccc,-3px -3px #cccccc,-4px -4px #cccccc,-5px -5px #cccccc,-6px -6px #cccccc;

color: #ffffff;text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;