使用更少的 CSS 为 CSS 中的文本创建“扁平长阴影”
发布于2022-12-06 23:17 阅读(1312) 评论(0) 点赞(12) 收藏(3)
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.
我正在尝试在 CSS中为徽标中的文本创建一个扁平的长阴影。我发现这样做的原始方法是基于Matt Lambert 的 教程。Matt 提议的方法需要大量CSS（不过，对他表示敬意，它确实有效，天知道我没弄明白）。因此，这促使我寻求一种使用更少的 CSS 来做到这一点的方法。@vals想出了如何用 this 做到这一点。
现在我正在尝试为徽标的文本（即this ）制作一个平长的阴影（有人对此有更短的缩写吗？首字母缩略词：“ FLS ？” ）；然而，事情并没有那么顺利……
正如你从我制作的这个小提琴中看到的那样，我将这两种技术结合起来......但是，虽然它并不残酷，但它并不完美......
这是一个片段中的同一个小提琴：
主要问题是我们现在使用的是文本阴影而不是框阴影，因此:before和:after伪类不起作用（尽管我试图通过将它们附加到<span>... 然后使它们起作用做了width: 100%）。
如果有办法设置text-shadow本身的宽度和高度（通过使用:before和:after伪类在 box-shadow 上实现），我觉得这将是小菜一碟；但是，我所有的研究都没有找到如何为text-shadow执行此操作。
有谁知道用最少的 CSS 为文本制作扁平长阴影的方法 - 可能通过某种方式改变文本阴影的宽度和高度？
谢谢你。
解决方案
虽然这不是纯 css 的答案，但您可以尝试一下。
基本上，您通过一个简短的 javascript 片段在浏览器中创建相应的 css。好处是，它使您非常灵活 - 只需更改两个参数而不是几十行 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>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/460288/d317a9e10ed18618b1d4/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力