저는 현재 CSS3를 가지고 놀면서 다음과 같은 텍스트 효과를 얻으려고 노력하고 있습니다 (검은 색의 흐릿한 내부 그림자).
그러나 텍스트 내부에 텍스트 그림자를 만드는 방법을 찾을 수 없습니다 . box-shadow 요소가 다음과 같이 내부에 그림자를 렌더링 할 수 있기 때문에 여전히 가능한지 궁금합니다.
box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);어떤 아이디어?
답변:
여기 내가 사용 발견 된 약간의 트릭 :before과 :after의사 요소 :
.depth {
color: black;
position: relative;
}
.depth:before, .depth:after {
content: attr(title);
color: rgba(255,255,255,.1);
position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after { top: 2px; left: 2px }제목 속성은 콘텐츠와 동일해야합니다. 데모 : http://dabblet.com/gist/1609945
텍스트 그림자를 사용하여 수행 할 수 있어야합니다. 다음과 같이 생각해보십시오.
.inner_text_shadow
{
text-shadow: 1px 1px white, -1px -1px #444;
}여기에 예가 있습니다 : http://jsfiddle.net/ekDNq/
최선의 시도는 다음과 같습니다.
.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 텍스트로 클리핑 및 마스킹 :
kendo451의 답변 에서 CSS에 대한 더 정확한 설명 .
멋진 해커 내부 그림자 환상을 얻을 수있는 또 다른 방법이 있습니다
. 간단한 세 단계로 설명하겠습니다. 다음 HTML이 있다고 가정합니다.
<h1>Get this</h1>그리고이 CSS :
h1 {
color: black;
background-color: #cc8100;
}
텍스트를 투명하게 만드는 것으로 시작하겠습니다.
h1 {
color: transparent;
background-color: #cc8100;
}
이제 해당 배경 을 텍스트 모양으로 자릅니다 .
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
}
이제 마법 : 우리는 흐려 놓을 게 text-shadow될 것이다, 배경의 앞을 따라서 내부 그림자의 인상을주는!
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
text-shadow: 0px 2px 5px #f9c800;
}
최종 결과를 참조하십시오 .
background-clip수 없음 text).text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;?
우아한 예를 위치 지정 래퍼 또는 마크 업에 중복 콘텐츠에 대한 필요없이 :
: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;...하지만 어떤 색상을 사용하는지에 대해 정말 신중해야합니다. 본질적으로 착시 현상이므로 모든 상황에서 작동하지는 않습니다. 또한 더 작은 글꼴 크기에서는보기가 좋지 않으므로이 점에도 유의하십시오.
여러 개의 그림자 또는 이와 같은 멋진 것이 필요하지 않습니다. 음의 y 축에서 그림자를 오프셋하기 만하면됩니다.
밝은 배경의 어두운 텍스트 :
text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);배경이 어두운 경우 색상과 y 위치를 간단히 반전 할 수 있습니다.
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);rgba 값, 불투명도 및 블러를 사용하여 적절한 효과를 얻으십시오. 어떤 색상의 글꼴과 배경에 따라 달라지며 글꼴의 무게가 클수록 좋습니다.
이 작은 보석을 시도해보십시오.
text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);나는 보통 "답이 없다"를 도전으로 받아 들인다
제안 된 솔루션을 많이 보았지만 내가 바라던 솔루션은 없었습니다.
여기 이에 최선 해킹 색 배경과 상단 텍스트 그림자, 불투명도 다양한 마스크를 시뮬레이션과 같은 색깔, 투명, 그리고 두 번째 텍스트 그림자는 어두운 색상의 더 포화 버전입니다 실제로 원합니다 (HSLA로 매우 쉽게 수행 할 수 있음).
(btw, dupe 스레드의 OP를 기반으로 한 텍스트 및 스타일링 )
텍스트에 내부 그림자가 필요한 경우가 몇 가지 있었는데 다음이 잘 작동했습니다.
.inner {
color: rgba(252, 195, 67, 0.8);
font-size: 48px;
text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}이렇게하면 텍스트의 불투명도가 80 %로 설정되고 두 개의 그림자가 생성됩니다.
주의 사항
이 작업을 수행하는 방법에 대해 설명하는 링크는 다음과 같습니다.
http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/
작동하는 것 같습니다 : http://tips4php.net/2010/08/nice-css-text-shadow-effects/
그는 http://www.w3.org/Style/Examples/007/text-shadow#multiple에 설명 된대로 효과를 얻기 위해 여러 그림자를 사용하고 있습니다.
모두가 이것에 대한 답을 가지고있는 것 같습니다. @Web_Designer의 솔루션이 마음에 듭니다. 그러나 그렇게 복잡 할 필요는 없으며 찾고있는 흐릿한 내부 그림자를 얻을 수 있습니다.
http://dabblet.com/gist/3877605
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:before {
content: attr(title);
color: transparent;
position: absolute;
text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}이것은 내가 본 최고의 예입니다. http://lab.simurai.com/carveme/
소스는 gitthub https://github.com/simurai/lab/tree/gh-pages/carveme에 있습니다.
:before :afterweb_designer 의 기술을 바탕으로 다음과 같이 외모에 더 가까운 것이 있습니다.
먼저 텍스트를 내부 그림자의 색상으로 만듭니다 (OP의 경우 검은 색).
이제 : after psuedo 클래스를 사용하여 원본 텍스트의 투명한 복제본을 만들고 바로 위에 배치합니다. 오프셋없이 일반 텍스트 그림자를 지정하십시오. 그림자에 원본 텍스트 색상을 할당하고 필요에 따라 알파를 조정합니다.
http://dabblet.com/gist/2499892
PS 에서처럼 그림자의 확산 등을 완벽하게 제어 할 수는 없지만 더 작은 블러 값의 경우 상당히 통과 할 수 있습니다. 그림자는 텍스트의 경계를지나므로 대비가 높은 배경과 전경이있는 환경에서 작업하는 경우 분명합니다. 대비가 낮은 항목, 특히 동일한 색조의 항목의 경우 너무 눈에 띄지 않습니다. 예를 들어, 저는이 기술을 사용하여 금속 배경에 매우 멋진 에칭 텍스트를 만들 수있었습니다.
다음은 background-clip CSS3 속성을 사용하는 TRUE 삽입 텍스트 그림자에 대한 훌륭한 솔루션입니다.
.insetText {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}삽입 된 텍스트 그림자에 대해이 예제를 사용해보십시오. 다음은 HTML입니다.
<h1 class="inset-text-shadow">Inset text shadow trick</h1>및 CSS
body {
background: #f8f8f8;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text-shadow {
/* Shadows are visible under slightly transparent text color */
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);상자 그림자 :
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);온라인 텍스트 및 상자 그림자를 볼 수 있습니다. 온라인 텍스트와 상자 그림자
더 많은 예제를 보려면이 주소로 이동하십시오. 더 많은 예제 코드 freeclup
이 페이지의 다른 아이디어는 작은 텍스트 글자가있는 작은 버튼에 사용하면 효과가 떨어집니다. 이 답변은 RobertPitt의 답변으로 확장됩니다 .
다음은 사소한 조정입니다.
text-shadow: 1px 1px transparent, -1px -1px black;이 사이트 를 사용 하여 색조를 정교하게 다듬 었습니다.
나는이 사이트에서 그것을 사용하고 있고, 또한 좋아 보인다. 한 번 봐 이너 섀도우