Создание "плоской длинной тени" для текста в CSS с меньшим количеством CSS

Question

Примечание: этот вопрос похож на этот вопрос; однако, это отличается и поэтому задается как отдельный вопрос к только что связанному.

Я пытаюсь создать плоскую длинную тень в CSS для текста в логотипе. Оригинальный способ, который я нашел, основан на учебнике Matt Lambert. То, как Мэтт предлагает это сделать, потребует большого количества CSS (хотя, слава ему, это работает, и, боже мой, я знаю, что я этого не понял). Таким образом, это побудило меня попросить способ сделать это с меньшим количеством CSS. @ vals понял, как это сделать.

Сейчас я пытаюсь сделать плоскую длинную тень (есть ли у кого-нибудь более короткое сокращение для этого? Как насчет аббревиатуры: " FLS?") Для текста логотипа (т.е. это); Однако, это не так хорошо...

Как вы можете видеть из этой скрипки, которую я сделал, я как бы объединяю две техники... но, хотя это и не ужасно, но и не работает идеально...

Вот та же скрипка во фрагменте:

/* 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>

Основная проблема заключается в том, что теперь мы работаем с тенью текста, а не с тенью блока, и поэтому :before а также :after псевдо-классы не работают (хотя я попытался заставить их работать, прикрепив их к <span>... а затем сделал width: 100%).

Если бы был способ установить ширину и высоту самой тени для текста (что достигается на прямоугольнике с помощью :before а также :after псевдо-классы), я чувствую, что это будет кусок пирога; однако, все мои исследования не нашли, как сделать это для тени текста.

Кто-нибудь знает способ сделать плоскую длинную тень для текста с минимальным CSS - возможно, как-то изменив ширину и высоту текста-тени?

Спасибо.

Answer 1

Я не думаю, что есть хороший подход только CSS.

Единственное, о чем я могу думать, - это создать псевдо с тем же текстом, что и основа, и использовать для уменьшения количества теней до одной трети:

Обратите внимание, что само псевдо считается тенью, потому что его цвет изменился на цвет тени.

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

Answer 2

Хотя это не только ответ CSS, вы можете попробовать.

По сути, вы создаете соответствующий CSS в браузере через короткий фрагмент JavaScript. Плюс в том, что это делает вас очень гибким - изменяя только два параметра вместо нескольких десятков строк 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>