【发布时间】：2013-08-06 14:35:21
【问题描述】：
随着Flat UI 出现一种新趋势，称为“长影”。
这是一个示例图片：
我真的很喜欢它，现在我想在我的网站上实现这样的效果。但是我不会做图片，我想用 CSS 来做！ （或 HTML5、jQuery 等）。
我已经找到了一个生成器 (Long Shadow Generator by Juani Ruiz Echazú)，但是生成的 CSS 看起来真的很尴尬。
例子：
.shape {
text-shadow: rgb(20, 144, 120) 1px 1px,
rgb(20, 144, 120) 2px 2px,
rgb(20, 144, 120) 3px 3px,
rgb(20, 144, 120) 4px 4px,
rgb(20, 144, 120) 5px 5px,
rgb(20, 144, 120) 6px 6px,
rgb(20, 144, 120) 7px 7px,
rgb(20, 144, 120) 8px 8px,
rgb(20, 144, 120) 9px 9px,
rgb(20, 144, 120) 10px 10px,
rgb(20, 144, 120) 11px 11px,
rgb(20, 144, 120) 12px 12px,
rgb(20, 145, 121) 13px 13px,
rgb(20, 146, 122) 14px 14px,
rgb(20, 147, 123) 15px 15px,
rgb(20, 148, 123) 16px 16px,
rgb(20, 149, 124) 17px 17px,
rgb(20, 150, 125) 18px 18px,
rgb(20, 151, 126) 19px 19px,
rgb(21, 152, 126) 20px 20px,
rgb(21, 153, 127) 21px 21px,
rgb(21, 154, 128) 22px 22px,
rgb(21, 155, 129) 23px 23px,
rgb(21, 156, 129) 24px 24px,
rgb(21, 157, 130) 25px 25px,
rgb(21, 158, 131) 26px 26px,
rgb(21, 159, 132) 27px 27px,
rgb(22, 160, 133) 28px 28px;
box-shadow: rgb(28, 37, 48) 1px 1px,
rgb(28, 37, 48) 2px 2px,
rgb(28, 37, 48) 3px 3px,
rgb(28, 37, 48) 4px 4px,
rgb(28, 37, 48) 5px 5px,
rgb(28, 37, 49) 6px 6px,
rgb(28, 37, 49) 7px 7px,
rgb(28, 38, 49) 8px 8px,
rgb(28, 38, 49) 9px 9px,
rgb(29, 38, 49) 10px 10px,
rgb(29, 38, 49) 11px 11px,
rgb(29, 38, 50) 12px 12px,
rgb(29, 38, 50) 13px 13px,
rgb(29, 38, 50) 14px 14px,
rgb(29, 39, 50) 15px 15px,
rgb(29, 39, 50) 16px 16px,
rgb(29, 39, 50) 17px 17px,
rgb(29, 39, 51) 18px 18px,
rgb(29, 39, 51) 19px 19px,
rgb(30, 39, 51) 20px 20px,
rgb(30, 39, 51) 21px 21px,
rgb(30, 39, 51) 22px 22px,
rgb(30, 40, 51) 23px 23px,
rgb(30, 40, 52) 24px 24px,
rgb(30, 40, 52) 25px 25px,
rgb(30, 40, 52) 26px 26px,
rgb(30, 40, 52) 27px 27px,
rgb(30, 40, 52) 28px 28px,
rgb(30, 40, 52) 29px 29px,
rgb(31, 41, 53) 30px 30px,
rgb(31, 41, 53) 31px 31px,
rgb(31, 41, 53) 32px 32px,
rgb(31, 41, 53) 33px 33px,
rgb(31, 41, 53) 34px 34px,
rgb(31, 41, 53) 35px 35px,
rgb(31, 41, 54) 36px 36px,
rgb(31, 41, 54) 37px 37px,
rgb(31, 42, 54) 38px 38px,
rgb(31, 42, 54) 39px 39px,
rgb(32, 42, 54) 40px 40px,
rgb(32, 42, 54) 41px 41px,
rgb(32, 42, 55) 42px 42px,
rgb(32, 42, 55) 43px 43px,
rgb(32, 42, 55) 44px 44px,
rgb(32, 43, 55) 45px 45px,
rgb(32, 43, 55) 46px 46px,
rgb(32, 43, 55) 47px 47px,
rgb(32, 43, 56) 48px 48px,
rgb(32, 43, 56) 49px 49px,
rgb(33, 43, 56) 50px 50px,
rgb(33, 43, 56) 51px 51px,
rgb(33, 43, 56) 52px 52px,
rgb(33, 44, 56) 53px 53px,
rgb(33, 44, 57) 54px 54px,
rgb(33, 44, 57) 55px 55px,
rgb(33, 44, 57) 56px 56px,
rgb(33, 44, 57) 57px 57px,
rgb(33, 44, 57) 58px 58px,
rgb(33, 44, 57) 59px 59px,
rgb(34, 45, 58) 60px 60px;
background-color: rgb(22, 160, 133);
height: 150px;
width: 150px;
font-size: 75px;
line-height: 150px;
text-align: center;
}
那么有没有一种更简单、更简洁、更好的方法来做到这一点而无需任何图形？
解释为什么我不使用任何图形
我喜欢有创意、不寻常和出色的动画。所以我认为，有了这个长长的阴影，真的很美。
我的脑海中有一个动画，我真的很想实现它：
我有一个像“Stackoverflow”这样的文字。我将此文本添加为 CSS-transition。当我悬停此文本时，它应该显示平滑的text-shadow。
The thought in a demo
容易的。但是这个长长的影子怎么会出现呢？那会很好。但是对于这个动画来说，这将是一个巨大的 CSS。不合理。
所以我问你们聪明的头脑。你知道任何简单的 CSS 技巧，或者有没有办法通过 JavaScript 或其他库来实现这一点？那我觉得有可能比我的小想法更惊人的效果......
【问题讨论】：
-
是的，我认为它会涉及许多 CSS 行，就像您给出的示例一样。我只是使用图形。
-
我认为像您的示例中那样使用更少的 CSS 行是不可能的。所以你可以使用这个丑陋的代码或图形。我认为没有其他解决方案...
-
对于简单的形状，您可以通过复制元素并使其倾斜来实现
-
@ChrisLTD：所以喜欢在 Photoshop 中做同样的事情 (awwwards.com/…)？嗯。不知道如何意识到这一点。
-
（删除了我的答案）zurb.com/playground/css-boxshadow-experiments 有一些演示动画
box-shadow。也许您可以将其用作text-shadow动画的灵感？