CSSでkonashiの素材をつくる - みかづきブログその3

こちらの記事が意外に好評だったので、今回もCSSでフラットな素材をつくってみようとおもいます。
前回よりもちょっとニッチなデバイスですが、最近お世話になっているデバイス konashi をCSSでつくってみました。

demo

See the Pen konashi by kimmy (@kimmy) on CodePen.

HTML

<div class="konashi adjust">
  <ul class="pins top">
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
  </ul>
  <div class="battery">
    <div class="stopper"></div>
  </div>
  <ul class="bridge"></ul>
  <div class="led l1 on"></div>
  <div class="led l2"></div>
  <div class="led l3"></div>
  <div class="led l4"></div>
  <div class="led l5"></div>
  <div class="button"></div>
  <div class="outlet"></div>
  <div class="usb"></div>
  <div class="pic">
    <div class="sticker"></div>
  </div>
  <ul class="pins bottom">
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
    <li class="pin"></li>
  </ul>
</div>

SCSS

body {
  background: #dedede;
}
.adjust {
  position: absolute;
  top: 50%; left: 50%;
  margin: -140px 0 0 -80px;
}

.konashi {
  width: 160px; height: 250px;
  background: #3b433d;
  box-shadow: 0 0 5px rgba(0, 0, 0, .6);
  
  &:before {
    display: block;
    position: absolute;
    top: 0; left: 0;
    border-top: solid rgba(255, 255, 255, .05) 125px;
    border-left: solid rgba(255, 255, 255, .05) 80px;
    border-bottom: solid rgba(255, 255, 255, 0) 125px;
    border-right: solid rgba(255, 255, 255, 0) 80px;
    width: 0; height: 0;
    content: "";
    z-index: 5;
  }
  
  .pins {
    position: absolute;
    left: 20px;
    width: 120px; height: 15px;
    background: #262c29;
    overflow: hidden;
    
    &.top {
      top: 0;
      
      .pin {
        float: left;
        margin: 4px 2px;
        width: 8px; height: 8px;
        background: #0e0e0e;
      }
    }
    
    &.bottom {
      bottom: 0;

      .pin {
        float: left;
        margin: 3px 2px;
        width: 8px; height: 8px;
        background: #0e0e0e;
      }
    }
  }
  
  .battery {
    position: absolute;
    top: 25px; left: 15px;
    width: 55px; height: 95px;
    background: #cecece;
    
    &:before {
      display: block;
      position: absolute;
      top: 0; right: -20px;
      border: solid 10px rgba(0, 0, 0, 0);
      border-left-color: #cecece;
      border-bottom-color: #cecece;
      width: 0; height: 0;
      content: "";
    }
    
    &:after {
      display: block;
      position: absolute;
      bottom: 0; right: -20px;
      border: solid 10px rgba(0, 0, 0, 0);
      border-top-color: #cecece;
      border-left-color: #cecece;
      width: 0; height: 0;
      content: "";
    }
    
    .stopper {
      position: absolute;
      top: 20px; right: -20px;
      width: 20px; height: 55px;
      background: #cecece;
      z-index: 1;
      
      &:before {
        display: block;
        position: absolute;
        top: -10px; right: 15px;
        border-radius: 50%; 
        width: 25px; height: 25px;
        content: "";
        background: #8e8e8e;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
      }
      
      &:after {
        display: block;
        position: absolute;
        bottom: -10px; right: 15px;
        border-radius: 50%; 
        width: 25px; height: 25px;
        content: "";
        background: #8e8e8e;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
      }
    }
  }
  
  .led {
    position: absolute;
    right: 15px;
    width: 16px; height: 8px;
    background: #dedede;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    
    &:before {
      display: block;
      position: absolute;
      top: 1px; left: -12px;
      width: 6px; height: 6px;
      content: "";
      background: #262c29;
    }
    
    &.l1 {
      top: 130px; left: 5px;
      width: 8px; height: 16px;
      
      &:before {
        display: none;
      }
    }
    
    &.l2 {
      bottom: 140px;
    }
    
    &.l3 {
      bottom: 160px;
    }
    
    &.l4 {
      bottom: 180px;
    }
    
    &.l5 {
      bottom: 200px;
    }
    
    &.on {
      background: #c77e9c;
    }
  }
  
  .bridge {
    position: absolute;
    bottom: 80px; left: 40px;
    width: 65px; height: 25px;
    background: #262c29;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  }
  
  .button {
    position: absolute;
    bottom: 90px; right: 5px;
    width: 30px; height: 30px;
    background: #cecece;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    
    &:before {
      display: block;
      position: absolute;
      top: 50%; left: 50%;
      margin: -8px;
      border-radius: 50%;
      width: 16px; height: 16px;
      content: "";
      background: #c77e9c;
      box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    }
  }
  
  .outlet {
    position: absolute;
    bottom: 20px; left: 0;
    width: 30px; height: 25px;
    background: #dedede;
    
    &:before {
      display: block;
      position: absolute;
      top: 5px; right: 0;
      width: 5px; height: 15px;
      content: "";
      background: #3b433d;
    }
    
    &:after {
      display: block;
      position: absolute;
      top: 10px; left: 0;
      width: 15px; height: 5px;
      content: "";
      background: #aeaeae;
    }
  }
  
.usb {
    position: absolute;
    bottom: 55px; left: 0;
    width: 20px; height: 35px;
    background: #dedede;
    
    &:before {
      display: block;
      position: absolute;
      top: 0px; left: 0;
      width: 5px; height: 100%;
      content: "";
      background: #eeeeee;
    }
  }
  
  .pic {
    position: absolute;
    bottom: 20px; right: 5px;
    width: 100px; height: 45px;
    background: #485443;
    
    &:before {
      display: block;
      position: absolute;
      top: -10px; left: 0;
      width: 90px; height: 10px;
      content: "";
      background: #485443;
    }
    
    &:after {
      display: block;
      position: absolute;
      top: -10px; right: 0;
      border: solid 5px rgba(0, 0, 0, 0);
      border-left-color: #485443;
      border-bottom-color: #485443;
      
      width: 0; height: 0;
      content: "";
    }
    
    .sticker {
      position: absolute;
      top: 0; left: 10px;
      width: 60px; height: 35px;
      background: #dedede;
      z-index: 1;
    }
  }
}