CSSでiOSのバッジ風デザインをつくる

chibadge (チバッジ) - 千葉ロッテマリーンズのスコアがバッジで確認できるアプリ のときにつくったCSSを流用してバッジ風のCSSをつくってみました。

アイコンの大きさはiOS7、バッジのデザインはiOS6を見本にしています。

See the Pen hello world. by kimmy (@kimmy) on CodePen.

HTML

<div class="wrapper">
  <div class="icon">
    <p class="badge">
      <span class="inner">H</span>
    </p>
  </div>
  
  <div class="icon">
    <p class="badge">
      <span class="inner">E</span>
    </p>
  </div>
  
  <div class="icon">
    <p class="badge">
      <span class="inner">L</span>
    </p>
  </div>
  
  <div class="icon">
    <p class="badge">
      <span class="inner">L</span>
    </p>
  </div>
  
  <div class="icon">
    <p class="badge">
      <span class="inner">O</span>
    </p>
  </div>

</div>
<div class="wrapper">
  
  <div class="icon">
    <p class="badge">
      <span class="inner">W</span>
    </p>
  </div>

  <div class="icon">
    <p class="badge">
      <span class="inner">O</span>
    </p>
  </div>
  
  <div class="icon">
    <p class="badge">
      <span class="inner">R</span>
    </p>
  </div>
  
  <div class="icon">
    <p class="badge">
      <span class="inner">L</span>
    </p>
  </div>
  
  <div class="icon">
    <p class="badge">
      <span class="inner">D</span>
    </p>
  </div>
</div>

CSS

body {
  background: #333;
}

.wrapper {
  overflow: hidden;
}

.icon {
  float: left;
  position: relative;
  margin: 25px;
  width: 120px;
  height: 120px;
  border-radius: 26px;
  background: -webkit-gradient(linear, left top, left bottom, from(#4a4a4a), to(#3e3e3e));
  background: -webkit-linear-gradient(top, #4a4a4a, #3e3e3e);
  background: linear-gradient(to bottom, #4a4a4a, #3e3e3e);
  background: gradient(linear, center top, center bottom, from(#4a4a4a), to(#3e3e3e));
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.icon .badge {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.icon .badge .inner {
  display: block;
  position: relative;
  margin: 4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  line-height: 38px;
  text-align: center;
  background: -webkit-gradient(linear, left top, left bottom, from(#ee757b), to(#c80507));
  background: -webkit-linear-gradient(top, #ee757b, #c80507);
  background: linear-gradient(to bottom, #ee757b, #c80507);
  background: gradient(linear, center top, center bottom, from(#ee757b), to(#c80507));
}