Draw a ROCKET using
css3 & HTML
only!
View the demo on jsfiddle. This is an "image" with pure code. Just for fun but maybe it is one possibility of the future? Codes are much smaller in size than images anyway. Cheers!
Oh, almost forget one thing. Obviously, this will not work in ancient browsers like ie7 and ie6. Maybe I should just forget them.
HTML
<div id="canvas-1">
<div class="fire"></div>
<div class="fin-wrap">
<div class="left-fin"></div>
<div class="right-fin"></div>
</div>
<div class="body">
<div class="head-wrap">
<div class="head"></div>
</div>
<div class="head-bottom"></div>
<div class="window">
<div class="window-inner"></div>
</div>
<div class="middle-fin"></div>
</div>
</div>
CSS
#canvas-1{
width:300px;
height:580px;
margin:20px auto;
position: relative;
transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-ms-transform:rotate(70deg);
-o-transform:rotate(70deg);
-moz-transform:rotate(70deg);
}
.body, .head, .head-bottom, .head-wrap, .window, .window-inner, .fin-wrap,
.left-fin,.right-fin, .middle-fin, .fire, .fire-inner{
position: absolute;
}
.body{
width:150px;
height:400px;
background-color:rgb(222,222,222);
top:20px;
left:70px;
border-radius:70% 70% 60% 60%/70% 70%;
border:solid #888 1px;
}
.head{
background-color:rgb(230,18,18);
width:150px;
height:400px;
top:0px;
left:-12px;
border-radius:70% 70% 30% 30%;
}
.head-wrap{
overflow: hidden;
width:124px;
height:70px;
left:12px;
top:-1px;
}
.head-bottom{
width:114px;
height:20px;
background-color:rgb(230,18,18);
border-radius:50%;
top:59px;
left:18px;
}
.window{
width:80px;
height:80px;
background-color:#ddd;
border:1px #888 dashed;
top:110px;
left:33px;
border-radius:50%;
}
.window-inner{
width:66px;
height:66px;
background-color:rgb(18,205,230);
background-color:rgba(18,205,230,.6);
top:6px;
left:6px;
border-radius:50%;
border:1px #888 solid;
}
.fin-wrap{
width:216px;
height:150px;
top:321px;
left:38px;
}
.left-fin, .right-fin{
width:62px;
height:163px;
background-color:rgb(230,18,18);
}
.left-fin{
left:0;
border-radius:89% 1% 117% 8%/107% 50% 80% 8%;
}
.right-fin{
right:0;
border-radius:1% 89% 8% 117%/50% 107% 8% 80%;
}
.middle-fin{
width:30px;
height:175px;
top:310px;
left:59px;
background-color:rgb(230,18,18);
border-radius:50% 50% 50% 50%/30% 30% 70% 70%;
}
.fire{
width: 78px;
height:180px;
background-color:rgb(250,189,20);
background-color:rgba(250,189,20,.7);
border-radius:50% 50% 50% 50%/30% 30% 70% 70%;
top:412px;
left:106px;
}