🎨

CSSで金・銀・銅カラーを再現する

2022/11/23に公開

CSS

HTML

カラー

tech

こんなのが作りたい

金銀銅を単色で表現するのは難しい

一応、ゴールド、シルバー、ブロンズとされるカラーコードはありますが、どうも「これじゃない」感がすごいんですね。

どう見ても黄色・灰色・茶色です。

これらがなぜ金銀銅っぽくないかというと、金属感がないからです。

では金属感とは何かというと、それは光沢です。

なので光沢を出して金属っぽさを表現すれば、それっぽくなるのでは!?　ということで、linear-gradientのアニメーションでキラリと光る感を出してみました。

ゴールド

GOLD

.gold{
  background: linear-gradient(45deg, #DAAF08 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #DAAF08 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

キンキンなゴールドといった感じです。

マットなゴールド

MATGOLD

.matgold{
  background: linear-gradient(45deg, #c0b283 0%, #c0b283 45%, #FEE9A0 70%, #c0b283 85%, #c0b283 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

高級感ある艶感ゴールド。

シルバー

SILVER

.silver{
  background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

ブロンズ

BRONZE

.bronze{
  background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

まとめ

どれもキラリと光ることで金属感が出ていますね。サブスクリプションの登録ボタンなんかに使えそうです。

参考

https://uiverse.io/buttons