用于小尺寸按钮上的普通大小的文本

Question

我目前正在玩CSS3并尝试实现这样的文字效果（黑色模糊的内部阴影）：

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

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

有什么想法吗？

Answer 1

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

title属性需要与内容相同。演示：http://dabblet.com/gist/1609945

Answer 2

你应该可以使用text-shadow来做到这一点，例如：

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

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

Answer 3

这是我最好的尝试：

    .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剪辑它。

我尝试在它上面绝对定位一个相同的文本元素，但问题是背景剪辑：文本裁剪背景以适应文本，但我们需要反过来。

我尝试使用文字笔划：20px白色;在这个元素和它上面的那个元素上，但是文本笔划也在进行中。

替代方法

由于目前无法在CSS中制作反转文本遮罩，您可以转向SVG或Canvas并使用三个图层制作文本替换图像以获得效果。

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

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

您可以在服务器端生成SVG，也可以在浏览器中生成javascript文本替换方法。

进一步阅读：

SVG与Canvas：

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

使用SVG文本剪切和屏蔽：

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

Answer 4

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

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

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

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

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

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

Answer 5

^{kendo451's answer中对CSS的更精确解释。}

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

<h1>Get this</h1>

和这个CSS：

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

It's a good slogan

第1步

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

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

It's a box

第2步

现在，我们将背景裁剪为文字形状：

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

The background is the text!

第3步

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

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

We got it! Yay!

请参阅 final result 。

缺点？

仅适用于Webkit（background-clip不能为text）。
多个阴影？甚至不要想。
你也会得到外面的光芒。

Answer 6

你可以这样做。不幸的是，没有办法在文本阴影上使用插入，但你可以用颜色和位置伪造它。将模糊向下移动并沿右上方排列阴影。这样的事情可能会起到作用：

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

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

Answer 7

试试这个变化的小宝石：

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

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

Answer 8

优雅示例，无需在标记中定位包装或重复内容：

＆＃13;

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

＆＃13;

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

＆＃13;

在黑暗背景下也很好看：

＆＃13;

: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);
}

＆＃13;

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

＆＃13;

AND ME LINK AND ME2 LINK

Answer 9

我有几个实例，我需要在文本上使用内部阴影，以下内容对我来说非常好：

.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％不透明度文本可见但不透过第一个阴影，这意味着它只在第一个阴影移位的文本字母内可见（左边1px，顶部2px））。要更改此可见阴影的模糊，请修改第一个图层阴影的模糊参数。

<强>注意事项

只有在不必具有100％不透明度的情况下才能实现所需的文本颜色时，此功能才有效。
仅当背景颜色为实色时才会起作用（因此，对于文本位于纹理背景上的提问者特定示例，它不起作用）。

Answer 10

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

这里是my best hack at this，其中颜色是透明的，背景和顶部文字阴影是相同的颜色，具有不同的不透明度，模拟蒙版，第二个文字阴影是更暗，更饱和的版本你真正想要的颜色（很容易用HSLA）。

enter image description here

（顺便说一句，文字和样式基于dupe thread's OP）

Answer 11

这是一个关于如何做到这一点的链接，它应该是你要找的东西：

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

Answer 12

这看起来有效：http://tips4php.net/2010/08/nice-css-text-shadow-effects/

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

Answer 13

似乎每个人都得到了这个答案。我喜欢@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);
}

Answer 14

对于使用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;
}

Answer 15

以web_designer的:before :after技术为基础，这里的内容更接近您的外观：

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

现在，使用：在psuedo类之后创建原始文本的透明副本，直接放在它上面。为其分配常规文本阴影，没有偏移。将原始文本颜色指定给阴影，并根据需要调整alpha。

http://dabblet.com/gist/2499892

您无法像在PS中那样完全控制阴影的扩散等，但对于较小的模糊值，它是完全可以通过的。阴影越过文本的边界，因此如果您在具有高对比度背景前景的环境中工作，则显而易见。对于较低对比度的物品，尤其是具有相同色调的物品，它不太明显。例如，我已经能够使用这种技术在金属背景中制作非常漂亮的蚀刻文本。

Answer 16

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

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

Answer 17

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

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

Answer 18

尝试使用此示例来插入文本阴影。这是 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

Answer 19

有一种更简单的方法来实现这个目标

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

瞧

Answer 20

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);

你可以看到在线文字和方框阴影： online text and box shadow

更多示例，您可以访问此地址： more example code freeclup

Answer 21

用于小尺寸按钮上的普通大小的文本

当在带有小文字的小按钮上使用时，我发现此页面上的其他想法失去了效力。此答案扩展到RobertPitt's 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>

注意：

我用this site修饰了色调。

Answer 22

我在这个网站上使用它，看起来也不错。看看它Inner shadow

内部文字阴影与CSS

22 个答案:

第1步

第2步

第3步

缺点？

用于小尺寸按钮上的普通大小的文本

注意：