19
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSSで色を限りなくゴールドやシルバーに近づける

Last updated at Posted at 2020-12-08

どうも7noteです。単色では再現が難しいゴールド。

単色でゴールドをやろうとしても・・・

e2d06e.png

単色でゴールドは結構難しいです。というか無理。

グラデーションでゴールドにする

div {
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}

gold.png

シルバーなら・・・

div {
  background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}

silver.png

まとめ

ホームページの製作依頼を受けるときに、たまにゴールドを使いたいという要望が出たりするので、作り方は覚えておくといいかも。

参考
https://1-notes.com/css-text-metal-design/
https://encycolorpedia.jp/ffd700

19
10
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?