possible to create 3D lighting effect with CSS? - css

Question

Here's an image I'd like to recreate with HTML/CSS:
The center gradient is easy enough, as are the two rings (a border around the center, and a div around that div that has its own border). The outside shadow on the left seems simple enough as well.
Here's my best approximation so far (with a matching fiddle):
<div id="youedge">
<div id="youlight" class="round border radialgradientbg">
</div>
</div>
#youedge {
border:30px solid #888;
border-radius:190px;
width:190px;height:190px;margin:50px;
box-shadow:-30px 0 0 #555;
}
#youlight { width:150px; height:150px; background-color:#2b0c0f; }
.round { border-radius:190px; }
.border { border:20px solid #777; }
body { background-color:#999; }
.radialgradientbg {
background: -moz-radial-gradient(center, ellipse cover, #4c1113 0%, #16040a 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4c1113), color-stop(100%,#16040a)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #4c1113 0%,#16040a 100%); /* Chrome10+,Safari5.1+ */
}
What I can't figure out is the 3D lighting effects on the two gray borders around the center. Is there a way to accomplish this in CSS?

Answer 1

You could do it with a single element and using :before and :after along with linear-gradient and box-shadow..
The idea is to put two circles behind the main element with opposite linear gradient backgrounds..
.circle-3d {
position: relative;
width: 150px;
height: 150px;
background: black;
border-radius: 50%;
margin:2em;
}
.circle-3d:before {
position: absolute;
content: '';
left: -20px;
top: -20px;
bottom: -20px;
right: -20px;
background: linear-gradient(90deg, #666, #ccc);
border-radius: 50%;
z-index: -2;
box-shadow: -20px 0 10px -5px #000;
}
.circle-3d:after {
position: absolute;
left: -10px;
top: -10px;
bottom: -10px;
right: -10px;
background: linear-gradient(270deg, #222, #eee);
content: '';
border-radius: 50%;
z-index: -1;
}
<div class="circle-3d"></div>