内部文字阴影与CSS

我目前正在玩CSS3，并试图达到这样的文字效果（黑色模糊的内部阴影）：

替代文字http://img.skitch.com/20100522-dxtchghg76yeent7cuysuunkn7.jpg

但是我找不到在文本内部创build文字阴影的方法。 我想知道是否还有可能，因为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 } 

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

Answer 2

你应该能够使用文字阴影来做到这一点，呃像这样的思想：

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

Answer 4

你可以这样做。 不幸的是，没有办法在文本阴影上使用插入，但是可以用颜色和位置来伪造它。 将模糊正确地放下，并沿着右上方排列阴影。 像这样的东西可能会诀窍：

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

…但你需要非常小心地使用你使用的颜色，否则它会看起来不对。 这本质上是一种错觉，所以在任何情况下都不起作用。 在较小的字体尺寸下，它也看起来不太好，所以也要注意。

Answer 5

^{在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 ）。
• 多重阴影？ 别想，
• 你也得到一个外在的光芒。

Answer 6

不需要多重阴影或任何像这样的幻想，你只需要在阴性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 7

试试这个变化的小gem：

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

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

Answer 8

我见过很多提出的解决scheme，但没有一个是我期望的。

这里是我最好的黑客 ，在这里，颜色是透明的，背景和顶部文字阴影是不同的不透明度，模拟面具相同的颜色，第二个文字阴影是一个颜色更深，更饱和的版本其实想要（HSLA很容易做到）。

（顺便说一句，文本和造型基于一个伪造线程的OP ）

Answer 9

我已经有了一些需要内文阴影的例子，下面的例子对我来说很好：

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

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

• 第一个是白色阴影（假设文字在白色背景上），从左边偏移1px，从顶部偏移2px，模糊3px。
• 第二个是黑色阴影，通过80％的不透明度文本可以看到黑色阴影，但不通过第一个阴影，这意味着只有在第一个阴影位移（从左边1px，从顶部2px）的文本字母内部才可见。 要更改此可见阴影的模糊，请修改第一层阴影的模糊参数。

注意事项

• 这只有在文本所需的颜色不需要100％不透明的情况下才能实现。
• 这只会在背景颜色是固定的时候才起作用（所以对于提问者的具体示例，文本位于带纹理的背景上不起作用）。

Answer 10

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

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

Answer 11

这里是一个链接，谈论如何做到这一点，它应该是你在找什么：

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

Answer 12

似乎每个人都得到了这个答案。 我喜欢@Web_Designer的解决scheme。 但是并不需要那么复杂，你仍然可以得到你正在寻找的模糊的内在影子。

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 13

这是很好很容易的例子：

 body { background: #F2F2F2 } h1 { font-size: 50px; font-weight: bold; background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } 

 <h1>http://stackoverflow.com/</h1> 

Answer 14

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

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

Answer 15

在web_designer的技术:before :after ，接近你的外观的是：

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

现在，在psuedo类之后使用：创build原始文本的透明副本，直接放置在它的顶部。 指定一个正常的文字阴影，没有偏移。 将原始文本颜色指定给阴影，并根据需要调整Alpha。

http://dabblet.com/gist/2499892

你不能完全控制像在PS中那样的阴影的扩散等，但是对于较小的模糊值来说，这是相当可靠的。 阴影越过了文字的边界，所以如果你在一个背景对比度高的环境中工作，这将是显而易见的。 对于较低对比度的项目，特别是色调相同的项目，不太明显。 例如，我已经能够使用这种技术在金属背景中制作非常漂亮的蚀刻文本。

Answer 16

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

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

Answer 17

下面是使用background-clip CSS3属性的TRUE插入文本阴影的一个很好的解决scheme：

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

我从这个网站使用它，也看起来不错。 看看它内在的影子

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

你可以看到在线文字和方块阴影： 在线文字和方块阴影

更多的例子，你可以去这个地址： 更多示例代码freeclup

Answer 21

有一个更简单的方法来实现这一点

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

瞧