javascript 如何使用CSS3制作金色效果文字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29643842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make gold effect text using CSS3
提问by Developer_world
I want to make my heading text in my webpage like a gold I don' want a color like this #ffd700I want the same look and feel like any graphics designer can make gold effect in Photoshop. Here I am attaching an example how I want.
我想让我的网页中的标题文本像金色一样 我不想要这样的颜色#ffd700我想要相同的外观和感觉，就像任何图形设计师都可以在 Photoshop 中制作金色效果一样。在这里，我附上了一个我想要的例子。
回答by Vitorino fernandes
You can use svgto get effect
您可以使用svg来获得效果
Online gradient generator for svg- http://10k.aneventapart.com/1/Uploads/319/
在线梯度生成器svg- http://10k.aneventapart.com/1/Uploads/319/
svg {
text-shadow: -1px 0px 1px rgb(97, 100, 5);
}<svg width="550" height="50" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad2" y2="1" x2="1" id="g" x1="1" y1="0.1433">
<stop stop-color="rgb(255, 213, 127)" offset="0" />
<stop stop-color="rgb(179, 149, 0)" offset="0.4817" />
<stop stop-color="rgb(179, 149, 0)" offset="1" />
</linearGradient>
</defs>
<text font-family="arial" font-size="40" id="svg_1" y="45" x="288" fill="url(#grad2)" font-weight="bold">
<tspan x="10" y="45">JANDUS TECHNOLOGIES</tspan>
</text>
</svg>回答by damianfrizzi
I know you want to use CSS3 but as you mentioned HTML5 I'd like to post a canvas alternative here. You'll get better browser support if you use a canvas element. The canvas 2D API has a method called createLinearGradientto apply a color gradient to a text by using different color stops:
我知道你想使用 CSS3，但正如你提到的 HTML5，我想在这里发布一个画布替代品。如果您使用画布元素，您将获得更好的浏览器支持。画布 2D API 有一个名为createLinearGradient的方法，可以通过使用不同的色标对文本应用颜色渐变：
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);
You can also easily apply other effects such as text-shadows.
您还可以轻松应用其他效果，例如文本阴影。
回答by kravemir
I've made an example using gradient and shadow. Here's HTML code:
我用渐变和阴影做了一个例子。这是 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>
Here's CSS:
这是CSS：
.block {
padding: 1em;
text-align: center;
font-family: sans;
font-size: 2em;
}
.golden-base {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:bold;
-webkit-margin-before: 0.3em;
-webkit-margin-after: 0.2em;
}
.golden1 {
background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);
}
.golden2 {
background-image: -webkit-linear-gradient(#E8D800, #E0CF00 52%, #A86800 55%, #A86800 );
text-shadow: -0.02em -0.03em 0.005em rgba(255, 255, 0, 0.56);
}
.golden3 {
background-image: -webkit-linear-gradient(#FFF65C 45%, #9A8000 75%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.09),
-1px -1px 0 rgba(255, 220, 0, 0.670);
font-size:2em;
}
It looks like this:
它看起来像这样：
I'm not a designer. So it's hard for me to adjust colors for your needs. However, you may test it and adjust here @ codepen - link
我不是设计师。所以我很难根据你的需要调整颜色。但是，您可以在这里测试并调整@codepen - 链接
Disclaimer:I have tested it only with Google Chrome. To make it working with different browsers you have to port -webkit-tricks-..., if possible.
免责声明：我仅使用 Google Chrome 对其进行了测试。-webkit-tricks-...如果可能的话，为了让它在不同的浏览器上工作，你必须移植。
Editbased on comments, and more gradient effects.
根据评论和更多渐变效果进行编辑。
回答by jbutler483
Disclaimer
免责声明
This is only available (at present) in webkit browsers
这仅（目前）在 webkit 浏览器中可用
You could use the
你可以使用
-webkit-background-clip
property to get your desired outcome.
属性以获得您想要的结果。
A sample would be:
一个样本是：
#wrap {
width: 100%;
}
.gradient {
font-size: 64px;
background: linear-gradient(#00AC97 50%, #E4CDA4 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<div id="wrap">
<span class="gradient">Cross browser? Not yet...</span>
</div>In order for this to 'work' in a more cross browser way, I (for once) would have to suggest using an image for this one :(
为了使其以更跨浏览器的方式“工作”，我（一次）不得不建议为此使用图像:(
回答by Binoop
Use text-shadow property in css3 to get the gold effect you need. Refer http://css3gen.com/text-shadow/for the best result.
使用 css3 中的 text-shadow 属性来获得你需要的金色效果。请参阅http://css3gen.com/text-shadow/以获得最佳效果。
