css - 带有 CSS 的内部文本阴影

Question

我目前正在使用 CSS3 并试图实现这样的文本效果（黑色模糊内阴影）：

但我找不到在文本内创建文本阴影的方法。我想知道它是否仍然可能，因为 box-shadow 元素能够像这样在内部渲染阴影：

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

有任何想法吗？

score 105 · Accepted Answer

:before这是我使用and: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

score 47 · Accepted Answer

你应该可以使用文本阴影来做到这一点，erm somethink像这样：

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

这是一个例子：http: //jsfiddle.net/ekDNq/

score 19 · Accepted Answer

这是我最好的尝试：

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

问题是如何剪辑边缘流血的阴影！！！我在 webkit 中尝试使用 background-clip:text，但是 webkit 会在背景上方渲染阴影，所以它不起作用。

用 CSS 制作文本掩码？

如果没有顶部遮罩层，就不可能在文本上制作真正的内阴影。

也许有人应该建议 W3C 添加background-clip: reverse-text，这将在背景中剪切蒙版，而不是剪切背景以适合文本。

要么将文本阴影渲染为背景的一部分，然后使用 background-clip: text 对其进行剪辑。

我尝试在其上方绝对定位相同的文本元素，但问题是背景剪辑：文本裁剪背景以适合文本，但我们需要相反。

我尝试使用 text-stroke: 20px white; 在这个元素和它上面的那个元素上，但是文本笔划进出。

替代方法

由于目前无法在 CSS 中制作反转文本蒙版，因此您可以使用 SVG 或 Canvas 并制作具有三层的文本替换图像以获得您的效果。

由于 SVG 是 XML 的子集，因此 SVG 文本仍然可以选择和搜索，并且可以使用比 Canvas 更少的代码来生成效果。

用 Canvas 实现这一点会更难，因为它没有像 SVG 那样的带有层的 dom。

您可以在服务器端生成 SVG，也可以在浏览器中以 javascript 文本替换方法的形式生成 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

score 16 · Accepted Answer

一个不需要定位包装器或标记中重复内容的优雅示例：

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

AND ME 链接 和 ME2 链接

score 14 · Accepted Answer

^{kendo451 的答案中对 CSS 的更精确解释。}

还有另一种获得花哨的内部阴影错觉的方法，
我将通过三个简单的步骤进行解释。假设我们有这个 HTML：

<h1>Get this</h1>

这个CSS：

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

这是一个很好的口号

步骤1

让我们从使文本透明开始：

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

这是一个盒子

第2步

现在，我们将该背景裁剪为文本的形状：

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

背景是文字！

第 3 步

现在，魔术：我们将在背景前面放置一个模糊text-shadow的，从而给人一种内部阴影的印象！

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

我们得到了它！耶！

查看最终结果。

缺点？

仅适用于 Webkit（background-clip不能text）。
多重阴影？想都别想。
你也会得到外发光。

score 10 · Accepted Answer

你可以这样做。不幸的是，没有办法在文本阴影上使用插图，但你可以用颜色和位置来伪造它。将模糊部分向右下方，并沿右上角排列阴影。这样的事情可能会奏效：

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

...但是你需要非常非常小心你使用的颜色，否则它会看起来不好看。它本质上是一种视错觉，因此并非在所有情况下都有效。它在较小的字体大小上看起来也不是很好，所以也要注意这一点。

score 10 · Accepted Answer

不需要多个阴影或任何类似的东西，你只需要在负 y 轴上偏移你的阴影。

对于浅色背景上的深色文本：

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

如果您有深色背景，则可以简单地反转颜色和 y 位置：

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

使用 rgba 值、不透明度和模糊来获得恰到好处的效果。这在很大程度上取决于您拥有的颜色字体和背景，字体越重越好。

score 7 · Accepted Answer

我见过很多提议的解决方案，但没有一个是我所希望的。

