テキストの内側の影を実装するにはどうすればよいですか?

Question

text-shadow で文字の影は実現できますか? では、文字の内側の影を表示するにはどうすればよいでしょうか?

Answer 1

重要なポイントは、RGBA 透明色を使用してフォントの内側のシャドウ効果をシミュレートすることです。

body{
background:#fff;
}
.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

原理は非常に単純で、text-shadow は常にフォントの下にあるため、text-shadow の複数の影を使用して、最初にフォントの単色の下に埋め込まれたシャドウの効果をシミュレートし、次に透明度を下げることによって、フォントの効果は、内側の影の効果をシミュレートしたものです。もちろん、この種のシミュレーションには制限があります。たとえば、背景色とシミュレートされた影は同じでなければなりません。そうしないと混乱してしまいます（笑）。次に、RGBA をサポートしていないブラウザでは機能しません。古いブラウザでも少なくとも単色を表示できるように、デフォルトの色を RGBA の上に追加する必要があります:

.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:#09f;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

最後に、例のテキストを選択した場合上では、明らかなブレが見られます。これについては前述しましたが、複数の影の効果は選択時にも有効であるため、テキストを読みやすくするために、選択時のテキストの影を削除する必要があります。

りー