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

时间：2013-08-06 14:35:22

标签： css css3 shadow

有一个新的趋势，Flat UI被称为“长影” 这是一个示例图片：

by Luky Vj Credit

我非常喜欢它，现在我希望在我的网站上有这样的效果。但我不会拍照，我想用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-Trick，或者有没有办法用JavaScript或其他图书馆实现这一点？然后我觉得有可能比我的小想法更令人惊叹的效果......

11 个答案:

答案 0 :(得分：13)

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

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

上面的示例几乎是使用纯CSS实现它的唯一方法，虽然看起来确实非常疯狂 - 它会让你使用转换等来调整这些文本阴影。

答案 1 :(得分：10)

现在约1个星期后，我看到，并没有一个精益的＆amp;此时的可动画解决方案 但是当我忽略了我最重要的要求时，那里有不同的可能性 所以我想对我发现的所有这些可能性进行一些概述。

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

工具＆amp;实例
生成唯一CSS方式的最佳工具之一是Long Shadow Generator by Juani Ruiz Echazú。

使用rgba 的庞大文字阴影解决方案
在Michael Mendelsohn＆＃39; 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

工具＆amp;实例
请阅读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

工具＆amp;实例
有一个Codepen Example向您展示如何使用SCSS在不同对象（图标，字体等）上创建长阴影效果

JavaScript的仅

仅使用JavaScript生成CSS
user1724911＆＃39; s answer描述了使用JavaScript生成CSS的方法。在后台，它再次制作了大量的代码，但JavaScript代码比#c;硬编码的代码要轻薄得多。 CSS。动画也可以用同样的方式（看看用户1724911的回答） 结论 

+ 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

工具＆amp;实例
请查看user1724911的答案，以查看动画的代码。我创造了一个小例子。只需1个HTML标签和少量JavaScript线。 Codepen Example

jQuery插件
我发现Long-Shadow也有一个小jQuery Plugin。它非常易于使用，但会产生（在我看来）一种丑陋的阴影效果 结论 

+ Extreme easy-to-use
- Very ugly effect

工具＆amp;实施例
我找到了这个插件here。

图形＆amp;的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

工具＆amp;实例
只需享受We are Impero的网站。

图形仅

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

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

工具＆amp;实例
在网络上，有很多长影的例子。只是谷歌吧。 Awwwards撰写了一篇很酷的文章，介绍如何在Photoshop中创建这种长阴影效果。

所以谢谢大家，感谢您的答案，想法，灵感和争论。我会给他们，我在答案中将他们联系起来，因为没有你，我只会有一个解决方案。
也许在将来，有可能更容易创造这样的事情。

干杯dTDesign

答案 2 :(得分：7)

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

.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 6px rgba(0,0,0,0.01),
    8px 8px rgba(0,0,0,0.01),
    9px 8px 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);
}

答案 3 :(得分：2)

您可以通过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个平面）......只要记住这一点。

答案 4 :(得分：2)

我建议采用不同的方法。您不会绕过多个文本阴影，但尝试使用rgba（0,0,0，val），其中val是介于.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)

您可以使用您想要的任何距离以及多次迭代。只是一个建议。

答案 5 :(得分：1)

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

  • 的 1。仅限CSS（尚不好）

我尝试使用：before和：after使用透明背景而不是此图像，但就目前来说，还不是很好。

你可以在这里看到自己，我有一个阴影正确部分的小虫子

enter image description here

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

我还在努力，但如果有人有时间，欢迎你提供帮助。

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

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

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

我仍在试图弄清楚如何使其自动调整为div / a的内容。目前，有一些神奇的数字可以满足所需的尺寸。

Long shadows with CSS and PNG image

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

答案 6 :(得分：1)

如果你使用LESSCSS这个mixin将使用mixin做平坦的长阴影。

https://github.com/zensimilia/less-long-shadow

我在我的网站上使用它并且它工作得很好

答案 7 :(得分：0)

如果你看一下你的信用图片，那将是很多CSS：http://cssdeck.com/labs/google-fonts-css-longshade-icon 

/* Google Font flat longshade Icon in pure css
   Create with love by @LukyVj 
   Inspired by so much people an works over the internet.
*/

