A Pen by Amir Naeem.

index.html

<div></div>

One-div-CSS-camera.markdown

One div CSS camera

Testing out CSS capabilities for a single div. This is my first attempt at creating CSS art.

Forked from Adam Towle's Pen One div CSS camera.

A Pen by Amir Naeem on CodePen.

License.

style.css

body {
  background: #69bcf3 ;
}

div {
background: 
  linear-gradient(to right, #2f231a 0%,#726154 6%,#53463a 10%,#3c3228 15%,#3c3228 85%,#53463a 90%,#726154 94%,#2f231a 100%); /* W3C */
  
  box-shadow: 0 3px 4px -2px rgba(0,0,0,0.6), 0 10px 24px -2px rgba(0,0,0,0.4);
  
  border-bottom: 20px solid #ccc;
  border-left: 0;
  border-right: 0;
  border-image: linear-gradient(to right, #666, #fcfcfc 6%, #ccc 10%, #eee 15%, #eee 41%, #eee 85%, #ccc 90%, #fcfcfc 93%, #666 100%) 1% stretch;
  border-top: 30px solid #ccc;
  margin: auto;
  height:200px;
  width: 400px;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  zoom: 75%;
}
div:before {
  background-image: 
    
    radial-gradient(circle at 50% 50%, #111 4%, #444 5%, #000 6%, #000 10%, #444 11%, #111 12%, #444 13%, #000 14%, #222 15%, #000 17%, #222 18%, #000 20%, rgba(255,255,255,0) 20%), 

    linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 50%, #0a0a0a 21%, #0a0a0a 24%, #222 24%, #222 34%, #111 36%, #333 36%, #222 48%, #111 50%, #222 52%, rgba(0,0,0,0) 44%),
    
    linear-gradient(20deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 50%, #fff 20%, #fcfcfc 53%, #aaa 53%, #aaa 55%, #fcfcfc 55%, #fcfcfc 58%, #aaa 58%, #aaa 60%, #fcfcfc 60%, #fcfcfc 62%, #aaa 62%, #aaa 64%, #fcfcfc 64%, #fcfcfc 66%, #aaa 68%, #fcfcfc 68%, #fcfcfc 69%, #686866 70%);
  
  box-shadow: 
    -68px -138px 0 -119px #eee, -66px -136px 0 -115px #444, -66px -136px 0 -112px #111;
  
  border-width: 30px;
  border-radius: 200px;
  content:'';
  display: inline-block;
  margin-top: -10px;
  margin-left: 130px;
  height:240px;
  width: 240px;
  position: absolute;
}
div:after {
  background-image: 
    /* button one */
    linear-gradient(to right, rgba(0,0,0,0) 2%, #c9c9c9 2%, #c9c9c9 3%, #797b7a 4%, #d1d1d1 4%, #d1d1d1 5%, #797b7a 6%, #e0e0e0 6%, #e0e0e0 7%, #797b7a 8%, #efefef 8%, #efefef 9%, #797b7a 10%, #faffff 10%, #faffff 11%, #797b7a 12%, #efefef 12%, #efefef 13%, #797b7a 14%, #e0e0e0 14%, #e0e0e0 15%, #797b7a 16%, #d1d1d1 16%, #d1d1d1 17%, #797b7a 17%, #c9c9c9 18%, #c9c9c9 19%, rgba(0,0,0,0) 19%,
    /* button twp */
    rgba(0,0,0,0) 22%, #c9c9c9 22%, #c9c9c9 23%, #797b7a 24%, #d1d1d1 24%, #d1d1d1 25%, #797b7a 26%, #e0e0e0 26%, #e0e0e0 27%, #797b7a 28%, #efefef 28%, #efefef 29%, #797b7a 30%, #faffff 30%, #faffff 31%, #797b7a 32%, #efefef 32%, #efefef 33%, #797b7a 34%, #e0e0e0 34%, #e0e0e0 35%, #797b7a 36%, #d1d1d1 36%, #d1d1d1 37%, #797b7a 37%, #c9c9c9 38%, #c9c9c9 39%, rgba(0,0,0,0) 39%,
    /* section three */
    rgba(0,0,0,0) 42%, #eee 42%, #eee 87%, #ccc 91%, #fcfcfc 94%, #666 100%);
  
  border-width: 30px;
  content:'';
  display: inline-block;
  height:220px;
  width: 400px;
  position: absolute;
  top: -42px;
  z-index: -1;
}