CSSで缶バッジ風のエフェクト

ざっと探した感じだとやり方まとめられてるサイトが見当たらなかったのでまとめてみます。
缶バッジ風というか、ほとんどリッチボタンと同じ感じですが。
同人系サイトだとわりと使いどころがありそうな気がします。

こんな感じとか、

こんな感じ。
HTML側で、img要素を囲むタグ(divとかfigureとか)に「badge」クラスを追加してます。
以下CSS。

.badge {
  position: relative;
  width: 320px;
  height: 0;
  padding-top: 320px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 2px 5px 10px rgba(0,0,0,.4);
}

.badge:before,
.badge:after {
  position: absolute;
  display: block;
  content: "";
  border-radius: 50%;
  transform: rotate(-18deg);
  z-index: 2;
}

.badge:before {
  top: 4%;
  left: 7%;
  width: 60%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
}

.badge:after {
  top: 2%;
  left: 2%;
  width: 98%;
  height: 98%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .2) 100%);
}

.badge img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

サイズは320px×320pxで固定になっているので、適宜調整してください。
光と影、白と黒で作ったけど、青みつけたりしても面白いかも。

カテゴリー : 技術・小ネタ

COMMENT FORM

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です。

※送信の前にプライバシーポリシーを必ずご確認ください。