@import url(http://fonts.googleapis.com/css?family=Marck+Script);
body {
    -webkit-font-smoothing: antialiased;
    background: #333;
    overflow: hidden;
}
.container {
    width: 245px;
    margin: 180px auto;
}
div.icon {
    /*transform*/
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    float: left;
    width: 245px;
    height: 245px;
    margin: 5px;
    display: block;
    background: rgb(150, 150, 150);
    font-family: "Marck Script",  sans-serif;
    text-align:center;
    font-size: 13em;
    font-weight: 500;
    line-height:.75;
    border-radius:15px;
    overflow:hidden;
}

div.icon:after {
    top: 0px;
    color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding-top: 54.05px;
    box-sizing: border-box;
    /*box-shadow*/
    -webkit-box-shadow: 1px 1px 0px #000 ;
    -moz-box-shadow:1px 1px 0px #000 ;
    box-shadow:1px 1px 0px #000 ;
}
/*The shadow of the squares */
.icon:before {
    content: '';
    display: block;
    float: left;
    width: 136%;
    height: 136%;
    position: absolute;
    margin: 29%;
    /*transform*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    /*linear-gradient*/
    background: -webkit-gradient(linear,60.06% 107.04%,39.94% -7.04%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: -moz-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: -o-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
}

.gf:after {
   -webkit-font-smoothing: antialiased;
    content: "F";
    background: #dd473d;
    text-shadow: 1px 1px 0 rgba(0,0,0,.15),138px 138px 0px #a83027, 137px 137px 0px #a83027, 136px 136px 0px #a83027,135px 135px 0px #a83027, 134px 134px 0px #a83027, 133px 133px 0px #a83027,132px 132px 0px #a83027, 131px 131px 0px #a83027, 130px 130px 0px #a83027, 129px 129px 0px #a83027, 128px 127px 0px #a83027, 126px 126px 0px #a83027,125px 125px 0px #a83027, 124px 124px 0px #a83027, 123px 123px 0px #a83027,122px 122px 0px #a83027, 121px 121px 0px #a83027, 120px 120px 0px #a83027, 119px 118px 0px #a83027, 117px 116px 0px #a83027, 115px 114px 0px #a83027,113px 113px 0px #a83027, 112px 112px 0px #a83027, 111px 111px 0px #a83027, 110px 110px 0px #a83027, 109px 109px 0px #a83027, 108px 108px 0px #a83027, 107px 107px 0px #a83027, 106px 106px 0px #a83027, 105px 105px 0px #a83027, 104px 104px 0px #a83027, 103px 103px 0px #a83027, 102px 102px 0px #a83027, 101px 101px 0px #a83027, 100px 100px 0px #a83027, 99px 99px 0px #a83027, 98px 98px 0px #a83027, 97px 97px 0px #a83027, 96px 96px 0px #a83027, 95px 95px 0px #a83027, 94px 94px 0px #a83027, 93px 93px 0px #a83027, 92px 92px 0px #a83027, 91px 91px 0px #a83027, 90px 90px 0px #a83027, 80px 80px 0px #a83027, 79px 79px 0px #a83027, 78px 78px 0px #a83027, 77px 77px 0px #a83027, 76px 76px 0px #a83027, 75px 75px 0px #a83027, 74px 74px 0px #a83027, 73px 73px 0px #a83027, 72px 72px 0px #a83027, 71px 71px 0px #a83027, 70px 70px 0px #a83027, 69px 69px 0px #a83027, 68px 68px 0px #a83027, 67px 67px 0px #a83027, 66px 66px 0px #a83027, 65px 65px 0px #a83027,64px 64px 0px #a83027, 63px 63px 0px #a83027, 62px 62px 0px #a83027, 61px 61px 0px #a83027, 60px 60px 0px #a83027, 59px 59px 0px #a83027, 58px 58px 0px #a83027, 57px 57px 0px #a83027, 56px 56px 0px #a83027, 55px 55px 0px #a83027, 54px 54px 0px #a83027, 53px 53px 0px #a83027, 52px 52px 0px #a83027, 51px 51px 0px #a83027, 50px 50px 0px #a83027, 49px 49px 0px #a83027, 48px 48px 0px #a83027, 47px 47px 0px #a83027, 46px 46px 0px #a83027, 45px 45px 0px #a83027, 44px 44px 0px #a83027, 43px 43px 0px #a83027, 42px 42px 0px #a83027, 41px 41px 0px #a83027, 40px 40px 0px #a83027, 39px 39px 0px #a83027, 38px 38px 0px #a83027, 37px 37px 0px #a83027, 36px 36px 0px #a83027, 35px 35px 0px #a83027, 34px 34px 0px #a83027, 33px 33px 0px #a83027,32px 32px 0px #a83027, 31px 31px 0px #a83027, 30px 30px 0px #a83027, 29px 29px 0px #a83027, 28px 28px 0px #a83027, 27px 27px 0px #a83027, 26px 26px 0px #a83027, 25px 25px 0px #a83027, 24px 24px 0px #a83027, 23px 23px 0px #a83027, 22px 22px 0px #a83027, 21px 21px 0px #a83027, 20px 20px 0px #a83027, 19px 19px 0px #a83027, 18px 18px 0px #a83027, 17px 17px 0px #a83027, 16px 16px 0px #a83027, 15px 15px 0px #a83027, 14px 14px 0px #a83027, 13px 13px 0px #a83027, 12px 12px 0px #a83027, 11px 11px 0px #a83027, 10px 10px 0px #a83027, 9px 9px 0px #a83027, 8px 8px 0px #a83027, 7px 7px 0px #a83027, 6px 6px 0px #a83027, 5px 5px 0px #a83027, 4px 4px 0px #a83027, 3px 3px 0px #a83027, 2px 2px 0px #a83027, 1px 1px 0px #a83027, 15px 1px 0px #a83027,16px 2px 0px #a83027,17px 3px 0px #a83027,18px 4px 0px #a83027,19px 5px 0px #a83027,20px 6px 0px #a83027,21px 7px 0px #a83027,22px 8px 0px #a83027,
23px 9px 0px #a83027,
24px 10px 0px #a83027,
25px 11px 0px #a83027,
26px 12px 0px #a83027,
27px 13px 0px #a83027,
28px 14px 0px #a83027,
29px 15px 0px #a83027,
30px 16px 0px #a83027 , 
31px 17px 0px #a83027,
32px 18px 0px #a83027,
33px 19px 0px #a83027,
34px 20px 0px #a83027,
35px 21px 0px #a83027,
36px 22px 0px #a83027,
37px 23px 0px #a83027,
38px 24px 0px #a83027,
39px 25px 0px #a83027,
40px 26px 0px #a83027,
41px 27px 0px #a83027,
42px 28px 0px #a83027,
43px 29px 0px #a83027,
44px 30px 0px #a83027,
45px 31px 0px #a83027,
46px 32px 0px #a83027;
}

答案 8 :(得分：0)

我在想的是使用长阴影的另一种方法是使用颜色做出反应（使用颜色选择器进行阴影谷歌） 然后将其与图像对齐。它必须解决您的问题。 看到这个钻石

#diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
         }
#diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
           }

