読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

CSSでkonashiの素材をつくる

つくったもの CSS


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

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


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;
    }
  }
}

いかがでしょうか。前回よりもダイナミックにデフォルメしております。

最近konahiをつかったアプリをつくっていまして、「Find konashi ボタンにkonashiのアイコンを入れたいな。」と思って、PhotoShopで素材を作りはじめたんですが、全然うまくいかず、いっそのことCSSの方がはやいんじゃないかと思ってつくり始めたのがことの発端です。

実際CSSのほうが全然はやかったです。慣れた環境でつくるのが一番ですね。
今回は以上です。



konashi

konashi