A Pen by Ben Norris.

CSS-Fake-Instagram-Logo.markdown

CSS Fake Instagram Logo

This is a pure-CSS version of Pietro Schiranos's Dribbble Shot.

I'm still working to get the name included.

A Pen by Ben Norris on CodePen.

License.

index.jade

#camera
  #lens
  #flash
  p#logo Insta

p A pure-CSS version of <a href="http://dribbble.com/shots/1262497-Instagram-ios-7">Pietro Schiranos's Dribbble Shot</a>.

style.scss

@import "compass";
// Vars
$white: #EDE9E0;
$red: #FF004C;
$yellow: #FFC729;
$green: #57D8A2;
$bright-blue: #3B8CFF;
$camera-blue: #3C769F;
$camera-blue-border: #0D4165;

#camera {
  position: absolute;
  top: 50%; margin-top: -16em; height: 32em;
  left: 50%; margin-left: -16em; width: 32em;
  border-radius: 5em;
  background-color: $white;
  background-image: 
    // Top color
    linear-gradient(to bottom, 
      $camera-blue 0, $camera-blue 33%, 
      $camera-blue-border 33%, $camera-blue-border 33.5%, 
      transparent 33.5%),
    // Colored stripes
    linear-gradient(to right, 
      $white 0, $white 1.5em, 
      $red 1.5em, $red 2.5em, 
      $yellow 2.5em, $yellow 3.5em, 
      $green 3.5em, $green 4.5em, 
      $bright-blue 4.5em, $bright-blue 5.5em, 
      $white 5.5em);
}

// Lens Vars
$lens-center: #0F2445;
$lens-second: #172E72;
$lens-third: #38A0AE;
$lens-fourth: #3AB3C6;
$lens-fifth: #33576A;
$lens-green: hsla(169, 68%, 39%, .5);
$lens-highlight: #6F96D3;
$lens-highlight-dark: #6169C0;

#lens {
  position: absolute;
  top: 25%; height: 50%;
  left: 25%; width: 50%;
  border-radius: 50%;
  box-shadow: 0 2em 8em -3em hsla(0,0%,0%,1);
  background-color: $white;
  background-image:
    // Shadow overlay
    linear-gradient(
      transparent 0%, transparent 50%,
      hsla(0,0%,0%,.13) 50%),
    radial-gradient(
      // An ellipse 80% of width and 60% of height
      90% 60% // Note no comma here
      // Positioned off center to the right and up
      at 60% 35%,
      $lens-green 0%, $lens-green 10%, transparent 30%
      ),
    radial-gradient(
      $lens-center 0, $lens-center 22%,
      $lens-second 22%, $lens-second 30%,
      $lens-third 30%, $lens-third 40%,
      $lens-fourth 40%, $lens-fourth 45%,
      $lens-fifth 40%, $lens-fifth 60%,
      $white 60%);
  // Lens highlights
  &:before, &:after {
    content: '';
    position: absolute;
    top: 43%; left: 48%;
    width: 6%; height: 6%;
    border-radius: 50%;
    background-color: $lens-highlight;
  }
  &:after {
    top: 52%; left: 48%;
    width: 4%; height: 4%;
    background-color: $lens-highlight-dark;
  }
}

// Flash Vars
$flash: #2D576B;
$flash-highlight: lighten($camera-blue, 10%);

#flash {
  position: absolute;
  top: 8%; right: 8%;
  width: 17%; height: 17%;
  border-radius: 13%;
  background-color: $flash;
  box-shadow: inset 0 -.125em .0625em $flash-highlight;
  background-image: 
    // Shadow overlay
    linear-gradient(
      transparent 0%, transparent 50%,
      hsla(0,0%,0%,.13) 50%),
    radial-gradient(
      // An ellipse 80% of width and 60% of height
      90% 60% // Note no comma here
      // Positioned off center to the right and up
      at 60% 35%,
      $lens-green 0%, $lens-green 10%, transparent 30%
      ),
    radial-gradient(
      $lens-center 0%, $lens-center 20%,
      $lens-second 20%, $lens-second 30%,
      $lens-third 30%, $lens-third 40%,
      $lens-fourth 40%, $lens-fourth 45%,
      $flash 45%);
  // Flash highlights
  &:before, &:after {
    content: '';
    position: absolute;
    top: 43%; left: 48%;
    width: 6%; height: 6%;
    border-radius: 50%;
    background-color: $lens-highlight;
  }
  &:after {
    top: 52%; left: 48%;
    width: 4%; height: 4%;
    background-color: $lens-highlight-dark;
  }
}

#logo {
  // Coming soon
  display: none;  
}

p {
  position: absolute;
  bottom: 0;
  right: 1.5em;
}