create cylinder shape in pure css 3d
there are some advanced examples like these:
http://x.dtott.com/3d/
http://cssdeck.com/labs/pure-css-3d-primitives
and some useful CSS shapes like these:
http://css-tricks.com/examples/ShapesOfCSS/
personally I built this simple one HTML
<div class="tank">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
and CSS
.tank{
position:relative;
margin:50px;
}
.tank .middle{
width:120px;
height:180px;
background-color:#444;
position:absolute;
}
.tank .top{
width: 120px;
height: 50px;
background-color:#666;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position:absolute;
top:-25px;
}
.tank .bottom{
width: 120px;
height: 50px;
background-color:#444;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position:absolute;
top:155px;
box-shadow:0px 0px 10px rgba(0,0,0,0.75)
}
and you can see a DEMO
There might be a couple of different aproaches on your problem.
The first (and simplest) one would be to have multiple stacked circles that would give you the impression of a cylinder.
But who wants hundreds of div
s in a page just to render a simple graphic module? You can use multiple box-shadow
values on a single element to simulate multiple circles that eventually simulates the cylinder:
div {
box-shadow: black 0px 0px 1px,
black 1px 1px 1px,
black 2px 2px 1px,
...
black 99px 99px 1px,
black 100px 100px 1px;
}
Here's a fiddle with this example: http://jsfiddle.net/gion_13/nDCme/.