Pure CSS3 Classic Train

25 April 2012

no comments :(

Pure CSS3 Classic Train from MOZILLA DEVELOPER NETWORK, Talking about CSS creativity this Realistic classic train made with pure CSS3 By Taufik great pice of art.

It’s like one of those things you have to see :-)

Here is an example of what was used in the pipe section

#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 rgba(255,255,255,0.3);
}

#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 rgba(255,255,255,0.3);

}