permalink Sabtu, 16 Juni 2012 |
![]() ![]() |
Nov Characters | CSS & HTML
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{Dan !, berikunya adalah penerapan CSS nya :
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;
}
<div id="nov">Ya begitulah kode CSS & HTML nya. Maap karena nggak saya beri penjelasan tentang kodenya karena panjaaaaaaaaaaaaang banget, jadi males deh.
<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>
Maap yaa, Thanks !
- Oprek Popular Post menggunakan CSS aja !
- Nov Characters | CSS & HTML
- Twitter Like TextArea
- Fixed TextArea
- Membuat Karikatur Menggunakan CSS
- Membuat Bentuk Hati Dengan CSS
- Auto Shutdown | Solusi Maen Komputer Tapi Ketiduran
- Cara Cepat Menambah Pengunjung Blog - Rex Traffic Booster
- Traffic Blaster : Menambah Pengunjung Blog
Langganan:
Posting Komentar (Atom)
0 komentar:
Ayo komentar kamu yang pertamax wa di Nov Characters | CSS & HTML