使用 CSS 实现内部文本阴影

发布于 2024-09-02 17:59:19 字数 272 浏览 8 评论 0原文

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

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

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

有什么想法吗？

原文

I am currently playing around with CSS3 and trying to achieve a text effect like this (the black blurry inner shadow):

But I cannot find a way to create text shadows inside the text. I wonder whether it is still possible because the box-shadow element is able to render shadow inside like this:

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

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

趁微风不噪 2024-09-09 17:59:20

这是我使用 :before 和 :after 伪元素发现的一个小技巧：

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

/**
 * A "deeper" indented text effect with the :before and :after pseudo-elements.
 */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #0A539C;
  background: linear-gradient(top, #4293d6 0%, #001e96 100%);
  overflow: hidden;
}

.depth {
  display: block;
  padding: 50px;
  color: black;
  font: bold 7em Arial, sans-serif;
  position: relative;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}

<h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1>

Here's a little trick I discovered using the :before and :after pseudo-elements:

The title attribute needs to be the same as the content. Demo: http://dabblet.com/gist/1609945

/**
 * A "deeper" indented text effect with the :before and :after pseudo-elements.
 */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #0A539C;
  background: linear-gradient(top, #4293d6 0%, #001e96 100%);
  overflow: hidden;
}

.depth {
  display: block;
  padding: 50px;
  color: black;
  font: bold 7em Arial, sans-serif;
  position: relative;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}

<h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1>

回复收藏 0 原文

甜心 2024-09-09 17:59:20

您应该能够使用文本阴影来做到这一点，嗯，像这样：

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

这是一个示例： http://jsfiddle.net/ekDNq/< /a>

You should be able to do it using the text-shadow, erm somethink like this:

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

here's an example: http://jsfiddle.net/ekDNq/

回复收藏 0 原文

沩ん囻菔务 2024-09-09 17:59:20

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

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

An elegant example without the need for a positioned wrapper or duplicative content in the markup:

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

Looks good on dark backgrounds as well:

: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 LINK
AND ME2 LINK

回复收藏 0 原文

陌伤ぢ 2024-09-09 17:59:20

这是我最好的尝试：

    .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

Here's my best try:

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

The problem is how to clip the shadow that bleeds around the edges!!! I tried in webkit using background-clip:text, but webkit renders the shadow above the background so it doesn't work.

Making a Text Mask with CSS?

Without a top mask layer it is impossible to do a true inner shadow on text.

Perhaps someone should recommend that the W3C add background-clip: reverse-text, that would cut a mask through the background instead of cutting the background to fit inside the text.

Either that or render the text-shadow as part of the background and clip it with background-clip: text.

I tried absolutely positioning an identical text element above it, but the problem is background-clip: text crops the background to fit inside the text, but we need the reverse of that.

I tried using text-stroke: 20px white; on both this element and the one above it, but the text stroke goes in as well as out.

Alternate Methods

Since there is currently no way to make an inverted-text mask in CSS, you could turn to SVG or Canvas and make a text replacement image with the three layers to get your effect.

Since SVG is a subset of XML, SVG text would still be select-able and searchable, and the effect can be produced with less code than Canvas.

It would be harder to achieve this with Canvas because it doesn't have a dom with layers like SVG does.

You could produce the SVG either server-side, or as a javascript text-replacement method in the browser.

Further Reading:

SVG versus Canvas:

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

Clipping and Masking with SVG Text:

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

回复收藏 0 原文

掩饰不了的爱 2024-09-09 17:59:20

^{在kendo451的答案中对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;
}

背景就是文字！

步骤 3

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

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

我们明白了！耶！

请参阅最终结果。

缺点？

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

