CSS3 阴影(text-shadow)_html/css_WEB-ITnose

以前は、影の効果は通常、画像に作成されていましたが、CSS3 では、text-shadow 属性を直接使用して影を実現できます。このプロパティには、影の生成と被写体のぼかしという 2 つの目的があります。これにより、画像を必要とせずにテキストにテクスチャが追加されます。

基本構文:

rrree

値の範囲:

d82af2074b26fcfe177e947839b5d381: 長さの値。負の値も可能。影がどこまで伸びるかを指定するために使用されます。ここで、X オフセットは水平オフセット値、Y オフセットは垂直オフセット値です。 & & Lt; color & gt ;: 影の色を指定するか、影のぼかし値を指定することもできます。ぼかし効果を指定する場合は負の値にすることもできます。

以下の図に示すように:

簡単な説明:

前の構文と同じ方法で、カンマで区切って 1 つ以上のシャドウ効果のセットをオブジェクトに適用できます。 text-shadow: X オフセット Y オフセット ブラー カラー X オフセットは、その値が正の場合、影は右にオフセットされます。その値が負の場合、影は右にオフセットされます。左; Y オフセットは、その値が正の場合、影は下にオフセットされ、ブラーは上方向にオフセットされます。影の程度。その値を負の値にすることはできません。値が大きい場合、影はぼやけます。それ以外の場合、影はより鮮明になります。影のぼかしが必要ない場合は、[ぼかし] 値を 0 に設定できます。[色] は影の色を指し、RGBA カラーを使用できます。

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*也就是：text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...或者text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)],[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]...

次に、以下に示すように、各デモに独自の特定のスタイルを追加します:

.demo {     background: #666666;     width: 440px;     padding:30px;     font: bold 55px/100% "微软雅黑", "Lucida Grande", Arial, Sans;     color: #fff;     text-transform: uppercase; }

エフェクト 1: グローおよびエクストラ グロー エフェクト (NEON エフェクトとも呼ばれます)

.demo1{     text-shadow: red 0 1px 0;}

グロー エフェクトでは、グロー エフェクトを強化するために比較的大きなぼかし半径を設定します。もちろん、さまざまなぼかし半径を変更して、さまざまな効果を作成することもできます。 . さまざまな影の効果。下の NEON エフェクトと同じです。

.demo1{text-shadow: 0 0 20px red;}

エフェクト 2: ストローク テキスト エフェクト

.demo1{text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;}

Photoshop で使用するものと比較すると、ストローク エフェクトははるかに悪く、ブレークポイントがありますが、場合によっては、特別なストロークを実現するために使用できる場合もあります。この効果では主に 2 つのシャドウが使用され、1 つ目は左上に投影され、2 つ目は右下に投影されます。ブラー値はストロークを作成するシャドウ エフェクトには適用されないことにも注意してください。

エフェクト 3: 3D テキストエフェクト

.demo1{text-shadow: 1px 1px 0 #f96, -1px -1px 0 #f96;}

.demo1 {     text-shadow: 1px 1px rgba(197, 223, 248,0.8),     2px 2px rgba(197, 223, 248,0.8),     3px 3px rgba(197, 223, 248,0.8),     4px 4px rgba(197, 223, 248,0.8),     5px 5px rgba(197, 223, 248,0.8),     6px 6px rgba(197, 223, 248,0.8); }

3D テキストエフェクトの使用原理は、テキストの下または上に複数のレイヤーをコピーし、各レイヤーを移動して距離を移動します。左上または右下方向に 1px の範囲で 3D 効果を作成します。同時に、層が増えるほど厚くなります。上記の例のように、text-shadow を使用する代わりに、複数のシャドウを使用し、そのシャドウの色を同じ色に設定する必要があります。RGBA カラーを使用すると、より良い効果が得られます。

text-shadow を使用して多くの効果を設定することもできますが、ここでは 1 つずつ説明しません。詳細については、以下のリンクを参照してください: