内部文字阴影与CSS

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,erm somethink这样做:

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

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

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

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

Answer 6

^{在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 7

一个优雅的例子,不需要在标记中定位包装器或重复内容:

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

和我联系 和ME2链接

Answer 8

试试这个变化的小宝石:

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

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

Answer 9

我已经看到了许多提议的解决方案,但没有一个是我所希望的.

这是我最好的黑客,颜色是透明的,背景和顶部文字阴影是相同的颜色,不同的不透明度,模拟面具,第二个文字阴影是一个更暗,更饱和的颜色版本你实际上想要(很容易用HSLA).

(顺便说一句,文本和样式基于欺骗线程的OP)

Answer 10

我有几个实例,我需要在文本上使用内部阴影,以下对我来说效果很好:

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

这是一个关于如何做到这一点的链接,它应该是你正在寻找的:

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