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

Question

我想在我的网页上制作我的标题文字,就像金色一样,我不想要这样的颜色#ffd700我想要的外观和感觉就像任何图形设计师都可以在Photoshop中制作金色效果.在这里,我附上一个我想要的例子.

Answer 1

你可以用它svg来起作用

在线梯度发生器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>

Answer 2

使用 css3 中的 text-shadow 属性来获得您需要的金色效果。请参阅http://css3gen.com/text-shadow/以获得最佳结果。