More than 3 years have passed since last update.
CSSで色を限りなくゴールドやシルバーに近づける
24
Last updated at Posted at 2020-12-08
どうも7noteです。単色では再現が難しいゴールド。
単色でゴールドをやろうとしても・・・
単色でゴールドは結構難しいです。というか無理。
グラデーションでゴールドにする
div {
background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}
シルバーなら・・・
div {
background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}
まとめ
ホームページの製作依頼を受けるときに、たまにゴールドを使いたいという要望が出たりするので、作り方は覚えておくといいかも。
参考
https://1-notes.com/css-text-metal-design/
https://encycolorpedia.jp/ffd700
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme