Question

注意：此问题类似至this问题;然而，它是不同的，因此被问为一个单独的问题与刚刚联系的人。

我正在尝试在CSS中为徽标中的文本创建一个扁平的长阴影。我发现这样做的原始方式基于Matt Lambert's tutorial。 Matt建议这样做的方式需要很多的CSS（虽然，对他来说，它确实有效，善良知道我没想到这一点）。因此，这导致我要求用更少的CSS来做到这一点的方法。 @ vals了解了如何使用this。

现在我正在尝试制作一个扁平的长阴影（有没有人有一个较短的缩写？这个缩写：“FLS？”）对于徽标的文本（即{{ 3}}）;但是，它不是那么顺利......

正如你从this我所看到的那样，我将这两种技术结合起来......但是，虽然它并不残忍，但它并不完美......

以下是片段中的相同小提琴：

/* 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 本身的宽度和高度（使用:before和{{在盒子阴影上实现1}}伪类），我觉得这会是小菜一碟;但是，我的所有研究都没有找到如何为 text-shadow 执行此操作。

有没有人知道如何使用最少的CSS为文本制作扁平的长阴影 - 可能会以某种方式更改文本阴影的宽度和高度？

谢谢。

Answer 1

虽然这不是css唯一的答案，但你可以尝试一下。

基本上，您可以通过简短的JavaScript代码段在浏览器中创建相应的CSS。好处是，它使你非常灵活 - 只改变两个参数而不是几十行css。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我不认为有一个很好的CSS方法。

我能想到的唯一可能性是使用与基础相同的文本创建伪，并用于将阴影的数量减少到三分之一：

请注意，伪本身计为阴影，因为它的颜色已更改为阴影的颜色

＆＃13;

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

＆＃13;

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

＆＃13;

使用较少的CSS为CSS中的文本创建“扁平长阴影”

2 个答案: