CSS 擬似要素を使用して内部テキスト シャドウを作成する方法

CSS を使用した内部テキスト シャドウの作成

Web ページ内のテキストにぼやけた内部シャドウをキャストするテクニックを探しています。 box-shadow プロパティを調べましたが、内部シェーディングに対する限界があることがわかりました。この記事の目的は、擬似要素を利用して目的の効果を実現する新しいテクニックをガイドすることです。

擬似要素のトリック

CSS では、擬似要素 ( :before および :after) を使用すると、要素内に追加のコンテンツを作成できます。これらの要素を賢く応用して内側のシャドウを作成する例を次に示します。

1. Content: テキスト要素の title 属性に、目的の内側のシャドウ コンテンツを割り当てます。このコンテンツは擬似要素によって使用されます。
2. 擬似要素: テキスト要素に 2 つの擬似要素 (:before と :after) を追加します。同じコンテンツをタイトル属性として割り当て、元のテキストに対してわずかなオフセット位置 (例: 左 1 ピクセル、上 1 ピクセル) を与えます。
3. 色と不透明度: 色と不透明度を調整します。疑似要素の不透明度を調整して、半透明のぼやけた影を作成します。たとえば、rgba(255, 255, 255, .1) は、不透明度 10% の白い影を作成します。
4. Z-Index: を使用して、元のテキストの後ろに擬似要素を配置します。 z-index と負の値を使用して、それらが確実に背後にレンダリングされるようにします。 text.

コード例

以下は、この手法を示すコード例です。

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

.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>

以上がCSS 擬似要素を使用して内部テキスト シャドウを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。