答案 9 :(得分：0)

最好的方法是使用jquery flat shadow。

https://github.com/peachananr/flat-shadow

用法

要在您的网站上使用此功能，只需将此处找到的最新jQuery库与jquery.flatshadow.js一起包含在您的文档中，然后按html标记和函数调用进行操作，如下所示：

<div class="flat-icon"> FLAT </div>
<div class="flat-icon"> UI </div>

... 

$(".flat-icon").flatshadow({
  color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned)
  angle: "SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned)
  fade: true, // Gradient shadow effect
  boxShadow: "#d7cfb9" // Color of the Container's shadow
});

进一步定制

使用jquery.flatshadow.js，您可以通过简单地向标记添加数据颜色和数据角度来应用具有不同效果的每个元素，如下所示：

<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>

并删除颜色和角度全局选项，如下所示：

$(".flat-icon").flatshadow({
  fade: true,
  boxShadow: "#d7cfb9"
});

现在，每个单独的元素都有自己的效果，而无需多次调用该函数。

答案 10 :(得分：0)

老话题，但仍然通过在“如何在 css 中制作长阴影”的索引搜索中获得关注。

我使用更现代的 CSS（剪辑路径）解决元素长阴影的 2 行代码解决方法，以避免我以前在这里使用的 50 多行代码混乱——我发现它会降低我的浏览器的速度。

您可以按比例调整阴影/元素的大小，它应该仍然有效，但对于 300 像素的方形 div 并使用 31 像素的框阴影：

  -webkit-box-shadow: 31px 31px 0px 31px rgb(38,64,100); 
  box-shadow: 31px 31px 0px 31px rgb(38,64,100);

  -webkit-clip-path: polygon(300px 0, 331px 31px, 331px 331px, 31px 331px, 0 300px, 0 0);
  clip-path: polygon(300px 0, 331px 31px, 331px 331px, 31px 331px, 0 300px, 0 0);

我的工作示例 here

好的clip path generator（请记住，您需要使元素小于 6 点剪切路径，因为框阴影不计入元素尺寸）

相关问题
最新问题