[css] CSS를 사용한 내부 텍스트 그림자

최선의 시도는 다음과 같습니다.

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }

    <span class="inner_shadow">Inner Shadow</span>
   

문제는 가장자리에서 번지는 그림자를 자르는 방법입니다 !!! background-clip : text를 사용하여 웹킷을 시도했지만 웹킷이 배경 위에 그림자를 렌더링하므로 작동하지 않습니다.

CSS로 텍스트 마스크 만들기?

상단 마스크 레이어가 없으면 텍스트에 진정한 내부 그림자를 적용 할 수 없습니다.

아마도 누군가는 W3C가 background-clip : reverse-text를 추가하도록 권장해야 할 것입니다. 이것은 배경을 텍스트 안에 맞도록 자르는 대신 배경을 통해 마스크를 자르는 것입니다.

또는 배경의 일부로 텍스트 그림자를 렌더링하고 background-clip : 텍스트로 클립합니다.

나는 그 위에 동일한 텍스트 요소를 절대적으로 배치하려고 시도했지만 문제는 background-clip입니다. 텍스트는 텍스트 내부에 맞게 배경을 자르지 만 그 반대가 필요합니다.

나는 text-stroke : 20px white; 이 요소와 그 위에있는 요소 모두에서 텍스트 스트로크가 들어오고 나가는 것입니다.

대체 방법

현재 CSS에서 반전 된 텍스트 마스크를 만들 수있는 방법이 없으므로 SVG 또는 Canvas로 전환하여 효과를 얻기 위해 3 개의 레이어로 텍스트 대체 이미지를 만들 수 있습니다.

SVG는 XML의 하위 집합이므로 SVG 텍스트는 여전히 선택 및 검색이 가능하며 Canvas보다 적은 코드로 효과를 생성 할 수 있습니다.

SVG와 같은 레이어가 포함되어 있지 않기 때문에 Canvas로 이것을 달성하기가 더 어려울 것입니다.

SVG는 서버 측에서 생성하거나 브라우저에서 자바 스크립트 텍스트 대체 방법으로 생성 할 수 있습니다.

추가 자료 :

SVG 대 캔버스 :

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

SVG 텍스트로 클리핑 및 마스킹 :

http://www.w3.org/TR/SVG/text.html#TextElement

답변

<h1>Get this</h1>

h1 {
  color: black;
  background-color: #cc8100;
}

h1 {
  color: transparent;
  background-color: #cc8100;
}

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<center>
  <h1>Text With Inner Shadow</h1>
</center>

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}

<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);