CSS で内部テキストのシャドウを実現するにはどうすればよいですか?

CSS を使用して内部テキストのシャドウを実現する

テキスト内にテキストのシャドウ効果を作成することは、CSS で困難な作業となる場合があります。 box-shadow プロパティにより要素内でシャドウ レンダリングが可能になりますが、この機能はテキストには拡張されません。

ただし、:before および :after 疑似要素を使用する賢いトリックにより、この制限を回避できます。テキスト要素の title 属性を目的のコンテンツに設定し、これらの疑似要素を使用することにより、テキストの内側の影のような錯覚を作成できます。

この効果を実現するには、次のように :before 要素と :after 要素を定義します。 title 属性から取得されたコンテンツ。テキスト要素内に絶対に配置し、元のテキストからわずかにオフセットして影効果を作成します。 rgba(255, 255, 255, .1) などの透明な黒色と不透明度でスタイルを設定し、背景と微妙にブレンドします。

このテクニックを示すサンプル コード スニペットは次のとおりです。

<code class="css">.depth {
  position: relative;
  padding: 50px;
  font: bold 7em Arial, sans-serif;
  color: black;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></code>

この手法を使用すると、Photoshop や広範な画像操作を必要とせずに、提供した例に視覚的に似た内部テキスト シャドウ効果を実現できます。

以上がCSS で内部テキストのシャドウを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。