Yeessssss…………...!!
Setelah saya membuat
Rex Character dulu, kali ini saya telah membuat character baru yang saya beri nama
Nov. Seperti Karakter
Rex dulu,
Nov ini juga saya buat dengan
CSS + HTML. Sebenarnya nggak ada yang beda dengan karakter sebelumnya, cuma antenanya aja yang beda. Saya membuat karakter
Nov ini memiliki sifat yang jahil, pokoknya yang antagonis deh. Sedangkan yang
Rex dulu itu yang protagonisnya. Begini nih gambarnya :
Beginilah kode CSS nya:
#nov{
margin:0px auto;
width:350px;
height:430px;
background:#DDD;
border:2px solid #333;
padding:20px;
}
#kepala {
position: relative;
top:-160px;
width: 300px;
height: 150px;
background:#FFF;
border:1px solid #000;
border-radius: 150px / 75px;
}
#antena{
position: absolute;
content: "";
left: 130px;
top: -85px;
height: 0px;
width:0px;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:100px solid #000;
border-radius:0 0 20px 20px ;
-moz-transform: rotate(40deg);
-moz-transform-origin: 0 100%;
}
#antena:before{
position: absolute;
content: "";
left: -25px;
top: 45px;
height: 0px;
width:0px;
border-left:11px solid transparent;
border-right:11px solid transparent;
border-bottom:70px solid #343434;
border-radius:0 0 20px 20px ;
-moz-transform: rotate(-45deg);
-moz-transform-origin: 0 100%;
}
#mata{
position:absolute;
content:"";
height:80px;
width:300px;
top:10px;
left:-30px;
}
#mata:before, #mata:after {
position: absolute;
content: "";
left: 200px;
top: -10px;
width: 80px;
height: 80px;
background:#FE2B0E;
border-radius: 70px;
border:solid 1px #000;
}
#mata:before{
content:"";
left: 50px;
top: -10px;
}
#mata-depan{
position:absolute;
content:"";
height:40px;
width:300px;
top:10px;
left:-40px;
}
#mata-depan:before, #mata-depan:after {
position: absolute;
content: "";
left: 210px;
top: -5px;
width: 70px;
height: 70px;
background:#FFF;
border-radius: 70px;
border:solid 1px #000;
}
#mata-depan:before{
content:"";
left: 60px;
top: -5px;
}
#mata-acs{
position:absolute;
content:"";
height:40px;
width:300px;
top:10px;
left:0px;
}
#mata-acs:before, #mata-acs:after {
position: absolute;
content: "";
left: 210px;
top: -5px;
width: 20px;
height: 20px;
background:#FFF;
border-radius: 70px;
border:solid 1px #000;
}
#mata-acs:before{
content:"";
left: 60px;
top: -5px;
}
#bola-mata{
position:absolute;
content:"";
height:40px;
width:300px;
top:10px;
left:-35px;
}
#bola-mata:before, #bola-mata:after {
position: absolute;
content: "";
left: 210px;
top: 17px;
width: 45px;
height: 45px;
background:#000;
border-radius: 70px;
border:solid 1px #000;
}
#bola-mata:before{
content:"";
left: 60px;
}
#mulut-hidung {
position: absolute;
content: "";
left: 100px;
top:80px;
width: 70px;
height: 70px;
}
#hidung{
position: absolute;
content: "";
left: -10px;
top: 0px;
width: 30px;
height: 20px;
border-radius: 10px;
}
#hidung:before, #hidung:after{
position: absolute;
content: "";
left: 0px;
top: 0px;
width: 10px;
height: 20px;
background: #000;
border-radius: 10px;
}
#hidung:after{
background:#000;
left:20px;
}
#mulut {
position: absolute;
content: "";
top:30px;
left:-40px;
background:transparent;
border:solid 1px #000;
width: 170px;
height: 20px;
border-radius:100px / 10px;
}
#badan {
display:block;
width: 170px;
height: 180px;
border:1px solid #000;
background-color:#FE2B0E;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position:relative;
top:150px;
left:40px;
}
#badan:after{
display:block;
content:"";
width: 140px;
height: 180px;
border:1px solid #000;
background-color:#FFF;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position:absolute;
left:30px;
}
#badan:before{
content:"";
position:absolute;
left:130px;
top:30px;
height:20px;
width:50px;
background:#FFF;
border:1px solid #000;
-moz-transform: rotate(25deg);
-moz-transform-origin: 0 100%;
-webkit-transform: rotate(25deg);
-webkit-transform-origin: 0 100%;
-o-transform: rotate(25deg);
-o-transform-origin: 0 100%;
border-radius:50px 50px 50px 50px / 70% 30% 30% 70%;
}
#tangan-kanan{
content:"";
position:relative;
left:80px;
top:0px;
height:20px;
width:50px;
background:#FFF;
border:1px solid #000;
-moz-transform: rotate(25deg);
-moz-transform-origin: 0 100%;
-webkit-transform: rotate(25deg);
-webkit-transform-origin: 0 100%;
-o-transform: rotate(25deg);
-o-transform-origin: 0 100%;
border-radius:50px 50px 50px 50px / 70% 30% 30% 70%;
}
#badan-by{
width:140px;
height:50px;
border-radius: 70px / 25px;
position:relative;
top:200px;
left:50px;
background:transparent;
box-shadow:5px 155px 3px #333;
}
#box{
position:relative;
text-align:center;
top:-120px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
left:240px;
content:"";
width:103px;
height:103px;
}
#text{
text-align:center;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"";
width:90px;
height:90px;
background:#0BE20B;
text-shadow:1px 2px 2px #666;
padding:5px;
border:1px solid #000;
border-radius:100px;
}
#text-by{
position:relative;
top:-215px;
left:250px;
content:"";
width:80px;
height:40px;
border-radius:40px / 20px;
background:transparent;
box-shadow:5px 100px 3px #333;
}
Dan !, berikunya adalah penerapan CSS nya :
<div id="nov">
<div id="badan-by"></div>
<div id="badan"></div>
<div id="tangan-kanan"></div>
<div id="kepala">
<div id="antena"></div>
<div id="mata"></div>
<div id="mata-depan"></div>
<div id="mata-acs"></div>
<div id="bola-mata"></div>
<div id="mulut-hidung">
<div id="hidung"></div>
<div id="mulut"></div>
</div>
</div>
<div id="box"><font color="#FE2B0E">Nov</font><br/> <font color="#F5F5F5" size="2px"> Created By :</font><br/> <blink> Ageng Dwi P.</blink></div></div>
<div id="text-by"></div>
</div>
Ya begitulah kode CSS & HTML nya. Maap karena nggak saya beri penjelasan tentang kodenya karena panjaaaaaaaaaaaaang banget, jadi males deh.
Maap yaa, Thanks !
