CSS 의사 요소를 사용하여 내부 텍스트 그림자를 만드는 방법은 무엇입니까?

CSS로 내부 텍스트 그림자 만들기

웹 페이지 내 텍스트에 흐릿한 내부 그림자를 드리우는 기술을 찾고 있습니다. box-shadow 속성을 탐색했지만 내부 음영 처리에 대한 한계를 깨달았습니다. 이 글의 목적은 원하는 효과를 얻기 위해 의사 요소를 활용하는 새로운 기술을 안내하는 것입니다.

의사 요소 트릭

CSS에서 의사 요소( :before 및 :after)를 사용하면 요소 내에 추가 콘텐츠를 생성할 수 있습니다. 내부 그림자를 만들기 위해 이러한 요소를 영리하게 적용하는 방법은 다음과 같습니다.

1. 콘텐츠: 원하는 내부 그림자 콘텐츠로 텍스트 요소의 제목 속성을 할당합니다. 이 콘텐츠는 의사 요소에 의해 사용됩니다.
2. 의사 요소: 텍스트 요소에 두 개의 의사 요소(:before 및 :after)를 추가합니다. 제목 속성과 동일한 콘텐츠를 할당하고 원본 텍스트를 기준으로 약간의 오프셋 위치(예: 왼쪽 1픽셀, 위쪽 1픽셀)를 지정합니다.
3. 색상 및 불투명도: 색상 및 불투명도를 조정합니다. 반투명하고 흐릿한 그림자를 생성하기 위한 의사 요소의 불투명도. 예를 들어 rgba(255, 255, 255, .1)은 불투명도가 10%인 흰색 그림자를 만듭니다.
4. Z-Index: 다음을 사용하여 원본 텍스트 뒤에 의사 요소를 배치합니다. z-index 및 음수 값을 사용하여 텍스트 뒤에 렌더링되도록 합니다.

예제 코드

아래는 해당 기술을 보여주는 예제 코드입니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!