I have created a "flat long shadow" effect based on Matt Lambert's tutorial. The code is quite lengthy, so I'm looking for ways to make it more concise without using SASS or other tools.
body {
background-color: #ddd;
}
div {
min-height: 64px;
width: 64px;
text-align: center;
background-color: cyan;
border: 1px solid blue;
box-shadow: #8c8c8c 1px 1px, #8c8c8c 2px 2px, #8c8c8c 3px 3px, #8c8c8c 4px 4px...
}<div>
wow that's a lot of CSS!
</div>I want to add this effect to my website, but the code is overwhelming in its length. Graphic alternatives are not suitable for this case. I've explored options for writing more compact CSS code, but haven't found a solution without using advanced tools like SASS.
Here's some information I found, but it doesn't offer much hope:
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. - @Lost Left Stack
I'm reaching out to the stackoverflow community to see if there's a more efficient way to achieve this effect.