3D 文字塔

您是否看过 David Desandro 的网站？它非常漂亮。他的页脚尤其有趣。

这项技术在其简洁性上非常巧妙。让我们来看一看。

多重文本阴影

这里主要的赋能概念是 CSS3 属性text-shadow。通常是这样的

.shadow {
   text-shadow: 2px 2px 4px #000;
}

这四个属性是

[X 偏移] [Y 偏移] [模糊大小] [颜色]

请注意，没有供应商前缀，这很好（相关：关于供应商前缀的讨论）。您还可以对同一文本应用多个阴影。

.shadow {
   text-shadow: 1px 1px 0 black, 
                2px 2px 0 black;
}

多个阴影可以通过使用逗号分隔的列表来实现。在上面的代码中，有两个阴影，一个在两个轴上偏移 1px 且没有模糊，第二个在两个轴上偏移 2px 且没有模糊。

明白诀窍了吗？我们可以应用多个阴影，每个阴影彼此偏移 1px，以在其下方构建“塔”样式的阴影。默认情况下，这会在文本下方应用越来越深的阴影，但我们可以通过让阴影仅在悬停时出现并将文本向上和向左移动与阴影相同的深度来使其“弹出”。

.shadow { 
   color: white; 
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902;
}
.shadow:hover {
   position: relative; 
   top: -3px; 
   left: -3px; 
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902, 
                4px 4px #fe4902, 
                5px 5px #fe4902, 
                6px 6px #fe4902;
}

过渡

按照上述代码的现状，悬停将立即弹出“塔”。但是我们可以让它“向上生长”，因为大多数现代浏览器现在都支持过渡（即从一种外观状态到另一种外观状态的动画）。这次我们没有那么幸运地避免供应商前缀。有三个需要覆盖。

.shadow { 
   color: white; 
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902;
   -webkit-transition: all 0.12s ease-out;
   -moz-transition:    all 0.12s ease-out;
   -ms-transition:     all 0.12s ease-out;
   -o-transition:      all 0.12s ease-out;
}
.shadow:hover {
   position: relative; 
   top: -3px; 
   left: -3px; 
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902, 
                4px 4px #fe4902, 
                5px 5px #fe4902, 
                6px 6px #fe4902;
}

注意：请参阅 CanIUse.com 以了解 CSS 过渡的浏览器支持情况。

缩放乐趣

页脚的中间部分具有不同的简洁效果。当您将鼠标悬停在不同的行上时，它们会变大。这是另一种 CSS3 效果：transform。同样也存在供应商前缀。

div:hover { 
   -webkit-transform: scale(1.1); 
   -moz-transform:    scale(1.1);
   -ms-transform:     scale(1.1); 
   -o-transform:      scale(1.1); 
   text-shadow: 3px 3px 0 #333; 
}

回退

那么在 Internet Explorer 中会发生什么？文本阴影不起作用，但定位会起作用。

演示和下载

查看演示   下载文件

如果您计划在某个地方使用它，请从这个想法和技术中获得灵感，而不要仅仅抄袭 David 的页脚。