如何用CSS制作新的长影子趋势？

Question

有一个新的趋势,平面UI称为"长影".
这是一个示例图片:

信用

我真的很喜欢它,现在我希望在我的网站上有这样的效果.但我不会拍照,我想用CSS做!(或HTML5,jQuery等).

我已经找到了一个生成器(JuaniRuizEchazú的长影生成器),但生成的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.
在一个
简单的演示中的想法.但是这个长长的影子怎么会出现呢？这会很棒.但它只是这个动画的巨大CSS.不合理.

所以我问你聪明的头脑.你知道任何简单的CSS-Trick,或者有没有办法用JavaScript或其他图书馆实现这一点？然后我觉得有可能比我的小想法更令人惊叹的效果......

Answer 1

查看本教程,了解如何使用Sass:http://css-tricks.com/metafizzy-effect-with-sass/

并查看此CodePen的完整结果:http://codepen.io/hugo/pen/nwivF

上面的示例几乎是使用纯CSS执行此操作的唯一方法,虽然它确实看起来非常疯狂 - 它可以让您使用转换等调整这些文本阴影.

Answer 2

现在约1周后,我发现,目前还没有精益和可动画的解决方案.
但是当我忽略了我最重要的要求时,那里有不同的可能性.
所以我想对我发现的所有这些可能性进行一些概述.

CSS-只

庞大的文本阴影解决方案
第一个解决方案是我发布的示例代码.它非常笨重,但结果看起来与样本图片非常相似.但是,如果我想为这段代码制作动画,例如transition,它将是一个极其庞大的CSS代码.
结论

+ Very similar to the original effect on pictures
+ An only CSS way
+ Possible to generate CSS only animations
- Generate big bunch of CSS code
- Hard to create animations

工具和示例
生成唯一CSS方式的最佳工具之一是JuaniRuizEchazú的长影生成器.

使用rgba的庞大文本阴影解决方案
在Michael Mendelsohn的回答中,他建议使用rgba添加opacity来产生漂亮的淡出效果.它可以获得一小部分CSS,也可能更容易制作动画.但它不像图形那样产生类似的效果.
结论

+ An only CSS way
+ Possible to generate CSS only animations
+ Could be a slimmer CSS code than without rgba
+ Could be easier to generate animations
- Not similar to the original effect
- For a longer shadow, it will be again a lot of CSS

工具和示例请
阅读Michael Mendelsohn的答案.没有在互联网上找到任何示例/工具,也没有时间创建一个,因为对我的情况来说这不是一个可接受的解决方案.

使用SCSS的庞大文本阴影解决方案
为了减少第一个解决方案的LoC(代码行),Front End Guy建议使用SCSS.代码将更加纤薄,但看起来很笨拙,而且更难理解.但是这个更纤薄的代码仍然会非常大. 结论

+ Very similar to the original effect
+ An only CSS way
+ Possible to generate CSS only animation
+ Slimmer CSS than without SCSS...
- ... but it will be remain a bulky CSS
- Not everybody is familiar with SCSS so the code is going to be incomprehensible
- Hard to create animations

工具和示例
有一个Codepen示例向您展示如何使用SCSS在不同对象(图标,字体等)上创建长阴影效果

JavaScript的只

用JavaScript生成CSS只有用户
1724911的答案描述了一种用JavaScript生成CSS的方法.在后台,它再次制作了这一大堆代码,但JavaScript代码比"硬编码"CSS要薄得多.动画也可以用同样的方式(看一下user1724911的答案).
结论

+ Very similar to the original effect
+ To develop code is a lot slimmer
+ Animations are easy and lean to create
- In the background, there is this big bulky CSS code
- performance

工具和示例
查看user1724911的答案,以查看动画的代码.我创造了一个小例子.只需1个HTML标签和少量JavaScript线.Codepen示例

jQuery插件
我发现了一个用于Long-Shadow 的小型jQuery插件.它非常易于使用,但会产生(在我看来)丑陋的阴影效果.
结论

+ Extreme easy-to-use
- Very ugly effect

工具和示例
我在这里找到了这个插件.

图形和JavaScript

极客的问题
有一个网站有一个真正令人惊叹和美妙的长影效果.该网站名为We Are Impero.所以我问了Impero团队,他们是如何产生这种奇妙效果的.如果用过库或什么的.这是他们的答案:

它都是定制设计和建造的.没有框架可以工作,这是一项非常艰巨的任务!

所以它是自制的图形和JavaScript.
结论

+ Most wonderful long-shadow effect i've ever seen
- Self made. And it was a hard work.
- Graphic, CSS & JavaScript are required

工具和示例
只是享受我们是Impero的网站.

图形只

Photoshop工作
因此,还有一种方法可以将此效果创建为图像.这是最简单的方式,它是"原创".但遗憾的是没有动画......或者,当我将照片悬停在画面上时,我会创建一个带有动画的gif并显示它？不是真的:-)
结论

+ The "original" effect
+ most adaptable
- Not animatable

工具和示例
在网络中,有一些长阴影例子.只是谷歌吧.Awwwards撰写了一篇关于如何在Photoshop中创建这种长阴影效果的精彩文章.

所以,感谢大家对你的答案,创意,灵感和参数.我会给他们,我在答案中链接了一个upvote,因为没有你,我只会有一个解决方案.
也许在将来,有可能更容易创造这样的事情.

干杯dTDesign

Answer 3

这是我的代码,我在我的网站上使用它:

.longShadow{
    color:#fff;
    text-shadow:
    1px 1px rgba(0,0,0,0.01),
    2px 2px rgba(0,0,0,0.03),
    3px 3px rgba(0,0,0,0.025),
    4px 4px rgba(0,0,0,0.02),
    5px 5px rgba(0,0,0,0.015),
    6px 6px rgba(0,0,0,0.01),
    7px 7px rgba(0,0,0,0.01),
    8px 8px rgba(0,0,0,0.01),
    9px 9px rgba(0,0,0,0.01),
    10px 10px rgba(0,0,0,0.01),
    11px 11px rgba(0,0,0,0.01),
    12px 12px rgba(0,0,0,0.01),
    13px 13px rgba(0,0,0,0.01),
    14px 14px rgba(0,0,0,0.01),
    15px 15px rgba(0,0,0,0.01),
    16px 16px rgba(0,0,0,0.01),
    17px 17px rgba(0,0,0,0.01),
    18px 18px rgba(0,0,0,0.01),
    19px 19px rgba(0,0,0,0.01),
    20px 20px rgba(0,0,0,0.01),
    21px 21px rgba(0,0,0,0.01),
    22px 22px rgba(0,0,0,0.01),
    23px 23px rgba(0,0,0,0.01);
}