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.
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.
#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>. |
@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; | |
} |