Created
July 23, 2012 18:28
-
-
Save keithchu/3165250 to your computer and use it in GitHub Desktop.
Deployotron
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Deployotron | |
| * original art: @mrdiec | |
| * code: @catharsis | |
| */ | |
| * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } | |
| body { margin: 10em 15em; } | |
| .robo { | |
| position: relative; | |
| } | |
| .head, .eye, .content { | |
| border: 1px solid #000; | |
| border-radius: 3px; | |
| box-shadow: inset 0 0 3px rgba(0,0,0,.3); | |
| } | |
| .head { | |
| background: #eee; | |
| height: 110px; | |
| position: relative; | |
| width: 250px; | |
| } | |
| .eye-left, .eye-right { | |
| background: #fff; | |
| height: 55px; | |
| position: absolute; top: 12px; | |
| width: 50px; | |
| } | |
| .eye-left { left: 40px; } | |
| .eye-right { right: 40px; } | |
| .eye-left i, .eye-right i { | |
| background: #77868d; | |
| display: block; | |
| height: 22px; | |
| position: absolute; bottom: 0; | |
| width: 28px; | |
| } | |
| .eye-left i { border-bottom-right-radius: 2px; right: 0; } | |
| .eye-right i { border-bottom-left-radius: 2px; left: 0; } | |
| .eye-left i:before, .eye-right i:before { | |
| background: #77868d; | |
| content: ""; | |
| height: 20px; | |
| position: absolute; top: -15px; | |
| width: 18px; | |
| } | |
| .eye-left i:before { right: 0; } | |
| .eye-right i:before { left: 0; } | |
| .neck, .neck:after { | |
| background-color: #eee; | |
| border: 1px solid #000; | |
| border-radius: 0 0 7px 7px; | |
| height: 10px; | |
| position: absolute; | |
| } | |
| .neck { | |
| display: block; | |
| left: 85px; bottom: -10px; | |
| width: 80px; | |
| } | |
| .neck:after { | |
| content: ""; | |
| left: 8px; bottom: -12px; | |
| width: 60px; | |
| } | |
| .content { | |
| background: #d5d5d5; | |
| height: 145px; | |
| position: relative; left: -25px; top: 20px; | |
| width: 300px; | |
| } | |
| .content:before { | |
| background: #fff; | |
| border-left: 1px solid #000; | |
| content: ""; | |
| height: 145px; | |
| position: absolute; right: -18px; top: -1px; | |
| width: 30px; | |
| z-index: 2; | |
| -webkit-transform: skew(10deg); | |
| -moz-transform: skew(10deg); | |
| -o-transform: skew(10deg); | |
| transform: skew(10deg); | |
| } | |
| .content:after { | |
| background: #fff; | |
| border-right: 1px solid #000; | |
| content: ""; | |
| height: 145px; | |
| position: absolute; left: -18px; top: -1px; | |
| width: 30px; | |
| z-index: 2; | |
| -webkit-transform: skew(-10deg); | |
| -moz-transform: skew(-10deg); | |
| -o-transform: skew(-10deg); | |
| transform: skew(-10deg); | |
| } | |
| .medallion { | |
| height: 40px; | |
| position: relative; left: 90px; | |
| width: 120px; | |
| z-index: 3; | |
| } | |
| .pyramid, .pyramid:before, .pyramid:after { | |
| background: #666; | |
| box-shadow: inset 0 0 3px rgba(0,0,0,.6); | |
| display: block; | |
| height: 10px; | |
| position: absolute; | |
| width: 10px; | |
| z-index: 4; | |
| } | |
| .pyramid-top { | |
| left: 55px; | |
| } | |
| .pyramid-top:before { | |
| content: ""; | |
| left: -10px; top: 10px; | |
| } | |
| .pyramid-top:after { | |
| content: ""; | |
| left: 10px; top: 10px; | |
| } | |
| .pyramid-bottom { | |
| left: 35px; top: 20px; | |
| } | |
| .pyramid-bottom:before { | |
| content: ""; | |
| left: 20px; top: -3px; | |
| } | |
| .pyramid-bottom:after { | |
| content: ""; | |
| left: 40px; | |
| } | |
| .circles, .circles:before, .circles:after { | |
| background: #45b3da; | |
| border-radius: 5px; | |
| box-shadow: inset 0 0 3px rgba(0,0,0,.6); | |
| display: block; | |
| height: 10px; | |
| position: absolute; left: 15px; top: 23px; | |
| width: 10px; | |
| z-index: 3; | |
| } | |
| .circles:before { | |
| content: ""; | |
| position: absolute; left: 40px; top: 0; | |
| } | |
| .circles:after { | |
| content: ""; | |
| position: absolute; left: 80px; top: 0; | |
| } | |
| .chestplate { | |
| border-bottom: 1px solid #000; | |
| display: block; | |
| position: absolute; left: 10px; top: 35px; | |
| width: 280px; | |
| z-index: 1; | |
| } | |
| .chestplate:after { | |
| border: 1px solid #000; | |
| border-top-color: #d5d5d5; | |
| content: ""; | |
| height: 35px; | |
| position: absolute; top: 0; left: 64px; | |
| width: 150px; | |
| z-index: 2; | |
| } | |
| .light { | |
| background: #fcd329; | |
| border: 1px solid #7d7d7d; | |
| box-shadow: inset 0 0 15px rgba(0,0,0,.3); | |
| display: block; | |
| height: 20px; | |
| position: absolute; left: 74px; bottom: 25px; | |
| width: 150px; | |
| } | |
| .arms { | |
| height: 90px; | |
| position: absolute; left: -175px; top: 120px; | |
| width: 600px; | |
| z-index: 5; | |
| } | |
| .arms:before { | |
| background: #eee; | |
| border: 1px solid #000; | |
| border-right: none; | |
| box-shadow: inset 0 0 3px rgba(0,0,0,.3); | |
| content: ""; | |
| height: 30px; | |
| position: absolute; left: 147px; top: 35px; | |
| width: 20px; | |
| z-index: 5; | |
| -webkit-transform: skew(-10deg); | |
| -moz-transform: skew(-10deg); | |
| -o-transform: skew(-10deg); | |
| transform: skew(-10deg); | |
| } | |
| .arms:after { | |
| background: #eee; | |
| border: 1px solid #000; | |
| border-left: none; | |
| box-shadow: inset 0 0 3px rgba(0,0,0,.3); | |
| content: ""; | |
| height: 30px; | |
| position: absolute; right: 147px; top: 35px; | |
| width: 20px; | |
| z-index: 5; | |
| -webkit-transform: skew(10deg); | |
| -moz-transform: skew(10deg); | |
| -o-transform: skew(10deg); | |
| transform: skew(10deg); | |
| } | |
| .arm { | |
| background-color: #a5a5a5; | |
| background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.5) 50%); | |
| background-image: -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.5) 50%); | |
| background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.5) 50%); | |
| background-size: 5px; | |
| border: 1px solid #000; | |
| box-shadow: inset 0 0 3px rgba(0,0,0,1); | |
| height: 10px; | |
| position: absolute; | |
| width: 70px; | |
| z-index: 4; | |
| } | |
| .arm-left { | |
| left: 80px; top: 25px; | |
| } | |
| .arm-right { | |
| right: 80px; top: 25px; | |
| } | |
| .hand { | |
| background-color: #7d7d7d; | |
| background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-size: 15px; | |
| border: 1px solid #000; | |
| height: 7px; | |
| position: absolute; top: 18px; | |
| width: 25px; | |
| } | |
| .hand-left { | |
| left: 58px; | |
| -webkit-transform: rotate(30deg) translateZ(0); | |
| -moz-transform: rotate(30deg) translateZ(0); | |
| -o-transform: rotate(30deg) translateZ(0); | |
| transform: rotate(30deg) translateZ(0); | |
| } | |
| .hand-left:before { | |
| background-color: #7d7d7d; | |
| background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-size: 15px; | |
| border: 1px solid #000; | |
| content: ""; | |
| height: 5px; | |
| position: absolute; left: 2px; top: 13px; | |
| width: 25px; | |
| -webkit-transform: rotate(-45deg) translateZ(0); | |
| -moz-transform: rotate(-45deg) translateZ(0); | |
| -o-transform: rotate(-45deg) translateZ(0); | |
| transform: rotate(-45deg) translateZ(0); | |
| } | |
| .hand-left:after { | |
| background-color: #7d7d7d; | |
| background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-size: 15px; | |
| border: 1px solid #000; | |
| content: ""; | |
| height: 5px; | |
| position: absolute; left: 4px; top: -15px; | |
| width: 25px; | |
| -webkit-transform: rotate(55deg) translateZ(0); | |
| -moz-transform: rotate(55deg) translateZ(0); | |
| -o-transform: rotate(55deg) translateZ(0); | |
| transform: rotate(55deg) translateZ(0); | |
| } | |
| .hand-right { | |
| right: 58px; top: 20px; | |
| -webkit-transform: rotate(-22deg) translateZ(0); | |
| -moz-transform: rotate(-22deg) translateZ(0); | |
| -o-transform: rotate(-22deg) translateZ(0) | |
| transform: rotate(-22deg) translateZ(0); | |
| } | |
| .hand-right:before { | |
| background-color: #7d7d7d; | |
| background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-size: 15px; | |
| border: 1px solid #000; | |
| content: ""; | |
| height: 5px; | |
| position: absolute; right: 1px; top: 8px; | |
| width: 25px; | |
| -webkit-transform: rotate(30deg) translateZ(0); | |
| -moz-transform: rotate(30deg) translateZ(0); | |
| transform: rotate(30deg) translateZ(0); | |
| } | |
| .hand-right:after { | |
| background-color: #7d7d7d; | |
| background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%); | |
| background-size: 15px; | |
| border: 1px solid #000; | |
| content: ""; | |
| height: 5px; | |
| position: absolute; right: 10px; top: -12px; | |
| width: 20px; | |
| -webkit-transform: rotate(-65deg) translateZ(0); | |
| -moz-transform: rotate(-65deg) translateZ(0); | |
| -o-transform: rotate(-65deg) translateZ(0); | |
| transform: rotate(-65deg) translateZ(0); | |
| } | |
| .feet { | |
| height: 50px; | |
| margin-top: 21px; | |
| position: absolute; left: -10px; | |
| width: 270px; | |
| } | |
| .foot { | |
| background: #eee; | |
| border: 1px solid #000; | |
| border-radius: 0 0 10px 10px; | |
| height: 50px; | |
| position: absolute; left: 10px; top: -18px; | |
| width: 100px; | |
| } | |
| .foot-right { | |
| left: 160px; | |
| } | |
| .foot-left:before, .foot-right:before { | |
| background: #fff; | |
| border-right: 1px solid #000; | |
| content: ""; | |
| height: 35px; | |
| position: absolute; left: -28px; top: 0; | |
| width: 30px; | |
| z-index: 2; | |
| -webkit-transform: skew(-10deg); | |
| -moz-transform: skew(-10deg); | |
| -o-transform: skew(-10deg); | |
| transform: skew(-10deg); | |
| } | |
| .foot-left:after, .foot-right:after { | |
| background: #fff; | |
| border-left: 1px solid #000; | |
| content: ""; | |
| height: 35px; | |
| position: absolute; right: -28px; top: 0; | |
| width: 30px; | |
| z-index: 2; | |
| -webkit-transform: skew(10deg); | |
| -moz-transform: skew(10deg); | |
| -o-transform: skew(10deg); | |
| transform: skew(10deg) | |
| } | |
| .treads { | |
| background: #999; | |
| background: | |
| -webkit-linear-gradient(-25deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, | |
| -webkit-linear-gradient(-155deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, | |
| -webkit-linear-gradient(-25deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, | |
| -webkit-linear-gradient(-155deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, | |
| rgba(0,0,0,.3); | |
| background: | |
| linear-gradient(-25deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, | |
| linear-gradient(-155deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, | |
| linear-gradient(-25deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, | |
| linear-gradient(-155deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, | |
| rgba(0,0,0,.3); | |
| background-size: 10px 30px; | |
| border-top: 1px solid #000; | |
| border-radius: 0 0 10px 10px; | |
| box-shadow: inset 0 0 3px rgba(0,0,0,.75); | |
| display: block; | |
| height: 10px; | |
| position: absolute; bottom: 0; | |
| width: 98px; | |
| } | |
| .treads:before { | |
| content: ""; | |
| border-top: 1px solid #999; | |
| box-shadow: 0 -1px 1px rgba(0,0,0,.2); | |
| height: 1px; | |
| position: absolute; left: 15px; top: -25px; | |
| width: 70px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="robo"> | |
| <header class="head"> | |
| <p class="eye eye-left"><i></i></p> | |
| <p class="eye eye-right"><i></i></p> | |
| <span class="neck"></span> | |
| </header> | |
| <section class="content"> | |
| <p class="medallion"> | |
| <i class="pyramid pyramid-top"></i> | |
| <i class="pyramid pyramid-bottom"></i> | |
| <u class="circles"></u> | |
| </p> | |
| <b class="chestplate"></b> | |
| <em class="light"></em> | |
| </section> | |
| <aside class="arms"> | |
| <p class="arm arm-left"></p> | |
| <p class="hand hand-left"></p> | |
| <p class="arm arm-right"></p> | |
| <p class="hand hand-right"></p> | |
| </aside> | |
| <footer class="feet"> | |
| <p class="foot foot-left"><i class="treads"></i></p> | |
| <p class="foot foot-right"><i class="treads"></i></p> | |
| </footer> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Rendered (on dabblet): http://dabblet.com/gist/3165250