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

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

Я пытаюсь создать плоскую длинную тень в 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>

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

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

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

Спасибо.


html css box-shadow
person 4lackof    schedule 22.08.2016    source источник
comment
Я не думаю, что это возможно с text-shadow.   -  person Christoph    schedule 22.08.2016
comment
@ Кристоф, спасибо. Человек может мечтать, не так ли? :P Может быть, у кого-то есть блестящая идея   -  person 4lackof    schedule 22.08.2016
comment
Единственная возможность, о которой я могу думать, - это создать css с javascript на лету.   -  person Christoph    schedule 22.08.2016

Ответы (2)


arrow_upward
1
arrow_downward

Хотя это ответ не только для 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>

person Christoph    schedule 22.08.2016

arrow_upward
1
arrow_downward

Я не думаю, что есть хороший подход, основанный только на 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>

person vals    schedule 22.08.2016