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

Question

[与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或其他库来实现？然后我认为比我的小想法还有更多令人惊叹的效果...

Answer 1

查看有关如何使用Sass进行操作的本教程：http://css-tricks.com/metafizzy-effect-with-sass/

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

您的示例几乎是使用纯CSS的唯一方法，尽管它看起来确实很疯狂-它将使您能够使用过渡等来调整那些文本阴影。

Answer 2

0
投票

最好的方法是使用jQuery平面阴影。

Answer 3

现在我可以看到〜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方式的最佳工具之一是Long Shadow Generator by Juani Ruiz Echazú。

带有rgba的大文本阴影解决方案他建议在Michael Mendelsohn的answer中使用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 Example显示了如何在不同对象（图标，字体等）上使用SCSS创建长阴影效果。

仅JavaScript

仅使用JavaScript生成CSSuser1724911的answer描述了一种使用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 Example

jQuery插件我还为Long-Shadow找到了一个小jQuery Plugin。它非常易于使用，但是（在我看来）会产生难看的阴影效果。结论

+ Extreme easy-to-use
- Very ugly effect

工具和示例我找到了此插件here。

图形和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

工具和示例只需访问We are Impero的网站。

仅图形

Photoshop作品因此，还有一种方法可以将该效果创建为图像。这是最简单的方法，也是“原始的”。但是令人遗憾的是无法动画处理……或者，当我将图片悬停时，我会用动画创建一个gif并将其显示出来？并不是的：-）结论

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

工具和示例在网络上，有很多关于Long-Shadow的例子。只是谷歌它。 Awwwards撰写了一篇很酷的文章，介绍了如何在Photoshop中创建这种长阴影效果。

所以谢谢大家为您提供答案，想法，灵感和论据。我会给他们一个答案，因为在没有您的情况下，我只会提供1个解决方案。也许将来，将有可能更轻松地创建此类事物。

干杯dTDesign

Answer 4

这是我的代码，我在我的网站上使用它：

.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);
}

Answer 5

您可以通过javascript生成文本的阴影平面。看看这个：

<html>
 <head>
  <style>
   body { // in this example I used 'body' as animated content
    font-weight: bold;
    font-size: 65px;
    color:rgb(155,155,155);
    transition: text-shadow 0.5s linear;
    -moz-transition: text-shadow 0.5s linear;
    -webkit-transition: text-shadow 0.5s linear;
    -o-transition: text-shadow 0.5s linear;
    text-shadow: 1px 1px 0px rgba(0,0,0,1);
   }
  </style>
  <script> // here we can add some styles, generated by js.
   var text_shadow = '';
   for(var p = 0; p < 100; p++)
   {
    text_shadow += (text_shadow? ', ' : '') + 2*p + 'px '+ 2*p +'px 1px rgba(0,0,0,' + 1/(p+1) + ')';
   }
   document.head.innerHTML += "<style> body:hover { text-shadow: " + text_shadow + ";  } </style>";
  </script>
 </head>
 <body>Stackoverflow</body>
</html>

但是像这样的代码，对于速度较慢的CPU来说很难（某些文本需要100平面）。请记住这一点。

Answer 6

我建议使用其他方法。您不会避开具有多个文本阴影，而是尝试使用rgba（0,0,0，val）代替，其中val是介于0.5和0之间的数字。那么，您可能不需要太多的迭代。

尝试一下：

text-shadow: 1px 1px 1px rgba(0,0,0,.5),2px 2px 1px rgba(0,0,0,.4),3px 3px 1px rgba(0,0,0,.3),4px 4px 1px rgba(0,0,0,.2),5px 5px 1px rgba(0,0,0,0.1)

您可以使用任何所需的距离，但是可以使用许多迭代。只是一个建议。

Answer 7

[我给你我的尝试，第一个仅使用CSS，另一个则使用CSS和自定义背景PNG图像。

1。仅CSS（尚不完善）

我曾尝试使用：before和：after具有透明背景而不是此图像，但目前还不够好。

您可以在这里自己看到，阴影的右侧有一个小bug

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9QZXBqNy5wbmcifQ==” alt =“在此处输入图像描述”>

http://codepen.io/gfra/pen/KtoDB

我仍在努力，但如果有人在这里有时间，欢迎您提供帮助。

2 CSS和PNG图像（看起来不错）

[我知道使用图像不是最有效的解决方案，它是否向页面加载中添加了一个http请求，但是我有CDN来交付图像，所以这不是我网站上的性能问题。

我发现结果远非完美，但如果您关心性能问题，那将是相当不错的。我使用此方法是因为我有很多长长的阴影要添加到我的页面中，并且我不希望jquery在页面加载时工作太多。

我仍在尝试找出如何使其自动调整为div / a内容的方式。目前，有一些魔术数字可以满足所需的尺寸。

“带有CSS和PNG图像的长阴影” >>

http://codepen.io/gfra/pen/DLzxC

Answer 8

如果您使用LESSCSS，则此混合将使用混合来生成平坦的长阴影。

Answer 9

[如果您查看自己的信用图片，它将使用很多CSS：http://cssdeck.com/labs/google-fonts-css-longshade-icon

Answer 10

我在想的是，使用长阴影的另一种方法是使带有颜色的反角（使用颜色选择器获取阴影google）然后将其与图像对齐。它必须解决您的问题。看到这个钻石

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

问题描述投票：34回答：10

说明为什么我不使用任何图形

10个回答

仅限CSS

仅JavaScript

图形和JavaScript

仅图形

最新问题

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

问题描述 投票：34回答：10

说明为什么我不使用任何图形

10个回答

仅限CSS

仅JavaScript

图形和JavaScript

仅图形

最新问题

问题描述投票：34回答：10