这是我最好的 hack，其中颜色是透明的，背景和顶部文本阴影是相同的颜色，具有不同的不透明度，模拟蒙版，第二个文本阴影是你所用颜色的更暗、更饱和的版本实际上想要（用 HSLA 很容易做到）。

在此处输入图像描述

（顺便说一句，基于欺骗线程的 OP 的文本和样式）

score 7 · Accepted Answer

试试这个变体的小宝石：

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

我通常把“没有答案”当作挑战

score 6 · Accepted Answer

我遇到过一些需要在文本上添加内部阴影的情况，以下对我来说效果很好：

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

这将文本的不透明度设置为 80%，然后创建两个阴影：

第一个是白色阴影（假设文本在白色背景上）从左侧偏移 1px，从顶部偏移 2px，模糊 3px。
第二个是黑色阴影，通过 80% 不透明度的文本可见，但不通过第一个阴影可见，这意味着它仅在第一个阴影移位的文本字母内可见（距左侧 1 像素，距顶部 2 像素）。要更改此可见阴影的模糊，请修改第一层阴影的模糊参数。

注意事项

这只有在不需要 100% 不透明度的情况下可以实现所需的文本颜色时才有效。
这只有在背景颜色是纯色的情况下才有效（因此，它不适用于提问者的特定示例，即文本位于带纹理的背景上）。

score 5 · Accepted Answer

这是一个讨论如何执行此操作的链接，它应该是您正在寻找的内容：

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

score 4 · Accepted Answer

这看起来像是在工作：http ://tips4php.net/2010/08/nice-css-text-shadow-effects/

他使用多个阴影来实现这种效果，如下所述：http: //www.w3.org/Style/Examples/007/text-shadow#multiple

score 4 · Accepted Answer

似乎每个人都有这个问题的答案。我喜欢@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);
}

score 3 · Accepted Answer

这很容易成为我见过的最好的例子。 http://lab.simurai.com/carveme/

来源在 gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

score 3 · Accepted Answer

这是使用 background-clip CSS3 属性的 TRUE inset text shadow 的一个很好的解决方案：

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

score 3 · Accepted Answer

基于:before :afterweb_designer 的技术，这里有一些更接近你的外观：

首先，使您的文本成为内部阴影的颜色（在 OP 的情况下为黑色）。

现在，使用 :after 伪类创建原始文本的透明副本，直接放置在其顶部。为它分配一个没有偏移的常规文本阴影。将原始文本颜色分配给阴影，并根据需要调整 alpha。

http://dabblet.com/gist/2499892

您无法像在 PS 中那样完全控制阴影的散布等，但对于较小的模糊值来说，它是可以接受的。阴影超出了文本的边界，因此如果您在具有高对比度背景 - 前景的环境中工作，它会很明显。对于对比度较低的项目，尤其是具有相同色调的项目，它不会太明显。例如，我已经能够使用这种技术在金属背景中制作非常漂亮的蚀刻文本。

score 2 · Accepted Answer

这是我在查看这里的一些想法后得出的结论。主要思想是文本的颜色与两种阴影混合，并注意这是在灰色背景上使用的（否则白色不会很好地显示出来）。

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

score 1 · Accepted Answer

对于小按钮上的正常大小的文本

我发现此页面上的其他想法在用于带有小文本字体的小按钮时会失效。这个答案扩展了罗伯特皮特的答案。

这是一个小的调整：

text-shadow: 1px 1px transparent, -1px -1px black;

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});

body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

笔记：

我用这个网站来巧妙地处理色调。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

试试这个例子插入文本阴影。这是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);

}

Demo on Jsfiddle

score 0 · Accepted Answer

有一种更简单的方法可以实现这一点

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

瞧

score -1 · Accepted Answer

-1

我在这个网站上使用它，它看起来也不错。看看它内阴影

于 2012-03-27T09:45:31.380 回答

css - 带有 CSS 的内部文本阴影

22 回答 22

步骤1

第2步

第 3 步

缺点？

对于小按钮上的正常大小的文本

笔记：

Related

Reference