View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
Pure CSS3 Classic Train
Pure CSS3 Classic Train
No images. Believe me! © 5 December 2011 -
Taufik Nurrohman
/** * 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 rgba(255,255,255,0.3); } #main-fog { position:absolute; top:30px; left:165px; width:50px; height:60px; background-color:#222; background-image:-webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); -webkit-border-bottom-left-radius:50px 10px; -webkit-border-bottom-right-radius:50px 10px; -moz-border-radius-bottomleft:50px 10px; -moz-border-radius-bottomright:50px 10px; border-bottom-left-radius:50px 10px; border-bottom-right-radius:50px 10px; } #main-fog:before { content:""; position:absolute; bottom:100%; left:-2px; width:54px; height:20px; background-color:#222; background-image:-webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:linear-gradient(left,#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; } .alt-fog { position:absolute; top:60px; left:255px; width:37px; height:30px; background-color:#222; background-image:-webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000); -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; -webkit-border-bottom-left-radius:50px 10px; -webkit-border-bottom-right-radius:50px 10px; -moz-border-radius-topleft:50px; -moz-border-radius-topright:50px; -moz-border-radius-bottomleft:50px 10px; -moz-border-radius-bottomright:50px 10px; border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px 10px; border-bottom-right-radius:50px 10px; -webkit-box-shadow:inset 0px 4px 3px #666; -moz-box-shadow:inset 0px 4px 3px #666; box-shadow:inset 0px 4px 3px #666; } .alt-fog:before,.alt-fog:after { content:""; position:absolute; bottom:-5px; left:15px; width:5px; height:15px; 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-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0px 0px 3px #000; -moz-box-shadow:0px 0px 3px #000; box-shadow:0px 0px 3px #000; } .alt-fog:after { left:22px; } .alt-fog.nth2 {left:335px;} .alt-fog.nth3 {left:420px;} .alt-fog.nth4 {left:500px;} #front { position:absolute; top:78px; left:123px; width:10px; height:97px; background-color:#333; -webkit-border-top-left-radius:50px 200px; -webkit-border-bottom-left-radius:50px 200px; -moz-border-radius-topleft:50px 200px; -moz-border-radius-bottomleft:50px 200px; border-top-left-radius:50px 200px; border-bottom-left-radius:50px 200px; -webkit-box-shadow:inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000; -moz-box-shadow:inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000; box-shadow:inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000; } #front1,#front1:before,#front1:after { position:absolute; top:70px; left:135px; width:17px; height:110px; 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:0px 0px 3px #000; -moz-box-shadow:0px 0px 3px #000; box-shadow:0px 0px 3px #000; } #front1:before { content:""; left:auto; right:100%; top:2px; width:2px; height:120px; } #front1:after { content:""; right:auto; left:100%; top:2px; width:7px; height:120px; } #bot { position:absolute; top:180px; left:135px; width:1000px; height:110px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000; } #bot:before,#bot:after { content:""; position:absolute; top:15px; left:170px; width:170px; height:30px; z-index:10; 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 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000; -moz-box-shadow:inset 4px 0px 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000; box-shadow:inset 4px 0px 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000; } #bot:after { top:45px; } #lamp { position:absolute; bottom:100%; left:5px; width:4px; height:60px; background-color:#666; background-image:-webkit-linear-gradient(45deg,#666,#222,#999,#666); background-image:-moz-linear-gradient(45deg,#666,#222,#999,#666); background-image:-ms-linear-gradient(45deg,#666,#222,#999,#666); background-image:-o-linear-gradient(45deg,#666,#222,#999,#666); background-image:linear-gradient(45deg,#666,#222,#999,#666); -webkit-box-shadow:3px 1px 2px #000; -moz-box-shadow:3px 1px 2px #000; box-shadow:3px 1px 2px #000; } #lamp:before { content:""; position:absolute; right:100%; top:0px; width:4px; height:20px; background:yellow; background-image:-webkit-radial-gradient(left,circle,#fff,yellow,#666); background-image:-moz-radial-gradient(left,circle,#fff,yellow,#666); background-image:-ms-radial-gradient(left,circle,#fff,yellow,#666); background-image:-o-radial-gradient(left,circle,#fff,yellow,#666); background-image:radial-gradient(left,circle,#fff,yellow,#666); -webkit-border-top-left-radius:10px 30px; -webkit-border-bottom-left-radius:10px 30px; -moz-border-radius-topleft:10px 30px; -moz-border-radius-bottomleft:10px 30px; border-top-left-radius:10px 30px; border-bottom-left-radius:10px 30px; } #lamp:after { content:""; position:absolute; left:100%; top:2px; width:12px; height:16px; background-color:#222; background-image:-webkit-linear-gradient(top,#666,#222,#999,#666); background-image:-moz-linear-gradient(top,#666,#222,#999,#666); background-image:-ms-linear-gradient(top,#666,#222,#999,#666); background-image:-o-linear-gradient(top,#666,#222,#999,#666); background-image:linear-gradient(top,#666,#222,#999,#666); -webkit-box-shadow:3px 4px 2px #000; -moz-box-shadow:3px 4px 2px #000; box-shadow:3px 4px 2px #000; } #longan { position:absolute; top:200px; left:172px; width:870px; height:100px; background-color:#111; -webkit-box-shadow:inset 0px 7px 3px #000,inset 0px 1px 7px #000,inset 0px 7px 15px #000; -moz-box-shadow:inset 0px 7px 3px #000,inset 0px 7px 7px #000,inset 0px 7px 15px #000; box-shadow:inset 0px 7px 3px #000,inset 0px 7px 7px #000,inset 0px 7px 15px #000; -webkit-border-radius:30px / 10px; -moz-border-radius:30px / 10px; border-radius:30px / 10px; } #room { position:absolute; top:40px; right:140px; width:350px; height:125px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; } #room:before { content:"110"; position:absolute; top:15px; left:25px; font:bold 28px 'Prisoner SF',Courier,Monospace; color:rgba(255,255,255,0.4); } #roof { position:absolute; top:30px; right:130px; width:370px; height:20px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; } #roof2 { position:absolute; top:20px; right:100px; width:430px; height:20px; background-color:#222; background-image:-webkit-linear-gradient(top,#000,#222,#111,#000); background-image:-moz-linear-gradient(top,#000,#222,#111,#000); background-image:-ms-linear-gradient(top,#000,#222,#111,#000); background-image:-o-linear-gradient(top,#000,#222,#111,#000); background-image:linear-gradient(top,#000,#222,#111,#000); -webkit-box-shadow:0px 4px 4px #000; -moz-box-shadow:0px 4px 4px #000; box-shadow:0px 4px 4px #000; -webkit-border-bottom-right-radius:60px 20px; -moz-border-radius-bottomright:60px 20px; border-bottom-right-radius:60px 20px; } #roof2:before,#roof2:after { content:""; position:absolute; bottom:-2px; left:12px; width:5px; height:2px; background-color:#333; border:1px solid #444; -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; } #roof2:after { left:auto; right:15px; height:5px; } .hole { margin-top:25px; margin-right:20px; width:40px; height:75px; background-color:#111; border:2px solid #222; -webkit-border-radius:20px 20px 0px 0px; -moz-border-radius:20px 20px 0px 0px; border-radius:20px 20px 0px 0px; -webkit-box-shadow:inset 0px 1px 7px #000,0px 0px 1px rgba(255,255,225,0.4); -moz-box-shadow:inset 0px 1px 7px #000,0px 0px 1px rgba(255,255,225,0.4); box-shadow:inset 0px 1px 7px #000,0px 0px 1px rgba(255,255,225,0.4); float:right; display:inline; position:relative; } .hole.nth2 { margin-right:10px; } .hole:before,.hole:after { content:""; position:absolute; top:100%; left:2px; display:block; width:12px; height:2px; margin-top:7px; background-color:#666; -webkit-box-shadow:0px 1px 1px #000; -moz-box-shadow:0px 1px 1px #000; box-shadow:0px 1px 1px #000; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .hole:after { margin-top:11px; } #buritan { position:absolute; top:175px; right:80px; width:40px; height:97px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000; } #fence { position:absolute; top:140px; right:80px; width:70px; height:40px; } #fence ul li { float:right; display:inline; width:4px; height:40px; padding:0 0 0 0; margin:0px 4px 0px; background-image:-webkit-linear-gradient(left,#666,#ccc,#333,#999,#333); background-image:-moz-linear-gradient(left,#666,#ccc,#333,#999,#333); background-image:-ms-linear-gradient(left,#666,#ccc,#333,#999,#333); background-image:-o-linear-gradient(left,#666,#ccc,#333,#999,#333); background-image:linear-gradient(left,#666,#ccc,#333,#999,#333); -webkit-box-shadow:0px 0px 3px #000; -moz-box-shadow:0px 0px 3px #000; box-shadow:0px 0px 3px #000; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } #fence ul { position:relative; height:40px; } #fence ul:before { content:""; position:absolute; bottom:100%; left:-2px; width:78px; height:10px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; } #fence ul:after { content:""; position:absolute; top:100%; left:-2px; margin-top:-7px; width:78px; height:10px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; } #metal { position:absolute; top:100px; left:272px; width:670px; height:75px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#111 0%,#000 20%,#000 21%,#333 40%,#000 50%,#222 51%,#111 60%,#000 60%,#111 61%,#000 100%); background-image:-moz-linear-gradient(45deg,#111 0%,#000 20%,#000 21%,#333 40%,#000 50%,#222 51%,#111 60%,#000 60%,#111 61%,#000 100%); background-image:-ms-linear-gradient(45deg,#111 0%,#000 20%,#000 21%,#333 40%,#000 50%,#222 51%,#111 60%,#000 60%,#111 61%,#000 100%); background-image:-o-linear-gradient(45deg,#111 0%,#000 20%,#000 21%,#333 40%,#000 50%,#222 51%,#111 60%,#000 60%,#111 61%,#000 100%); background-image:linear-gradient(45deg,#111 0%,#000 20%,#000 21%,#333 40%,#000 50%,#222 51%,#111 60%,#000 60%,#111 61%,#000 100%); -webkit-box-shadow:inset 0px 0px 1px rgba(255,255,255,0.3),0px 1px 3px #000; -moz-box-shadow:inset 0px 0px 1px rgba(255,255,255,0.3),0px 1px 3px #000; box-shadow:inset 0px 0px 1px rgba(255,255,255,0.3),0px 1px 3px #000; -webkit-border-radius:3px 0px 0px 0px; -moz-border-radius:3px 0px 0px 0px; border-radius:3px 0px 0px 0px; } #metal .inner { width:657px; height:64px; border:1px dotted #666; margin-top:5px; margin-left:5px; } #title { position:absolute; top:100px; left:292px; width:642px; height:75px; text-align:left; font:normal 11px Georgia,Times,Serif; color:#777; text-shadow:0px -1px 0px #000; } #title h2 { font:bold 22px 'Book Antiqua',Times,Serif; color:#666; text-transform:uppercase; margin:10px 0px 5px; padding:0px 0px 5px; border-bottom:1px dotted #666; } .foot { position:absolute; top:210px; left:115px; width:50px; height:100px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 2px #000; } .foot.right { left:auto; right:130px; width:78px; -webkit-border-bottom-left-radius:50px 10px; -moz-border-radius-bottomleft:50px 10px; border-bottom-left-radius:50px 10px; } #moncong { position:absolute; top:155px; left:75px; width:0px; height:0px; border-top:60px solid transparent; border-left:40px solid transparent; border-bottom:90px solid #222; } #moncong-bot { position:absolute; top:277px; left:70px; width:50px; height:37px; background-color:#222; background-image:-webkit-linear-gradient(-45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(-45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(-45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(-45deg,#000,#222,#111,#000); background-image:linear-gradient(-45deg,#000,#222,#111,#000); -webkit-box-shadow:0px 1px 4px #000; -moz-box-shadow:0px 1px 4px #000; box-shadow:0px 1px 4px #000; -webkit-border-bottom-right-radius:60px 20px; -moz-border-radius-bottomright:60px 20px; border-bottom-right-radius:60px 20px; } #moncong-bot:before { content:""; width:20px; height:47px; border:3px solid #666; -webkit-border-radius:7px 7px 0px 0px; -moz-border-radius:7px 7px 0px 0px; border-radius:7px 7px 0px 0px; position:absolute; bottom:7px; left:2px; -webkit-box-shadow:inset 0px 0px 3px #000,0px 0px 3px #000; -moz-box-shadow:inset 0px 0px 3px #000,0px 0px 3px #000; box-shadow:inset 0px 0px 3px #000,0px 0px 3px #000; } #moncong-bot:after { content:""; position:absolute; bottom:4px; left:-2px; width:35px; height:5px; background-color:#999; background-image:-webkit-linear-gradient(45deg,#666,#ccc,#333,#999,#333); background-image:-moz-linear-gradient(45deg,#666,#ccc,#333,#999,#333); background-image:-ms-linear-gradient(45deg,#666,#ccc,#333,#999,#333); background-image:-o-linear-gradient(45deg,#666,#ccc,#333,#999,#333); background-image:linear-gradient(45deg,#666,#ccc,#333,#999,#333); border:2px solid rgba(255,255,255,0.2); -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .stair { position:absolute; top:205px; left:120px; width:30px; height:110px; } .stair.right { left:auto; right:170px; } .stair.left,.stair.left .hand { height:115px; } .stair .hand { width:5px; height:110px; background-image:-webkit-linear-gradient(left,#666,#ccc,#333,#999,#333); background-image:-moz-linear-gradient(left,#666,#ccc,#333,#999,#333); background-image:-ms-linear-gradient(left,#666,#ccc,#333,#999,#333); background-image:-o-linear-gradient(left,#666,#ccc,#333,#999,#333); background-image:linear-gradient(left,#666,#ccc,#333,#999,#333); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:inset 0px 2px 1px #ccc,0px 0px 3px #000; -moz-box-shadow:inset 0px 2px 1px #ccc,0px 0px 3px #000; box-shadow:inset 0px 2px 1px #ccc,0px 0px 3px #000; float:left; } .stair .hand.right { float:right; } .stair ul { margin:0 0 0 0; padding:0 0 0 0; } .stair ul li { display:block; height:5px; margin:4px 0px 6px; padding:0px; background-image:-webkit-linear-gradient(top,#666,#ccc,#333,#999,#333); background-image:-moz-linear-gradient(top,#666,#ccc,#333,#999,#333); background-image:-ms-linear-gradient(top,#666,#ccc,#333,#999,#333); background-image:-o-linear-gradient(top,#666,#ccc,#333,#999,#333); background-image:linear-gradient(top,#666,#ccc,#333,#999,#333); -webkit-box-shadow:0px 0px 3px #000; -moz-box-shadow:0px 0px 3px #000; box-shadow:0px 0px 3px #000; } /* WHEEL */ .rodaout { width:130px; height:130px; background-color:#222; position:absolute; top:205px; left:187px; -webkit-border-radius:400px; -moz-border-radius:400px; border-radius:400px; -moz-box-shadow:4px -4px 3px #000; -box-box-shadow:4px -4px 3px #000; box-shadow:4px -4px 3px #000; } .rodaout .inner { position:relative; top:3px; left:3px; border:2px solid #6A210C; width:120px; height:120px; -webkit-box-shadow:0px 0px 1px #000; -moz-box-shadow:0px 0px 1px #000; box-shadow:0px 0px 1px #000; -webkit-border-radius:400px; -moz-border-radius:400px; border-radius:400px; } .rodaout .in-in { position:relative; top:0px; left:0px; width:100px; height:100px; border:10px solid #333; -webkit-border-radius:400px; -moz-border-radius:400px; border-radius:400px; -webkit-box-shadow:inset 0px 1px 5px #000,0px 0px 2px #000; -moz-box-shadow:inset 0px 1px 5px #000,0px 0px 2px #000; box-shadow:inset 0px 1px 5px #000,0px 0px 2px #000; } .grid { position:absolute; top:0px; left:47px; width:3px; height:98px; background-color:#666; border:1px solid #777; -webkit-box-shadow:0px 0px 1px #000; -moz-box-shadow:0px 0px 1px #000; box-shadow:0px 0px 1px #000; -webkit-border-radius:5px / 70px; -moz-border-radius:5px / 70px; border-radius:5px / 70px; } .grid.r2 { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); top:0px; left:47px; } .grid.r3 { -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); top:0px; left:47px; } .grid.r4 { -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); top:0px; left:48px; } .grid.r5 { -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); -ms-transform:rotate(120deg); -o-transform:rotate(120deg); transform:rotate(120deg); top:0px; left:47px; } .grid.r6 { -webkit-transform:rotate(150deg); -moz-transform:rotate(150deg); -ms-transform:rotate(150deg); -o-transform:rotate(150deg); transform:rotate(150deg); } .hub { position:absolute; top:40px; left:40px; width:10px; height:10px; background-color:#666; border:5px solid #777; -webkit-box-shadow:0px 0px 2px #000; -moz-box-shadow:0px 0px 2px #000; box-shadow:0px 0px 2px #000; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .hub:before { content:""; width:30px; height:30px; background-color:#666; border:3px double #999; -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; -webkit-border-radius:7px 20px; -moz-border-radius:7px 20px; border-radius:7px 20px; position:absolute; top:2px; left:2px; } .hub:after { content:""; width:20px; height:5px; background-color:#333; border:2px solid #666; -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; position:absolute; top:10px; right:-7px; } .rodaout.nth2 {left:327px;} .rodaout.nth3 {left:467px;} .rodaout.nth4 {left:607px;} .rodaout.nth5 {left:747px;} .rodaout.nth6 {left:887px;} /* DETAILS */ #grouper { position:absolute; top:225px; left:190px; width:800px; height:90px; } #grouper:before { content:""; position:absolute; top:0px; left:0px; width:100px; height:80px; background-color:#666; background-image:-webkit-linear-gradient(-45deg,#666,#ccc,#333,#999,#333); background-image:-moz-linear-gradient(-45deg,#666,#ccc,#333,#999,#333); background-image:-ms-linear-gradient(-45deg,#666,#ccc,#333,#999,#333); background-image:-o-linear-gradient(-45deg,#666,#ccc,#333,#999,#333); background-image:linear-gradient(-45deg,#666,#ccc,#333,#999,#333); border:5px solid #666; -webkit-border-radius:0px 50px 50px 0px; -moz-border-radius:0px 50px 50px 0px; border-radius:0px 50px 50px 0px; -webkit-box-shadow:4px 1px 7px #000; -moz-box-shadow:4px 1px 7px #000; box-shadow:inset 0px 0px 5px #000,4px 1px 7px #000; } #grouper .strong { position:absolute; bottom:12px; left:87px; height:4px; background-color:#666; background-image:-webkit-linear-gradient(-45deg,#666,#ccc,#333,#999,#333); background-image:-moz-linear-gradient(-45deg,#666,#ccc,#333,#999,#333); background-image:-ms-linear-gradient(-45deg,#666,#ccc,#333,#999,#333); background-image:-o-linear-gradient(-45deg,#666,#ccc,#333,#999,#333); background-image:linear-gradient(-45deg,#666,#ccc,#333,#999,#333); border-top:1px solid #ccc; border-bottom:1px solid #999; width:130px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.7),inset 0px -1px 0px rgba(0,0,0,0.7),0px 1px 3px #000; -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.7),inset 0px -1px 0px rgba(0,0,0,0.7),0px 1px 3px #000; box-shadow:inset 0px 1px 0px rgba(0,0,0,0.7),inset 0px -1px 0px rgba(0,0,0,0.7),0px 1px 3px #000; } #grouper .strong:before,#grouper .strong:after { content:""; width:10px; height:10px; background-color:#333; border:3px double #666; -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; position:absolute; top:-6px; left:-2px; } #grouper .strong:after { left:auto; right:-2px; } #grouper .strong.nth2 {left:227px;} #grouper .strong.nth3 {left:368px;} #grouper .strong.nth4 {left:508px;} #grouper .strong.nth5 {left:648px;} #grouper .end { position:absolute; bottom:22px; right:0px; width:20px; height:20px; background-color:#666; background-image:-webkit-radial-gradient(center,cover,#aaa,#333); background-image:-moz-radial-gradient(center,cover,#aaa,#333); background-image:-ms-radial-gradient(center,cover,#aaa,#333); background-image:-o-radial-gradient(center,cover,#aaa,#333); background-image:radial-gradient(center,cover,#aaa,#333); border:3px double #999; -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .vertical { position:absolute; top:180px; left:212px; width:5px; height:50px; background-image:-webkit-linear-gradient(top,#666,#ccc,#333,#999,#333); background-image:-moz-linear-gradient(top,#666,#ccc,#333,#999,#333); background-image:-ms-linear-gradient(top,#666,#ccc,#333,#999,#333); background-image:-o-linear-gradient(top,#666,#ccc,#333,#999,#333); background-image:linear-gradient(top,#666,#ccc,#333,#999,#333); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:inset 0px 2px 1px #ccc,0px 0px 3px #000; -moz-box-shadow:inset 0px 2px 1px #ccc,0px 0px 3px #000; box-shadow:inset 0px 2px 1px #ccc,0px 0px 3px #000; } .vertical.two { left:218px; } #machine-box { position:absolute; top:175px; left:160px; width:127px; height:140px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000; -webkit-border-bottom-right-radius:50px 20px; -moz-border-radius-bottomright:50px 20px; border-bottom-right-radius:50px 20px; } #machine-box:before { content:""; position:absolute; top:10px; right:-10px; width:94px; height:36px; background-color:#222; background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000); background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000); background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000); background-image:-o-linear-gradient(45deg,#000,#222,#111,#000); background-image:linear-gradient(45deg,#000,#222,#111,#000); -webkit-box-shadow:inset 4px 4px 0px rgba(255,255,255,0.2),inset -4px -4px 0px rgba(255,255,255,0.2),0px 1px 7px #000; -moz-box-shadow:inset 4px 4px 0px rgba(255,255,255,0.2),inset -4px -4px 0px rgba(255,255,255,0.2),0px 1px 7px #000; box-shadow:inset 4px 4px 0px rgba(255,255,255,0.2),inset -4px -4px 0px rgba(255,255,255,0.2),0px 1px 7px #000; border:2px solid #222; } ul.stripe-stripe { position:absolute; margin:0 0 0 0; padding:0 0 0 0; width:70px; } ul.stripe-stripe li { display:block; height:1px; margin:0px 0px 2px; background-color:#444; } ul.stripe-stripe.one { top:235px; left:180px; } ul.stripe-stripe.two { top:60px; right:320px; padding:3px 7px; -webkit-box-shadow:0px 1px 2px #000; -moz-box-shadow:0px 1px 2px #000; box-shadow:0px 1px 2px #000; } ul.stripe-stripe.one:before,ul.stripe-stripe.one:after { content:""; width:10px; height:10px; background-color:#333; border:3px double #666; -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; position:absolute; top:30px; left:-5px; } ul.stripe-stripe.one:after { top:45px; } ul.stripe-stripe.two:before,ul.stripe-stripe.two:after { content:""; width:15px; height:2px; background-color:#111; border:3px double #555; -webkit-box-shadow:0px 1px 3px #000; -moz-box-shadow:0px 1px 3px #000; box-shadow:0px 1px 3px #000; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; position:absolute; top:0px; left:100%; margin-left:10px; } ul.stripe-stripe.two:after { top:11px; } .clear { clear:both; } @-webkit-keyframes fading {from {opacity:0;} to {opacity:1;}} @-moz-keyframes fading {from {opacity:0;} to {opacity:1;}} @-ms-keyframes fading {from {opacity:0;} to {opacity:1;}} @-o-keyframes fading {from {opacity:0;} to {opacity:1;}} @keyframes fading {from {opacity:0;} to {opacity:1;}} #wrapper { -webkit-animation:fading 1s; -moz-animation:fading 1s; -ms-animation:fading 1s; -o-animation:fading 1s; animation:fading 1s; } /* HIGHLIGHT! */ #wrapper *:hover {outline:1px solid red;}
Pop out
Help
About
×
×