Flat Instagram Logo

Flat Instagram Logo.markdown

Flat Instagram Logo

Dribbble Rebound from Pavel Proshin http://dribbble.com/shots/1349552-Instagram-7-0

All CSS good fun

A Pen by Tyler Fry on CodePen.

License.

index.html

<div class="icon">
  <div class="top">
    <div class="rainbow">
      <span class="color red"></span>
      <span class="color yellow"></span>
      <span class="color green"></span>
      <span class="color blue"></span>
    </div>
    <div class="circle flash">
      <div class="flare">
        <div class="spot"></div>
      </div>
    </div>
  </div>
  <div class="circle lens">
    <div class="flare">
      <div class="spot"></div>
    </div>
  </div>
</div>

style.scss

* { box-sizing: border-box; }
body { background: #fff; }

.icon {
  margin: 50px auto 0;
  width: 200px;
  height: 200px;
  background: #e2ded4;
  border-radius: 45px;
  overflow: hidden;
  position: relative;
  &:before {
    content: '';
    width: 110px;
    height: 140px;
    background: #c8c1b0;
    position: absolute;
    bottom: -9px;
    right: 9px;
    transform: rotate(-45deg);
  }
  .circle {
    border-radius: 50%;
    position: relative;
    z-index: 10;
    &.flash {
      background: #101318;
      width: 40px;
      height: 40px;
      float: right;
      margin: 15px;
      .flare { 
        width: 24px;
        height: 24px;
        margin: 8px;
        border: 3px solid #182432;
      }
      .spot {
        width: 14px;
        height: 14px;
        margin: 2px;
        &:before {
          content: '';
          border-radius: 50%;
          width: 8px; height: 8px;
          background: #29486b;
          position: absolute;
          left: 3px; top: 1px;
        }
        &:after {
          content: '';
          border-radius: 50%;
          width: 2px; height: 2px;
          background: #29486b;
          position: absolute;
          left: 6px; bottom: 2px;
        }
      }
    }
    &.lens{
      background: #e2ded4;
      width: 115px;
      height: 115px;
      margin: -20px auto 0;
      .flare { 
        width: 99px;
        height: 99px;
        border: 10px solid #182432;
        position: relative;
        top: 8px; left: 8px;
      }
      .spot {
        width: 54px;
        height: 54px;
        top: 12px; left: 12px;
        &:before {
          content: '';
          border-radius: 50%;
          width: 29px; height: 29px;
          background: #29486b;
          position: absolute;
          left: 13px; top: 5px;
        }
        &:after {
          content: '';
          border-radius: 50%;
          width: 8px; height: 8px;
          background: #29486b;
          position: absolute;
          left: 24px; bottom: 8px;
        }
      }      
    }
    .flare {
      border-radius: 50%;
      background: #1f3854;
    }
    .spot {
      background: #182432;
      border-radius: 50%;
      position: relative;
    }
  }
  .top {
    background: #8e6051;
    overflow: hidden;
    border-radius: 45px 45px 0 0;
    height: 65px;
    border-bottom: 2px solid darken(#8e6051,10%);
    .rainbow {
      margin-left: 15px;
      .color {
        width: 8px;
        height: 65px;
        display: block;
        float: left;
      }
      .red { background-color: #f13e32; }
      .yellow { background-color: #ffd700; }
      .green { background-color: #60e37e; }
      .blue { background-color: #40bce4; }
    }
  }
}