A Pen by Kevin Jannis.

Camera-icon-in-CSS.markdown

Camera icon in CSS

A Pen by Kevin Jannis on CodePen.

License.

index.html

<p>A pen by Kevin Jannis (<a href="https://twitter.com/kevinjannis" target="_blank">@kevinjannis</a>), camera icon by <a href="http://dribbble.com/RovaneDurso">Rovane Durso </a></p>

<div id="camera">
  <span class="shade"></span>
</div>

style.css

  body {
    background: #c0dbdb;
    font-family: sans-serif;
  }

  p {
    text-align: center;
  }

  #camera {
    position: relative;
    background: white;

    display: block;
    height: 240px;
    width: 240px;

    margin: 50px auto;

    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 6px 0 0 #aec6c7;
  }

  #camera:before {
    content: " ";

    position: absolute;
    top: 33px;
    left: 33px;
    right: 33px;
    bottom: 33px;

    border-radius: 50%;
    border: solid 13px #f8f8f8;
    background: #44545e;
    box-shadow: inset 0 0 2px 3px #a6daed,
                inset 0 0 0 19px #aee3f7,
                inset 0 0 0 25px #90dcf9,
                inset 0 0 4px 27px #5c7683,
                inset 0 0 0 42px #6992a4,
                inset 0 0 0 58px #5d7784,
                0 5px 4px 0 #e9e9e9;

    overflow: hidden;
    z-index: 1;
  }

  #camera .shade {
    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: 0;
    font-size: 0;

    opacity: .2;
    border-style: solid;
    border-width: 240px 0 0 240px;
    border-color: transparent transparent transparent #f7f8f8;
    z-index: 10;

    box-shadow: 10px 10px 3px black;
  }

  #camera:after {
    content: " ";
    position: absolute;

    right: 20px;
    bottom: 20px;

    height: 14px;
    width: 14px;

    border-radius: 50%;
    background: #d55865;
    box-shadow: inset 0 0 3px 0 #d24a58,
                -88px -98px 0 -4px #697a87,
                -96px -91px 0 -5px #8a92a3;
    z-index: 20;
  }