如何用 CSS 打造新的长影趋势？

Question

提问by Michael Schmidt

Out there is a new trend along with Flat UIcalled "long shadow".
This is an example picture:

有一种新趋势与扁平 UI 一起称为“长影”。
这是一个示例图片：

I really like it and now I want an effect like that on my site. But I won't make a picture, I want to do it in CSS! (Or HTML5, jQuery etc).

我真的很喜欢它，现在我想在我的网站上有这样的效果。但是我不会做图片，我想用CSS来做！（或 HTML5、jQuery 等）。

I already found a generator for that (Long Shadow Generator by Juani Ruiz Echazú), but the generated CSS looks really really awkward.

我已经为此找到了一个生成器（Juani Ruiz Echazú 的 Long Shadow Generator），但是生成的 CSS 看起来真的很尴尬。

Example:

例子：

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

So is there a easier, cleaner and better way to do this without need of any graphic?

那么有没有一种更简单、更干净、更好的方法来做到这一点，而无需任何图形？

Explanation why I won't use any graphics

解释为什么我不会使用任何图形

I love creative, unusual and outstanding animations. So I think, with this long shadows are really beautiful things possible.

我喜欢有创意、不寻常和出色的动画。所以我认为，有了这个长长的影子，真的很美。

I've an animation in my mind, which I really want to realize:
I have a text like "Stackoverflow". I add this text a CSS-transition. When I hover this text, it should display a smooth text-shadow.
The thought in a demo
Easy one. But how's about this long shadow would appear? It would be great. But it's going to be a huge CSS for just this animation. Unreasonable.

我脑子里有一个动画，我真的很想意识到：
我有一个像“Stackoverflow”这样的文本。我将此文本添加到 CSS- transition。当我悬停此文本时，它应该显示平滑的text-shadow.
演示中的想法
Easy one。但是这个长长的影子怎么会出现呢？那会很好。但是对于这个动画来说，它将会是一个巨大的 CSS。不合理。

So I ask You smart heads out there. You know any easy CSS-Trick, or is there maybe a way to realize this with JavaScript or other librarys? Then I think there are more stunning effects possible than my little thought...

所以我问你那里的聪明人。你知道任何简单的 CSS-Trick，或者有没有办法用 JavaScript 或其他库来实现这一点？然后我认为可能有比我的小想法更多的惊人效果......

Answer 1

采纳答案by Lost Left Stack

Check out this tutorial on how to do that with Sass: http://css-tricks.com/metafizzy-effect-with-sass/

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

and take a look at this CodePen with the full result: http://codepen.io/hugo/pen/nwivF

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

Your example above is pretty much the only way to do it with pure CSS, and while it does look pretty crazy - it will let you adjust those text-shadows using transitions and such.

您上面的示例几乎是使用纯 CSS 完成此操作的唯一方法，虽然它看起来确实很疯狂 - 它可以让您使用过渡等来调整这些文本阴影。

Answer 2

回答by Michael Schmidt

Now after ~1 week I see, there isn't a lean & animateable solution at this time.
But when I ignore my most important requirements, there are different possibilities out there.
So I want to create a little overview over all these possibilities I found.

现在大约 1 周后我看到，此时没有精益和可动画的解决方案。
但是当我忽略我最重要的要求时，就会有不同的可能性。
所以我想对我发现的所有这些可能性做一个概述。

CSS-only

仅 CSS

Bulky text-shadow solution
The first solution is my example code I posted. It is extreme bulky, but the result looks really similar to the sample picture. But if I want to animate this code, e.g with transition, it's going to be a extremly big CSS-code.
Conclusion

大容量文本阴影解决方案
第一个解决方案是我发布的示例代码。它非常笨重，但结果看起来与示例图片非常相似。但是，如果我想为这段代码添加动画，例如使用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

Tools & Examples
One of the best tools to generate an only CSS way is the Long Shadow Generator by Juani Ruiz Echazú.

工具与示例
生成唯一 CSS 方式的最佳工具之一是Juani Ruiz Echazú的Long Shadow Generator。

Bulky text-shadow solution with rgba
In Michael Mendelsohn's answerhe suggest to use rgbato add opacityto generate a pretty fade-out effect. It can get a smaller bunch of CSS which maybe also be easier to animate. But it doesn't generate this similar effect like on the graphics.
Conclusion

使用 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

