Cool Pure CSS3 Classic Train
Just a simple tip to create a complex picture with CSS: Make sure you create an outer element with relative position, then set all the elements in it with absolute positioning. I always succeed with it and never had a problem with margin. Don't forget to add animation effect when the page is being loaded with CSS Animation. About gradient... just make sure you know about perspective in general first :) Design By Taufiq Nurrohman
HTML
<div id="wrapper">
<div id="pipe"></div>
<div id="main-fog"></div>
<div class="alt-fog nth1"></div>
<div class="alt-fog nth2"></div>
<div class="alt-fog nth3"></div>
<div class="alt-fog nth4"></div>
<div id="front"></div>
<div id="front1"></div>
<div id="bot">
<div id="lamp"></div>
</div> <!-- bot -->
<div id="longan"></div>
<div id="buritan"></div>
<div id="moncong"></div>
<div id="moncong-bot"></div>
<div id="room">
<div class="hole"></div>
<div class="hole nth2"></div>
<div class="clear"></div>
</div>
<div id="roof"></div>
<div id="roof2"></div>
<div id="metal"><div class="inner"></div></div>
<div id="fence">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="title">
<h2>Pure CSS3 Classic Train</h2>
No images. Believe me! © 14 Februari 2014 - <a href="https://plus.google.com/105343109942045056844/about">PalmaHutabarat</a>
</div>
<div class="foot left"></div>
<div class="foot right"></div>
<div class="stair left">
<div class="hand left"></div>
<div class="hand right"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="clear"></div>
</div>
<div class="stair right">
<div class="hand left"></div>
<div class="hand right"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="clear"></div>
</div>
<div class="rodaout nth1"><div class="inner"><div class="in-in">
<div class="grid r1"></div>
<div class="grid r2"></div>
<div class="grid r3"></div>
<div class="grid r4"></div>
<div class="grid r5"></div>
<div class="grid r6"></div>
<div class="hub"></div>
</div></div></div>
<div class="rodaout nth2"><div class="inner"><div class="in-in">
<div...CSS
/**
* Pure CSS3 Classic Train by Taufik Nurrohman
* On:5 December 2011
* URL:http://hompimpaalaihumgambreng.blogspot.com/
*/
* {
margin:0px;
padding:0px;
list-style:none;
}
body {
background-color:#eee;
text-align:center;
}
a {
color:#ddd;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#wrapper {
background-color:#ddd;
border:7px solid white;
border-bottom-width:18px;
width:1250px;
height:370px;
margin:50px auto 30px;
position:relative;
-webkit-box-shadow:0px 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 7px rgba(0,0,0,0.2);
box-shadow:0px 1px 7px rgba(0,0,0,0.2);
}
/* BODY */
#pipe {
position:absolute;
top:80px;
left:145px;
width:960px;
height:100px;
background-color:#222;
background-image:-webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
-webkit-box-shadow:inset 4px 0px 3px #000;
-moz-box-shadow:inset 4px 0px 3px #000;
box-shadow:inset 4px 0px 3px #000;
}
#pipe:before {
content:"";
position:absolute;
top:0px;
left:75px;
width:4px;
height:100px;
border:6px double #000;
border-top-width:0px;
border-bottom-width:0px;
-webkit-box-shadow:1px 0px 0px rgba(255,255,255,0.3),-1px 0px 0px rgba(255,255,255,0.3),inset 1px 0px 0px rgba(255,255,255,0.3),inset -1px 0px 0px rgba(255,255,255,0.3);
-moz-box-shadow:1px 0px 0px rgba(255,255,255,0.3),-1px 0px 0px rgba(255,255,255,0.3),inset 1px 0px 0px rgba(255,255,255,0.3),inset -1px 0px 0px rgba(255,255,255,0.3);
box-shadow:1px 0px 0px rgba(255,255,255,0.3),-1px 0px 0px rgba(255,255,255,0.3),inset 1px 0px 0px rgba(255,255,255,0.3),inset -1px 0px 0px...