当前位置：文江博客话题详情

CSS 3 浅色文本阴影

发布于 2024-11-26 13:45:43 字数 142 浏览 0 评论 0原文

是否可以

具有与此图像相同的文本效果（内阴影、阴影）： Lightshadetextimagepreview

使用 CSS3 ，又如何？

原文

分享到QQ

分享到微博

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

发布评论

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

空‖城人不在 2024-12-03 13:45:43

WebKit 上的示例图像

仅限 WebKit (Safari/Chrome)：

<style>
    h1 {
        background-color: rgba(0,0,0,0.8);
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0 2px 2px;
    }
</style>
<h1>Hello StackOverflow</h1>

在这里您可以看到上面的代码片段在 JsFiddle 中： http://jsfiddle.net/HkTqe/6/

火狐浏览器和WebKit：

<style>
    .trick1 {
        color: black;
        height: 2em;
    }
    .trick2 {
        color: transparent;
        text-shadow: rgba(255,255,255,0.8) 0 5px 5px;
        margin-top: -2em;
    }
</style>
<div class="trick1">Text in Light Shade</div>
<div class="trick2">Text in Light Shade</div>

请注意，您必须按此顺序拥有两个具有相同文本内容的 div；否则它不会起作用。

两种技术的比较：http://jsfiddle.net/bABuM/

Example image on WebKit

WebKit-only (Safari/Chrome):

<style>
    h1 {
        background-color: rgba(0,0,0,0.8);
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0 2px 2px;
    }
</style>
<h1>Hello StackOverflow</h1>

Here you can see above snippet in JsFiddle: http://jsfiddle.net/HkTqe/6/

Firefox & WebKit:

<style>
    .trick1 {
        color: black;
        height: 2em;
    }
    .trick2 {
        color: transparent;
        text-shadow: rgba(255,255,255,0.8) 0 5px 5px;
        margin-top: -2em;
    }
</style>
<div class="trick1">Text in Light Shade</div>
<div class="trick2">Text in Light Shade</div>

Note that you must have two div's in that order, with the same textual content; else it won't work.

Comparison of both techniques: http://jsfiddle.net/bABuM/

回复收藏 0 原文

绿阴红影里的.如风往事 2024-12-03 13:45:43

不一定，但你可以尝试各种近似。有关大量示例，请参阅这篇文章：

回复收藏 0 原文

谎言 2024-12-03 13:45:43

您也可以使用 -webkit-mask-image 创建它 - 但它又只能在 webkit 浏览器中工作。您需要在 prohotshop 中创建透明的多云图像（您想要它的外观方式 - 我刚刚做了渲染/云并使用 aplha 通道对其进行了转换 - 通过稍微调整它，您可以实现与您的设计中相同的外观效果）然后将其应用为蒙版并将蒙版剪辑到文本上。 Webkit 对此非常有用，但 sux 因为并非所有浏览器都支持它。

目前无法使用 css3 创建完全相同的效果

http://jsfiddle。净/easwee/VMSD6/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    h1 {
        font-size:50px;
        font-weight:bold;
        font-family:Arial Black;
        color:#666;
        -webkit-mask-image:url("mask.png");
        -webkit-mask-clip:text;
        background:black;
    }
    </style>
</head>
<body>
<h1>SAMPLE TEXT</h1>
</body>
</html>

You could also create it using -webkit-mask-image - but it will again work only in webkit browsers. You need to crate the transparent cloudy image in prohotshop (the way you want it to look - i just did a render/clouds and transformed it using aplha channel - by tweaking it a bit you could achieve the same looking effect as in your design) and than apply it as mask and clip the mask to text. Webkit is wonderful for this but sux since it's not supported in all browsers.

Creating that exact same effect with css3 is currently not possible

http://jsfiddle.net/easwee/VMSD6/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    h1 {
        font-size:50px;
        font-weight:bold;
        font-family:Arial Black;
        color:#666;
        -webkit-mask-image:url("mask.png");
        -webkit-mask-clip:text;
        background:black;
    }
    </style>
</head>
<body>
<h1>SAMPLE TEXT</h1>
</body>
</html>

回复收藏 0 原文

~没有更多了~