Creating a “flat long shadow” for text in CSS with less CSS

Question

Note: This question is similar to this question; however, it is different and thus is being asked as a separate question to the one just linked.

I am trying to create a flat long shadow in CSS for the text in a logo. The original way I found to do it is based on Matt Lambert's tutorial. The way Matt proposes to do it would require a lot of CSS (although, kudos to him, it does work and goodness knows I didn't figure that out). So thus that led me to ask for a way to do that with less CSS. @vals figured out how to do that with this.

Now I'm attempting to make a flat-long-shadow (does anyone have a shorter abbreviation for this? how about the acronym: "FLS?") for the text of a logo (i.e. this); however, it isn't going so well...

As you can see from this fiddle I made, I sort of combine the two techniques... but, while it's not atrocious, it doesn't work perfectly...

Here is the same fiddle in a snippet:

/* shadow color: #2d5986 */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-flow: column wrap;
  overflow: hidden;
}
div {
  min-height: 128px;
  min-width: 128px;
  background-color: #369;
  color: white;
  font-size: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
span {
  /* background-color: #47a; */
  position: relative;
  text-align: center;
  text-shadow: #2d5986 1px 1px,
    #2d5986 2px 2px,
    #2d5986 3px 3px,
    #2d5986 4px 4px,
    #2d5986 5px 5px,
    #2d5986 6px 6px,
    #2d5986 7px 7px,
    #2d5986 8px 8px,
    #2d5986 9px 9px,
    #2d5986 10px 10px,
    #2d5986 11px 11px,
    #2d5986 12px 12px,
    #2d5986 13px 13px,
    #2d5986 14px 14px;
}
.shadow:before, .shadow:after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 15px;
  z-index: 1;
  transform-origin: bottom right;
}
.shadow:before {
  height: 40px; /* increased height */
  width: 100%;
  left: 0px;
  transform: skewX(45deg);
  box-shadow: 1px 40px 0px 0px #2d5986;  /* 1px in x direction to avoid small gap between shadows */
}
/* .shadow:after {
  width: 10px;  increased width
  height: 100%;
  top: 25px;
  transform: skewY(45deg);
  box-shadow: 10px 0px #2d5986;
} */

<div>
  <span class="shadow">
    A
  </span>
</div>
<div>
  <span class="shadow">
    a
  </span>
  <span class="shadow">
    b
  </span>
</div>
<div>
  <span class="shadow">
    A B
  </span>
</div>
<div>
  <span class="shadow">
    A B C
  </span>
</div>

The main problem is the fact that we are now working with text-shadow instead of box-shadow, and as such the :before and :after pseudo classes don't work (although I attempted to make them work by attaching them to the <span>... and then made the width: 100%).

If there was a way to set the width and height of the text-shadow itself (which is achieved on a box-shadow by using the :before and :after pseudo classes), I feel this would be a piece of cake; however, all my research has not found how to do this for a text-shadow.

Does anyone know a way to make a flat long shadow for text with minimal CSS - potentially by somehow changing the width and height of the text-shadow?

Thank you.

@Christoph, thanks. A man can dream, can't he? :P Maybe someone has a bright idea — 4lackof, Aug 22 '16 at 20:07
The only possibility I can think of is to create the css with javascript on the fly. — Christoph, Aug 22 '16 at 20:12

score 1 · Answer 1 · answered Aug 22 '16 at 20:52

Though this is no css-only answer, you might give it a try.

Basically, you create the according css in the browser via a short javascript snippet. The upside is, that it makes you very flexible - changing only two parameters instead of several tens of lines of css.

function addDropShadow(element,width,color){
  let css = "";
  for (var i = 1;i<width;i++){
   css += `${color} ${i}px ${i}px,`;
  }
  css += `${color} ${width}px ${width}px`;
  element && (element.style.textShadow = css);
}
   
let element = document.querySelector(".icon");
let color = "rgb(18, 128, 106)";

addDropShadow(element,15,color);

.container { padding: 50px; background: rgb(34,45,58); } .icon { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-weight: bold; color: #fff; background-color: rgb(22, 160, 133); height: 150px;width: 150px; font-size: 75px;line-height: 150px; text-align: center; display: block; overflow: hidden; }

<div class="container"><div class="icon">YO</div></div>

score 1 · Answer 2 · answered Aug 22 '16 at 21:05

I don't think there is a good CSS only approach.

The only posibility that I can think of is creating pseudos with the same text as the base, and use to reduce the amount of shadows to one third:

Notice that the pseudo itself counts as a shadow because it has the color changed to the color of the shadow

.sample {
  font-size: 70px;
  position: relative;
  text-shadow: 1px 1px red, 2px 2px red, 3px 3px red, 4px 4px red, 5px 5px red, 
  6px 6px red, 7px 7px red, 8px 8px red, 9px 9px red;
}

.sample:after, .sample:before {
  content: attr(data-text);
  z-index: -1;
  color: red;
  position: absolute;
}

.sample:after {
  left: 10px;
  top: 10px;
}

.sample:before {
  left: 20px;
  top: 20px;
}

<div class="sample" data-text="Sample">Sample</div>

Creating a “flat long shadow” for text in CSS with less CSS

2 Answers2