Tools & Examples
Just read the answer by Michael Mendelsohn. Didn't found any example / tool in the internet and hadn't time to create one, because it isn't an acceptable solution for my case.

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

Bulky text-shadow solution with SCSS
To reduce the LoC (Lines of Code) for the first solution, Front End Guysuggest to use SCSS. The code will be slimmer but looks akward and is harder to understand. But also this slimmer code is and will remain very big. Conclusion

使用 SCSS 的大容量文本阴影解决方案
为了减少第一个解决方案的 LoC（代码行），前端专家建议使用 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

Tools & Examples
There is a Codepen Examplewhich shows you, how to create a long-shadow effect with SCSS on different objects (Icons, Fonts, etc.)

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

JavaScript-only

仅 JavaScript

Generate the CSS with JavaScript only
user1724911's answerdescribes a way to generate the CSS with JavaScript. In the background, it makes again this big bunch of code, but the JavaScript code is a lot slimmer than the "hardcoded" CSS. Animations are also possible in the same way (take a look at user1724911's answer).
Conclusion

仅使用 JavaScript 生成 CSS
user1724911的回答描述了一种使用 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

Tools & Examples
Look at the answer by user1724911 to see also the code for the animation. I created a little example. Just with 1 HTML-Tag and little Lines of JavaScript. Codepen Example

工具和示例
查看 user1724911 的答案，还可以查看动画代码。我创建了一个小例子。只需 1 个 HTML 标签和几行 JavaScript。代码笔示例

jQuery Plug-In
I found also a small jQuery Pluginfor Long-Shadow. It is extremly easy-to-use, but generates (in my opinion) an ugly shadow effect.
Conclusion

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

+ Extreme easy-to-use
- Very ugly effect

Tools & Example
I found this Plugin here.

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

Graphic & JavaScript

图形和 JavaScript

Issue for geeks
There is a site which have a really really stunning and wonderful Long-Shadow effect. The Site called We Are Impero. So I asked the Impero team, how they generate this wonderful effect. If the used a library or something. This was their answer:

极客问题
有一个网站有一个非常令人惊叹和美妙的长影效果。该网站名为We Are Impero。所以我问了 Impero 团队，他们是如何产生这种奇妙的效果的。如果使用了图书馆什么的。这是他们的回答：

It's all custom designed and built. No framework to work on, it was a very difficult mission!

这都是定制设计和建造的。没有框架可以工作，这是一项非常艰巨的任务！

So it is self-made with graphics and JavaScript.
Conclusion

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

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

Tools & Examples
Just enjoy We are Impero's website.

工具和示例
尽情享受我们是 Impero的网站。

Graphic-only

纯图形

Photoshop work
So there is also the way to create this effect as an image. It is the easiest way, and it is the "original". But sadly not animatable... Or maybe, when I hover the picture, I create a gif with the animation and will show it? Not really :-)
Conclusion

Photoshop 工作
所以也有方法可以将这种效果创建为图像。这是最简单的方法，也是“原创”。但遗憾的是不能设置动画......或者，当我将图片悬停时，我会创建一个带有动画的 gif 并显示它？不是真的:-)
结论

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

Tools & Examples
In the web, there are hunderts of Long-Shadow examples. Just google it. Awwwardsmade a cool article about how to create this long-shadow effect in Photoshop.

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

So thank you allfor your answers, ideas, inspirations and arguments. I'll give them, who I linked in my answer an upvote, because without you, I would just have 1 solution.
Maybe in the future, there it will be possible to create such things easier.

所以感谢大家的回答、想法、灵感和争论。我会给他们，我在我的回答中链接的人一个赞成票，因为没有你，我只有 1 个解决方案。
也许在未来，有可能更容易地创造这样的东西。

Cheers dTDesign

干杯 dTDesign

Answer 3

回答by Zuhair Taha

this is my code, I'm using it at my sites:

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

.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 4

回答by Victor.Palyvoda

You can generate shadow planes of your text via javascript. Just take a look at this:

您可以通过 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>

But code, like this one, is hard for slow CPUs (100 planes for some text)... Just keep this in your mind.

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

Answer 5

回答by itsmikem

I'd suggest a different approach. You're not going to get around having multiple text-shadows, but try using rgba(0,0,0,val) instead, where val is a number between say .5 and 0. Then, you may not need so many iterations.

