双色三维块和文本 | CSS-Tricks

我们可以使用多个text-shadow和box-shadow值来为块或文本创建三维外观，例如David DeSandro页脚的此屏幕截图。但是，在该示例中，“三维”部分为纯色。

通过在框或文本阴影声明的“堆叠顺序”中交替颜色，我们可以模拟更具三维/照明效果的效果。

text-shadow:   1px 0px #eee, 0px 1px #ccc,
               2px 1px #eee, 1px 2px #ccc,
               3px 2px #eee, 2px 3px #ccc,
               4px 3px #eee, 3px 4px #ccc,
               5px 4px #eee, 4px 5px #ccc,
               6px 5px #eee, 5px 6px #ccc,
               7px 6px #eee, 6px 7px #ccc,
               8px 7px #eee, 7px 8px #ccc,
               8px 8px #eee;

示例

Bakaburg

# 2011年5月11日

疯了……

Manuel

# 2011年5月12日

不错的效果，谢谢=）！

Gareth

# 2011年5月13日

太棒了！如果你这样做

text-shadow: 
1px 0px 1px #ccc, 0px 1px 1px #eee, 
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;

你将挤出部分平滑，这样就不会出现奇怪的锯齿线。

Jan-Marten de Boer

评论永久链接# 2011年5月19日

非常好的修复。它比Chris发布的版本好很多。不冒犯，Chris >，
Jake Ingman

评论永久链接# 2011年7月7日

在我坚持使用锯齿版本之前，我自己也尝试过这个。1px模糊让我很困扰，因为它让所有清晰的边缘都消失了。也许有一种方法可以同时获得两者？阴影收缩？

Rikudo Sennin

# 2011年5月27日

我无法理解这个，它是如何工作的？

Rikudo Sennin

# 2011年5月27日

附注：我创建了一个PHP函数来自动执行此操作（非常原始，并且不检查错误）:)

function threeDtext($color = array(238,238,238), $size = 10, $smooth = true) {
        $secondColor = array($color[0] - 24, $color[1] - 24, $color[2] - 24);
        echo 'text-shadow: ';
        for($i = 1; $i <= $size; $i++) {
            echo $i;
            echo 'px ';
            echo $i+1;
            echo 'px ';
            echo ($smooth) ? '1px ' : null;
            echo "rgb({$color[0]},{$color[1]},{$color[2]}), ";
            echo $i+1;
            echo 'px ';
            echo $i;
            echo 'px ';
            echo ($smooth) ? '1px ' : null;
            echo "rgb({$secondColor[0]},{$secondColor[1]},{$secondColor[2]})";
            echo ($i == $size) ? ';' : ",\n";
        }
    }

Jeff Simeon

# 2011年6月10日

我使用{LESS}做了一些更复杂的事情。你可以在此处查看

http://dl.dropbox.com/u/442561/WoodEffect/textshadowtest.html

比上面的示例复杂得多，但{LESS}使它更容易。

Mary Jane Rutkowski

评论永久链接# 2011年6月13日

这些示例很漂亮！你能分享吗？

matt

# 2011年6月15日

如果你使用透明度和一些大数字，你可以操纵它来实现一些内发光样式的效果。
请注意，这似乎有点不稳定，因此请自行承担风险 - 这似乎有点占用内存，因此请准备好强制退出你的网页浏览器……（也不要使用代码程序的预览模式，因为它可能会导致崩溃）。

font-size: 500px;
text-shadow: 0px 0px 0px transparent, 0px 1px 300px #000,
             2px 1px 4px #fff, 1px 2px 5px #000,
	     3px 2px 5px #888, 2px 3px 5px #000,
	     4px 3px 5px #777, 3px 4px 5px #000,
	     5px 4px 5px #666, 4px 5px 5px #000,
	     6px 5px 5px #eee, 5px 6px 5px #000,
	     7px 6px 5px #ddd, 6px 7px 5px #000,
	     8px 7px 1px #ccc, 7px 8px 5px #000,
	     8px 8px 1px #fff;
text-decoration: underline;
text-transform: uppercase;
font-stretch: extra-condensed;
font-weight: bold;
color: transparent;

在不同浏览器上的效果似乎并不相同，但我认为它足够有趣可以分享……

Luky_Vj

评论永久链接# 2012年4月5日

你的非常令人印象深刻！

Sam Iso

# 2012年9月1日

很酷，但在Google Chrome 21.0上不起作用。

Sam Iso

评论永久链接# 2012年9月1日

哎呀，经过多次尝试后，它终于可以用了。

WAQAR AHMAD

# 2015年10月9日

3d文本阴影
text-shadow: 0px 1px 1px #ddd,
0px 2px 1px #d6d6d6,
0px 3px 1px #ccc,
0px 4px 1px #c5c5c5,
0px 5px 1px #c1c1c1,
0px 6px 1px #bbb,
0px 7px 1px #777,
0px 8px 3px rgba(100, 100, 100, 0.4),
0px 9px 5px rgba(100, 100, 100, 0.1),
0px 10px 7px rgba(100, 100, 100, 0.15),
0px 11px 9px rgba(100, 100, 100, 0.2),
0px 12px 11px rgba(100, 100, 100, 0.25),
0px 13px 15px rgba(100, 100, 100, 0.3);

示例

评论

发表评论 取消回复

发表评论取消回复