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

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

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

1. シャドウの背後

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

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

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

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

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

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

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

2. 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 はテキストに 1 つ以上の影を追加できます。複数の影を追加する場合は、影のリストをカンマで区切る必要があります。

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

1. ブラー値が大きいほど、シャドウは完全にブラーされなければなりません。ぼやけた意味を理解してください。セクション 3 の 2 番目の実装を確認するには、ここをクリックしてください。

2. 透明は色とみなすこともできます。

3. 複数の色のオーバーレイにより、特別な視覚効果が得られます。

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;

2. ぼかしエフェクト

最初にレンダリング:

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

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

効果はどうですか:

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

ぼかしは、コピーにぼかしたエッジを追加するのではなく、影全体をぼかします。つまり、テキストのコピー全体をぼかします。

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

テキスト エンティティはなく、テキストのぼかしたコピーだけです。

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

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

将文本前景色设为透明，说白了就是不要文本实体，只要一个模糊的文本副本。

3、描边效果

描边效果可以先想象下效果，描边描边，自然是用线条把文本从边缘描一遍，所以实现方法也非常简单：给文本加上两个阴影，一个是在文本左上边缘加上阴影（即，把文本副本往左上移动1px），另一个是在文本右上边缘加上阴影（即，把文本副本往右上移动1px），因为仅仅是描上一条细细的边，所以自然用不上blur，实现及效果如下：

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

 

当然该描边效果也有缺陷，那就是并不是完全的描边，我们放大看一下：

 

放大后会看到斜对角处并没有描边有断点，原因也很简单，两个文本副本分别向左上和右下偏移，自然会在斜对角处分开。毕竟和专业的修图软件相比该效果也只能算是停留在实现的程度上。

4、3D文本效果

3D文本效果其实和描边效果实现思路有些相似，只是换成了单方向添加多个阴影，稍微想想就会明白，其实就是把多个文本副本依次小余量地往外叠加即可，叠加的越多，3D出来的部分越多。

所以实现如下：

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;

 

5、里特罗复古风格

这是一个很有层次感和历史感的风格，先上效果图：

 

其实看完效果图，小伙伴们应该很快就会想到实现方法：两个阴影实现，一个阴影和背景色相同，一个阴影和文字前景色相同。Bingo，实现确实如此。

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

四、小了个结

当然用text-shadow还能做出很多种文本特效，只要理解了四个参数的含义，并充分利用阴影的偏移、模糊范围和颜色的变换，就能做出很多很出色的特效。

如果还有很棒的shadow特效，欢迎分享~~~~

上一篇：《CSS3小分队??进击的border-radius》