CSS 3的浅色文本阴影

时间：2011-07-28 13:24:54

标签： text css3 shadow

是否可以与此图像具有相同的文字效果（内部阴影，阴影）：

Light shade text image preview

使用CSS3，以及如何使用？

3 个答案:

答案 0 :(得分：7)

仅限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/

Firefox＆amp; 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/

答案 1 :(得分：1)

不是真的，但你可以尝试各种各样的差点。有关大量示例，请参阅this post：

答案 2 :(得分：1)

您也可以使用-webkit-mask-image创建它 - 但它只能在webkit浏览器中使用。你需要在prohotshop中设置透明的阴天图像（你希望它看起来的方式 - 我只是做了一个渲染/云，并使用aplha通道进行了转换 - 通过稍微调整它可以获得与你的设计相同的效果）然后将其应用为蒙版并将蒙版剪辑为文本。 Webkit非常适合这个，但因为并不是所有浏览器都支持它。

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

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>
相关问题
最新问题