IOS7 Camera Icon

In this example below you will see how to do a IOS7 Camera Icon with some HTML / CSS and Javascript

The new Icon for the IOS7 new look and feel

Thumbnail
This awesome code was written by silverlight513, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright silverlight513 ©
  • HTML
  • CSS
  • JavaScript
    <div id="container">
  <div id="top"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="bottom"></div>
  <div id="cover"></div>
  <div id="center">
    <div id="dot"></div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/silverlight513/ios7-camera-icon-AzDGg */
    body, html{
  width: 100%;
  height: 100%;
  background-color: #EFEFEF;
  
  /* Internet Explorer 10 */
  display:-ms-flexbox;
  -ms-flex-pack:center;
  -ms-flex-align:center;

  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;

  /* Safari, Opera, and Chrome */
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  /* W3C */
  display:box;
  box-pack:center;
  box-align:center;
}

#container{
  width: 200px;
  height: 200px;
  border-radius: 30px;
  background-image: linear-gradient(bottom, rgb(90,90,90) 0%, rgb(185,185,185) 100%);
background-image: -o-linear-gradient(bottom, rgb(90,90,90) 0%, rgb(185,185,185) 100%);
background-image: -moz-linear-gradient(bottom, rgb(90,90,90) 0%, rgb(185,185,185) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(90,90,90) 0%, rgb(185,185,185) 100%);
background-image: -ms-linear-gradient(bottom, rgb(90,90,90) 0%, rgb(185,185,185) 100%);

  background-image: -webkit-gradient(
  	linear,
  	left bottom,
  	left top,
  	color-stop(0, rgb(90,90,90)),
  	color-stop(1, rgb(185,185,185))
  );
}

#top{
  width: 66px;
  height: 23px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: white;
  margin: 0 auto;
  position: relative;
  top: 48px;
}

#left{
  width: 34px;
  height: 80px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: white;
  position: relative;
  left: 33px;
  top: 38px;
}

#right{
  width: 34px;
  height: 80px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: white;
  float: right;
  position: relative;
  bottom: 42px;
  right: 33px;
}

#bottom{
  width: 66px;
  height: 10px;
  background-color: white;
  position: relative;
  left: 67px;
  top: 28px;
}

#cover{
  width: 56px;
  height: 56px;
  border: 12px solid white;
  margin: 0 auto;
  position: relative;
  bottom: 52px;
  
}

#center{
  width: 56px;
  height: 56px;
  border-radius: 66px;
  border: 12px solid white;
  margin: 0 auto;
  position: relative;
  bottom: 132px;
  
  /* Internet Explorer 10 */
  display:-ms-flexbox;
  -ms-flex-pack:center;
  -ms-flex-align:center;

  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;

  /* Safari, Opera, and Chrome */
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  /* W3C */
  display:box;
  box-pack:center;
  box-align:center;
}

#dot{
  width: 28px;
  height: 28px;
  border-radius: 40px;
  background-color: white;
}


/*Downloaded from https://www.codeseek.co/silverlight513/ios7-camera-icon-AzDGg */
    

Comments