^{More precise explanation of the CSS in kendo451's answer.}

There's another way to get a fancy-hacky inner shadow illusion,
which I'll explain in three simple steps. Say we have this HTML:

<h1>Get this</h1>

and this CSS:

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

It's a good slogan

Step 1

Let's start by making the text transparent:

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

It's a box

Step 2

Now, we crop that background to the shape of the text:

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

The background is the text!

Step 3

Now, the magic: we'll put a blurred text-shadow, which will be in front
of the background, thus giving the impression of an inner shadow!

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

We got it! Yay!

See the final result.

Downsides?

Only works in Webkit (background-clip can't be text).
Multiple shadows? Don't even think.
You get an outer glow too.

回复收藏 0 原文

随风而去 2024-09-09 17:59:20

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

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

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

如果您有深色背景，则只需反转颜色和 y 位置：

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

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

There's no need for multiple shadows or anything fancy like that, you just have to offset your shadow in the negative y-axis.

For dark text on a light background:

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

If you have a dark background then you can simply invert the color and y-position:

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

Play around with the rgba values, the opacity, and the blur to get the effect just right. It will depend a lot on what color font and background you have, and the weightier the font, the better.

回复收藏 0 原文

奢华的一滴泪 2024-09-09 17:59:20

你可以这样做。不幸的是，无法在文本阴影上使用插图，但您可以使用颜色和位置来伪造它。将模糊效果向右下方并沿右上角排列阴影。像这样的东西可能会起作用：

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

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

You can kind of do this. Unfortunately there's no way to use an inset on text-shadow, but you can fake it with colour and position. Take the blur right down and arrange the shadow along the top right. Something like this might do the trick:

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

... but you'll need to be really, really careful about which colours you use otherwise it will look off. It is essentially an optical illusion so won't work in every context. It also doesn't really look great at smaller font sizes, so be aware of that too.

回复收藏 0 原文

金橙橙 2024-09-09 17:59:20

尝试这个小小的变体：

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

我通常将“没有答案”视为挑战

Try this little gem of a variation:

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

I usually take "there's no answer" as a challenge

回复收藏 0 原文

童话 2024-09-09 17:59:20

我已经看到了许多建议的解决方案，但没有一个完全符合我的期望。

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

在此处输入图像描述

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

回复收藏 0 原文

和影子一齐双人舞 2024-09-09 17:59:20

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

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

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

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

注意事项

仅当可以实现所需的文本颜色且不必采用 100% 不透明度时，此方法才有效。
这仅在背景颜色为纯色时才有效（因此，它不适用于发问者的文本位于带纹理的背景上的特定示例）。

I've had a few instances where I've needed inner shadows on text, and the following has worked out well for me:

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

This sets the opacity of the text to 80%, and then creates two shadows:

The first is a white shadow (assuming the text is on a white background) offset 1px from the left and 2px from the top, blurred 3px.
The second is a black shadow which is visible through the 80% opacity text but not through the first shadow, which means it's visible inside the text letters only where the first shadow is displaced (1px from the left and 2px from the top). To change the blur of the this visible shadow, modify the blur parameter for the first layer shadow.

Caveats

This will only work if the desired color of the text can be achieved without it having to be at 100% opacity.
This will only work if the background color is solid (so, it won't work for the questioner's specific example where the text sits on a textured background).

回复收藏 0 原文

只为守护你 2024-09-09 17:59:20

看来这个问题大家心里都有答案了。我喜欢@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);
}

Seems everyone's got an answer to this one. I like the solution from @Web_Designer. But it doesn't need to be as complex as that and you can still get the blurry inner shadow you're looking for.

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

回复收藏 0 原文

如歌彻婉言 2024-09-09 17:59:20

color: transparent;
font-size: 17rem;
text-shadow: 1px 1px 5px white, 0px 0px 0px black;

结果：

color: transparent;
font-size: 17rem;
text-shadow: 1px 1px 5px white, 0px 0px 0px black;

Result:

回复收藏 0 原文

不知所踪 2024-09-09 17:59:20

基于 web_designer 的 :before :after 技术，这里有一些更接近您的外观的东西：

首先，将文本设置为内部阴影的颜色（黑色）在OP的情况下）。

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

http://dabblet.com/gist/2499892

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

回复收藏 0 原文

哆兒滾 2024-09-09 17:59:20

这是使用 CSS3 属性 background-clip 实现 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;
}

Here's a great solution for TRUE inset text shadow using the background-clip CSS3 property:

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

回复收藏 0 原文

烛影斜 2024-09-09 17:59:20

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

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

Here's what I came up with after looking at some of the ideas here. The main idea is that the color of the text blends with both shadows, and note that this is being used on a grey background (otherwise the white won't show up well).

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

回复收藏 0 原文

揽清风入怀 2024-09-09 17:59:20

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

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

Voilà

There's a much simpler way to achieve this

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

Voilà

回复收藏 0 原文

塔塔猫 2024-09-09 17:59:20

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

我发现本页上的其他想法在用于具有小文本字体的小按钮时会失去效力。此答案扩展了RobertPitt 的答案。

这是一个小调整：

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>

注意：

我使用此网站来巧妙处理色调。

For normal-sized text on small-ish buttons

I found the other ideas on this page to lose their efficacy when used on small buttons with small text lettering. This answer expands on RobertPitt's answer.

Here is the minor tweak:

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>

Note:

I used this site to finesse the color shades.

回复收藏 0 原文

西瑶 2024-09-09 17:59: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 示例代码

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

for box shadow:

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

you can see online text and box shadow:
online text and box shadow

for more example you can go to this address :
more example code freeclup

回复收藏 0 原文

醉南桥 2024-09-09 17:59:20

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

}

Jsfiddle 上的演示

Try this example for inset text shadow. Here's the HTML

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

and the 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

回复收藏 0 原文

~没有更多了~