Javascript 如何使用CSS3制作黄金效果文本

我想让我的网页标题文本看起来像黄金一样，我不想要这样的颜色，我想要的是与任何图形设计师在Photoshop中都能产生黄金效果一样的外观和感觉。这里我附上一个我想要的例子。

---

在css3中使用文本阴影属性可以获得所需的黄金效果。请参阅最佳结果。

免责声明

---

这仅在webkit浏览器中可用（目前）

---

你可以使用

 -webkit-background-clip

属性以获得所需的结果

一个样本是：

#换行{
宽度：100%；
}
.梯度{
字体大小：64px；
背景：线性梯度（#00AC97 50%，#E4CDA4 50%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

跨浏览器？还没有。。。

我用渐变和阴影做了一个例子。以下是HTML代码：

<div class="block">
  <p class="golden-base golden3">Golden Text</p>
  <p class="golden-base golden1">Using Only CSS</p>
  <p class="golden-base golden2">NO JavaScript!</p>
<div>

看起来是这样的：

我不是设计师。所以我很难根据你的需要调整颜色。但是，您可以对其进行测试和调整

免责声明：我只使用谷歌Chrome进行了测试。如果可能的话，要使它与不同的浏览器协同工作，您必须移植

-webkit技巧-…

---

根据评论和更多渐变效果进行编辑。

我知道你想使用CSS3，但正如你提到的HTML5，我想在这里发布一个画布替代方案。如果使用canvas元素，您将获得更好的浏览器支持。canvas 2D API有一个调用的方法，通过使用不同的颜色停止将颜色渐变应用于文本：

var c = document.getElementById("stage");
var ctx = c.getContext("2d");

ctx.font = "30px Arial";
/* Color gradient */
var gradient = ctx.createLinearGradient(0, 30, 0, 10);
gradient.addColorStop("0", "#a68841");
gradient.addColorStop("0.5", "#5a4917");
gradient.addColorStop("0.6", "#836A28");
gradient.addColorStop("1.0", "#E9D07C");
/* Text shadow */
ctx.shadowColor = "rgba(0, 0, 0, 0.6)";
ctx.shadowOffsetX = 1; 
ctx.shadowOffsetY = 1; 
ctx.shadowBlur = 0;
ctx.fillStyle = gradient;
ctx.fillText("JANDUS TECHNOLOGIES", 0, 30);

您还可以轻松应用其他效果，例如文字阴影

---

您可以使用

svg

来获得效果

用于svg的在线梯度生成器

svg{
文本阴影：-1px0px 1pxRGB（97100,5）；
}

JANDUS技术公司

你知道Photoshop和CSS是两个完全不同的东西吗？这样的效果在CSS中是不可能的。到目前为止你尝试了什么？@Uwealner是的，我知道两者都不同，因为我认为在CSS3中可能会出现。这个问题几乎是正确的。但是，这是模棱两可的，因为每个设计师/人的想象和做事都不一样。所以，请提供一些图片，显示您所说的黄金文本的确切含义。有人想象“轮廓镜头”，有人想象从上到下的梯度…@Miro我更新了我的问题。谢谢你通知我。谢谢你帮助我亲爱的，但我想手动编写代码。你会多次复制文本吗？以及在生产中包含内嵌样式？@jbutler483:否。沙盒：视情况而定。示例：是-使其更易于理解。在生产中：否。沙盒：否。示例：否-使新开发人员认为这是可以的

var c = document.getElementById("stage");
var ctx = c.getContext("2d");

ctx.font = "30px Arial";
/* Color gradient */
var gradient = ctx.createLinearGradient(0, 30, 0, 10);
gradient.addColorStop("0", "#a68841");
gradient.addColorStop("0.5", "#5a4917");
gradient.addColorStop("0.6", "#836A28");
gradient.addColorStop("1.0", "#E9D07C");
/* Text shadow */
ctx.shadowColor = "rgba(0, 0, 0, 0.6)";
ctx.shadowOffsetX = 1; 
ctx.shadowOffsetY = 1; 
ctx.shadowBlur = 0;
ctx.fillStyle = gradient;
ctx.fillText("JANDUS TECHNOLOGIES", 0, 30);