我建议采用不同的方法。您不会绕过多个文本阴影，而是尝试使用 rgba(0,0,0,val) 代替，其中 val 是介于 0.5 和 0 之间的数字。然后，您可能不需要这么多迭代.

Try this:

尝试这个：

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)

You can use whatever distances you want and however many iterations. Just a suggestion.

你可以使用任何你想要的距离和迭代次数。只是一个建议。

Answer 6

回答by Gfra54

I give you my attempts, the first one using only CSS, anec the other one using CSS and a custom background PNG image.

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

1. CSS Only (Not good yet)

1. CSS Only (还不好)

I tried using :before and :after with transparent background instead of this image but for now, it is not good enought yet.

我尝试使用 :before 和 :after 透明背景而不是这张图片，但现在，它还不够好。

You can see for yourself here, I got a little bug with the right part of the shadow

你可以在这里亲眼看看，我在阴影的正确部分发现了一个小错误

enter image description here

在此处输入图片说明

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

I'm still working on it but if someone here has the time, you're welcome to help.

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

2 CSS and PNG Image (looks good)

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

I know that using an image is not the most efficient solution, has it adds one http request to the page load but I have a CDN to deliver my images so this is not a perforamnce issue on my website.

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

I find the result far from perfect but quite good if you care for the performance issue. I used this method because I have a lot of long shadows to add to my page and I don't want jquery to work too much at page load.

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

I'm still trying to figure out how to make it auto adjustable to the content of the div/a. For now, there are some magic numbers to fit the required dimensions.

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

Long shadows with CSS and PNG image

带有 CSS 和 PNG 图像的长阴影

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

Answer 7

回答by amitgur

If your using LESSCSS this mixin will do the flat long shadows using mixin.

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

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

I'm using it in my site and it's working great

我在我的网站上使用它，它运行良好

Answer 8

回答by pabloRN

The best way is using jquery flat shadow.

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

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

Usage

用法

To use this on your website, simply include the latest jQuery library found here together with jquery.flatshadow.js into your document's , follow by the html markup and a function call as follows:

要在您的网站上使用它，只需将此处找到的最新 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
});

Further Customization

进一步定制

With jquery.flatshadow.js, you can apply each individual elements with different effect by simply add a data-color and data-angle to your mark up as follows:

使用 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>

and remove the color and angle global options as seen here:

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

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

Now, each individual element will have its own effect without you calling the function multiple times.

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

Answer 9

回答by user2681033

What i am thinking is The alternate way to use long shadow is make a reactangle with with colour(use colour picker for shadows google) Then align it with the image .Its gotta solve your problem. see this for a diamond

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

#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;
           }

Answer 10

回答by o_O

If you look at your credit image, it's going to be a lot of CSS: http://cssdeck.com/labs/google-fonts-css-longshade-icon

如果您查看您的信用图片，将会有很多 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;
}

如何用 CSS 打造新的长影趋势？

提问by Michael Schmidt

Explanation why I won't use any graphics

解释为什么我不会使用任何图形

采纳答案by Lost Left Stack

回答by Michael Schmidt

CSS-only

仅 CSS

JavaScript-only

仅 JavaScript

Graphic & JavaScript

图形和 JavaScript

Graphic-only

纯图形

回答by Zuhair Taha

回答by Victor.Palyvoda

回答by itsmikem

回答by Gfra54

回答by amitgur

回答by pabloRN

回答by user2681033

回答by o_O

相关推荐

最近更新

标签

如何用 CSS 打造新的长影趋势？

提问by Michael Schmidt

Explanation why I won't use any graphics

解释为什么我不会使用任何图形

采纳答案by Lost Left Stack

回答by Michael Schmidt

CSS-only

仅 CSS

JavaScript-only

仅 JavaScript

Graphic & JavaScript

图形和 JavaScript

Graphic-only

纯图形

回答by Zuhair Taha

回答by Victor.Palyvoda

回答by itsmikem

回答by Gfra54

回答by amitgur

回答by pabloRN

回答by user2681033

回答by o_O

相关推荐

Internet Explorer 是否支持 CSS 转换？

为单个输入 ID 定义 CSS 样式，而不是 input[type=checkbox]

CSS 中的通配符 * 用于类

CSS 当 z-index 不起作用时如何强制一个元素到顶部？

相关推荐

最近更新

标签