Skip to content

Instantly share code, notes, and snippets.

@joshamburn

joshamburn/Star-Wars-Storm-Trooper-in-pure-CSS.markdown

Created August 11, 2014 19:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joshamburn/7fdd7c286a50ed6cfb6c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joshamburn/7fdd7c286a50ed6cfb6c to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Aleks.
Raw
index.haml
#head-1L
#head-1R
#head-2L
#head-2R
#head-3L
#head-3R
#black-ears
#earrings
#white-ears
#ear-L
#ear-R
#head-band-L
#head-band-R
#face-L
#face-R
#mouth-LR
#tooth-1L
#tooth-1R
#tooth-2L
#tooth-2R
#tooth-3L
#tooth-3R
#tooth-4L
#tooth-4R
#lip-L
#lip-R
#eye-1L
#eye-1R
#eye-2L
#eye-2R
#eye-3L
#eye-3R
#eye-4L
#eye-4R
#eye-shadow-1L
#eye-shadow-1R
#eye-shadow-2L
#eye-shadow-2R
#tube-1L
#tube-1R
#tube-2L
#tube-2R
#tube-3L
#tube-3R
#tube-4L
#tube-4R
#tube-5L
#tube-5R
#tube-6L
#tube-6R
#b-hole-1L
#b-hole-1R
#b-hole-2L
#b-hole-2R
#b-hole-3L
#b-hole-3R
#b-hole-4L
#b-hole-4R
#b-hole-5L
#b-hole-5R
#b-hole-6L
#b-hole-6R
#mask-L1
#mask-R1
#mask-LR2
#mask-L3
#mask-R3
#breather-LR1
#breather-L2
#breather-R2
#breather-LR3
#breather-L4
#breather-R4
#dot-L
#dot-R
#step-L1
#step-R1
#step-L2
#step-R2
#step-L3
#step-R3
#step-L4
#step-R4
Raw
Star-Wars-Storm-Trooper-in-pure-CSS.markdown
Raw
style.css
body {
overflow: hidden;
background: #9D594E;
}
img {
position: absolute;
opacity: 0.5;
width: 1200px;
position: absolute;
left: 50%;
margin-left: -600px;
margin-top: 0px;
}
div {
position: absolute;
left: 50%;
top: 50%;
}
#head-1L {
margin-top: -280px;
margin-left: -145px;
height: 0;
width: 110px;
border-bottom: 30px solid #EAE9C7;
border-left: 30px solid transparent;
border-right: 0px solid transparent;
padding: 0 8px 0 0;
}
#head-1R {
margin-top: -280px;
margin-left: 0px;
height: 0;
width: 110px;
border-bottom: 30px solid #D3D3B2;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
padding: 0 8px 0 0;
}
#head-2L {
margin-top: -250px;
margin-left: -160px;
height: 0;
width: 140px;
border-bottom: 30px solid #EAE9C7;
border-left: 15px solid transparent;
border-right: 0px solid transparent;
padding: 0 8px 0 0;
}
#head-2R {
margin-top: -250px;
margin-left: 0px;
height: 0;
width: 140px;
border-bottom: 30px solid #D3D3B2;
border-left: 0px solid transparent;
border-right: 15px solid transparent;
padding: 0 8px 0 0;
}
#head-3L {
margin-top: -220px;
margin-left: -180px;
height: 0;
width: 155px;
border-bottom: 100px solid #EAE9C7;
border-left: 20px solid transparent;
border-right: 0px solid transparent;
padding: 0 8px 0 0;
}
#head-3R {
margin-top: -220px;
margin-left: 0px;
height: 0;
width: 155px;
border-bottom: 100px solid #D3D3B2;
border-left: 0px solid transparent;
border-right: 20px solid transparent;
padding: 0 8px 0 0;
}
#head-band-L {
background: #252622;
margin-top: -120px;
margin-left: -180px;
height: 25px;
width: 175px;
padding: 0 8px 0 0;
}
#head-band-R {
background: #161614;
margin-top: -120px;
margin-left: 0px;
height: 25px;
width: 175px;
padding: 0 8px 0 0;
}
#face-L {
background: #EAE9C7;
margin-top: -95px;
margin-left: -180px;
height: 280px;
width: 175px;
padding: 0 8px 0 0;
}
#face-R {
background: #D3D3B2;
margin-top: -95px;
margin-left: 0px;
height: 280px;
width: 175px;
padding: 0 8px 0 0;
}
#black-ears {
background: #161614;
margin-top: -70px;
margin-left: -210px;
height: 70px;
width: 415px;
padding: 0 8px 0 0;
}
#earrings {
background: #6A2820;
margin-top: -20px;
margin-left: -210px;
height: 20px;
width: 415px;
padding: 0 8px 0 0;
}
#white-ears {
background: #C1C0A4;
margin-top: -100px;
margin-left: -200px;
height: 110px;
width: 395px;
padding: 0 8px 0 0;
}
#ear-L {
margin-top: -100px;
margin-left: -200px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 110px 20px;
border-color: transparent transparent #9F9E71 transparent;
}
#ear-R {
margin-top: -100px;
margin-left: 182px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 110px 0 0 20px;
border-color: transparent transparent transparent #9F9E71;
}
#mouth-LR {
margin-top: 25px;
margin-left: -110px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 110px 80px 110px;
border-color: transparent transparent #E7E6C5 transparent;
}
#tooth-1L {
margin-top: 22px;
margin-left: -10px;
height: 0;
width: 0px;
border-bottom: 40px solid #131311;
border-right: 12px solid #131311;
border-top: 10px solid transparent;
}
#tooth-1R {
margin-top: 22px;
margin-left: 0px;
height: 0;
width: 0px;
border-bottom: 40px solid #131311;
border-left: 12px solid #131311;
border-top: 10px solid transparent;
}
#tooth-2L {
margin-top: 42px;
margin-left: -35px;
height: 0;
width: 0px;
border-bottom: 40px solid #131311;
border-right: 12px solid #131311;
border-top: 10px solid transparent;
}
#tooth-2R {
margin-top: 42px;
margin-left: 25px;
height: 0;
width: 0px;
border-bottom: 40px solid #131311;
border-left: 12px solid #131311;
border-top: 10px solid transparent;
}
#tooth-3L {
margin-top: 62px;
margin-left: -60px;
height: 0;
width: 0px;
border-bottom: 40px solid #131311;
border-right: 12px solid #131311;
border-top: 10px solid transparent;
}
#tooth-3R {
margin-top: 62px;
margin-left: 50px;
height: 0;
width: 0px;
border-bottom: 40px solid #131311;
border-left: 12px solid #131311;
border-top: 10px solid transparent;
}
#tooth-4L {
margin-top: 82px;
margin-left: -85px;
height: 0;
width: 0px;
border-bottom: 40px solid #131311;
border-right: 12px solid #131311;
border-top: 10px solid transparent;
}
#tooth-4R {
margin-top: 82px;
margin-left: 75px;
height: 0;
width: 0px;
border-bottom: 40px solid #131311;
border-left: 12px solid #131311;
border-top: 10px solid transparent;
}
#lip-L {
margin-top: 60px;
margin-left: -230px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 95px 230px;
border-color: transparent transparent #D3D3B2 transparent;
}
#lip-R {
margin-top: 60px;
margin-left: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 95px 0 0 230px;
border-color: transparent transparent transparent #C1C0A4;
}
#eye-1L {
background: #252622;
margin-top: -80px;
margin-left: -165px;
width: 135px;
height: 70px;
}
#eye-1R {
background: #161614;
margin-top: -80px;
margin-left: 30px;
width: 135px;
height: 70px;
}
#eye-2L {
margin-top: -50px;
margin-left: -165px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px 0 0 40px;
border-color: transparent transparent transparent #EAE9C7;
}
#eye-2R {
margin-top: -50px;
margin-left: 125px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 50px 40px;
border-color: transparent transparent #D3D3B2 transparent;
}
#eye-3L {
margin-top: -60px;
margin-left: -130px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 60px 100px;
border-color: transparent transparent #EAE9C7 transparent;
}
#eye-3R {
margin-top: -60px;
margin-left: 30px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 60px 0 0 100px;
border-color: transparent transparent transparent #D3D3B2;
}
#eye-4L {
margin-top: -10px;
margin-left: -140px;
width: 30px;
height: 10px;
background: #EAE9C7;
}
#eye-4R {
margin-top: -10px;
margin-left: 110px;
width: 30px;
height: 10px;
background: #D3D3B2;
}
#eye-shadow-1L {
margin-top: -10px;
margin-left: -160px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 40px 15px 0;
border-color: transparent #252622 transparent transparent;
transform: skewY(30deg);
}
#eye-shadow-1R {
margin-top: -10px;
margin-left: 120px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 40px 0 0;
border-color: #161614 transparent transparent transparent;
transform: skewY(-30deg);
}
#eye-shadow-2L {
margin-top: -25px;
margin-left: -120px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 90px 0 0;
border-color: #252622 transparent transparent transparent;
transform: skewY(-30deg);
}
#eye-shadow-2R {
margin-top: -25px;
margin-left: 30px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 90px 15px 0;
border-color: transparent #161614 transparent transparent;
transform: skewY(30deg);
}
#tube-1L {
margin-top: 10px;
margin-left: -220px;
height: 0;
width: 20px;
border-bottom: 10px solid #D3D3B2;
border-left: 20px solid transparent;
border-right: 0px solid transparent;
}
#tube-1R {
margin-top: 10px;
margin-left: 182px;
height: 0;
width: 20px;
border-bottom: 10px solid #C1C0A4;
border-left: 0px solid transparent;
border-right: 18px solid transparent;
}
#tube-2L {
margin-top: 20px;
margin-left: -235px;
height: 0;
width: 40px;
border-bottom: 20px solid #D3D3B2;
border-left: 15px solid transparent;
border-right: 0px solid transparent;
}
#tube-2R {
margin-top: 20px;
margin-left: 182px;
height: 0;
width: 39px;
border-bottom: 20px solid #C1C0A4;
border-left: 0px solid transparent;
border-right: 14px solid transparent;
}
#tube-3L {
margin-top: 40px;
margin-left: -250px;
height: 0;
width: 55px;
border-bottom: 20px solid #D3D3B2;
border-left: 15px solid transparent;
border-right: 25px solid transparent;
}
#tube-3R {
margin-top: 40px;
margin-left: 155px;
height: 0;
width: 55px;
border-bottom: 20px solid #C1C0A4;
border-left: 25px solid transparent;
border-right: 15px solid transparent;
}
#tube-4L {
margin-top: 60px;
margin-left: -255px;
height: 0;
width: 95px;
border-bottom: 40px solid #D3D3B2;
border-left: 5px solid transparent;
border-right: 45px solid transparent;
}
#tube-4R {
margin-top: 60px;
margin-left: 110px;
height: 0;
width: 95px;
border-bottom: 40px solid #C1C0A4;
border-left: 45px solid transparent;
border-right: 5px solid transparent;
}
#tube-5L {
margin-top: 100px;
margin-left: -255px;
height: 0;
width: 85px;
border-top: 40px solid #D3D3B2;
border-left: 15px solid transparent;
border-right: 45px solid transparent;
}
#tube-5R {
margin-top: 100px;
margin-left: 110px;
height: 0;
width: 85px;
border-top: 40px solid #C1C0A4;
border-left: 45px solid transparent;
border-right: 15px solid transparent;
}
#tube-6L {
margin-top: 140px;
margin-left: -240px;
width: 10px;
border-top: 65px solid #D3D3B2;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
}
#tube-6R {
margin-top: 140px;
margin-left: 100px;
width: 10px;
border-top: 65px solid #C1C0A4;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
}
#b-hole-1L {
background: #21221E;
margin-top: 50px;
margin-left: -230px;
height: 10px;
width: 50px;
transform: rotate(-35deg);
}
#b-hole-2L {
background: #21221E;
margin-top: 65px;
margin-left: -230px;
height: 10px;
width: 50px;
transform: rotate(-35deg);
}
#b-hole-3L {
background: #21221E;
margin-top: 75px;
margin-left: -220px;
height: 10px;
width: 50px;
transform: rotate(-35deg);
}
#b-hole-4L {
background: #21221E;
margin-top: 85px;
margin-left: -210px;
height: 10px;
width: 50px;
transform: rotate(-35deg);
}
#b-hole-5L {
background: #21221E;
margin-top: 95px;
margin-left: -200px;
height: 10px;
width: 50px;
transform: rotate(-35deg);
}
#b-hole-6L {
background: #21221E;
margin-top: 105px;
margin-left: -190px;
height: 10px;
width: 50px;
transform: rotate(-35deg);
}
#b-hole-1R {
background: #0D0D0D;
margin-top: 50px;
margin-left: 190px;
height: 10px;
width: 50px;
transform: rotate(35deg);
}
#b-hole-2R {
background: #0D0D0D;
margin-top: 65px;
margin-left: 190px;
height: 10px;
width: 50px;
transform: rotate(35deg);
}
#b-hole-3R {
background: #0D0D0D;
margin-top: 75px;
margin-left: 180px;
height: 10px;
width: 50px;
transform: rotate(35deg);
}
#b-hole-4R {
background: #0D0D0D;
margin-top: 85px;
margin-left: 170px;
height: 10px;
width: 50px;
transform: rotate(35deg);
}
#b-hole-5R {
background: #0D0D0D;
margin-top: 95px;
margin-left: 160px;
height: 10px;
width: 50px;
transform: rotate(35deg);
}
#b-hole-6R {
background: #0D0D0D;
margin-top: 105px;
margin-left: 150px;
height: 10px;
width: 50px;
transform: rotate(35deg);
}
#mask-L1 {
margin-top: 95px;
margin-left: -180px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 50px 60px 80px;
border-color: transparent transparent #EAE9C7 transparent;
}
#mask-R1 {
margin-top: 95px;
margin-left: 55px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 80px 60px 50px;
border-color: transparent transparent #EAE9C7 transparent;
}
#mask-LR2 {
margin-top: 155px;
margin-left: -180px;
width: 365px;
height: 50px;
background: #EAE9C7;
}
#mask-L3 {
margin-top: 205px;
margin-left: -180px;
width: 50px;
border-top: 45px solid #EAE9C7;
border-left: 45px solid transparent;
border-right: 75px solid transparent;
}
#mask-R3 {
margin-top: 205px;
margin-left: 15px;
width: 50px;
border-top: 45px solid #EAE9C7;
border-left: 75px solid transparent;
border-right: 45px solid transparent;
}
#breather-LR1 {
margin-top: 110px;
margin-left: -65px;
height: 0;
width: 45px;
border-bottom: 60px solid #A3A476;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
}
#breather-L2 {
margin-top: 155px;
margin-left: -135px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 35px 15px 35px;
border-color: transparent transparent #A3A476 transparent;
}
#breather-R2 {
margin-top: 155px;
margin-left: 70px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 35px 15px 35px;
border-color: transparent transparent #A3A476 transparent;
}
#breather-LR3 {
margin-top: 170px;
margin-left: -135px;
height: 40px;
width: 275px;
background: #A3A476;
}
#breather-L4 {
margin-top: 210px;
margin-left: -135px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 35px 0 35px;
border-color: #A3A476 transparent transparent transparent;
}
#breather-R4 {
margin-top: 210px;
margin-left: 70px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 35px 0 35px;
border-color: #A3A476 transparent transparent transparent;
}
#dot-L {
margin-top: 175px;
margin-left: -110px;
width: 30px;
height: 30px;
background: #252622;
}
#dot-R {
margin-top: 175px;
margin-left: 85px;
width: 30px;
height: 30px;
background: #161614;
}
#step-L1 {
margin-top: 135px;
margin-left: -10px;
width: 12.5px;
height: 10px;
background: #252622;
}
#step-R1 {
margin-top: 135px;
margin-left: 3px;
width: 12.5px;
height: 10px;
background: #161614;
}
#step-L2 {
margin-top: 145px;
margin-left: -25px;
width: 27.5px;
height: 20px;
background: #252622;
}
#step-R2 {
margin-top: 145px;
margin-left: 3px;
width: 27.5px;
height: 20px;
background: #161614;
}
#step-L3 {
margin-top: 165px;
margin-left: -40px;
width: 42.5px;
height: 60px;
background: #252622;
}
#step-R3 {
margin-top: 165px;
margin-left: 3px;
width: 42.5px;
height: 60px;
background: #161614;
}
#step-L4 {
margin-top: 225px;
margin-left: -10px;
width: 12.5px;
height: 10px;
background: #252622;
}
#step-R4 {
margin-top: 225px;
margin-left: 3px;
width: 12.5px;
height: 10px;
background: #161614;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment