permalink Senin, 04 Juni 2012 |
![]() ![]() |
Membuat Karikatur Menggunakan CSS
Pernahkah anda kepikiran untuk membuat karikatur anda sendiri ?. Saya yakin pasti ada, tapi tidak tahu caranya. Berikut ini adalah sebuah karikatur asli buatan saya sendiri yang saya beri nama Rex.
Karikatur ini tidak sengaja saya ciptakan, karena iseng-iseng aja hehehe, tetapi hasilnya menurut saya bisa di bilang WOW!
Created by:
AGENG Dwi P.
Di bawah ini adalah kode CSS nya :
#rex{Panjang banget ya, hehehe. Emang gitu, dan setelah itu penerapannya di HTML seperti ini :
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: 140px;
top: -90px;
height: 0px;
width:0px;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:100px solid #000;
border-radius:0 0 20px 20px ;
-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%;
}
#antena:before{
position: absolute;
background:#0BE20B;
content: "";
left: -20px;
top: -18px;
height:40px;
width:40px;
border:#000 1px solid;
border-radius:40px;
}
#mata-antena{
position:absolute;
content:"";
height:40px;
width:40px;
left: 180px;
top: -90px;
}
#mata-antena:before{
position: absolute;
content: "";
left: 7px;
top: 5px;
width: 32px;
height: 32px;
background:#FFF;
border-radius: 32px;
border:solid 1px #000;
}
#mata-antena:after{
position:absolute;
content:"";
width:12px;
height:12px;
background:#FFF;
border:1px solid #000;
border-radius:12px;
left: 5px;
top: 2px;
}
#bola-mata-antena{
position:absolute;
content:"";
width:20px;
height:20px;
background:#000;
border:1px solid #000;
border-radius:20px;
left: 197px;
top: -75px;
}
#mata{
position:absolute;
content:"";
height:40px;
width:300px;
top:10px;
left:0px;
}
#mata:before, #mata:after {
position: absolute;
content: "";
left: 200px;
top: -10px;
width: 80px;
height: 80px;
background:#0BE20B;
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:0px;
}
#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:20px;
}
#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: 40px;
top:80px;
width: 280px;
height: 100px;
}
#hidung{
position: absolute;
content: "";
left: 140px;
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:125px;
border-radius: 70px;
background:#000;
border:solid 1px #000;
border-top:0;
border-left:0;
border-right:0;
width: 35px;
height: 35px;
border-radius: 35px;
}
#badan {
display:block;
width: 170px;
height: 180px;
border:1px solid #000;
background-color:#0BE20B;
-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;
}
#text{
position:relative;
text-align:center;
overflow:hidden;
top:-120px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
left:250px;
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:255px;
content:"";
width:80px;
height:40px;
border-radius:40px / 20px;
background:transparent;
box-shadow:5px 100px 3px #333;
}
<div id="rex">Begituah kode membuat karikatur REX . Maaf kalo tidak saya beri penjelasan, soalnya banyak banget kodenya. Bagi yang membuat kayak gini, jangan lupa cantumin Source atau authornya yah, yaitu Ageng Dwi P.
<div id="badan-by"></div>
<div id="badan"></div>
<div id="tangan-kanan"></div>
<div id="kepala">
<div id="antena"></div>
<div id="mata-antena"></div>
<div id="bola-mata-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="text"><font color="#DDD"><blink>REX</blink></font> <br/><font size="1px"> Created by: </font> <br/> AGENG DWI P.</div>
<div id="text-by"></div>
</div>
Thanks.. !
- Cara Cepat Menambah Pengunjung Blog - Rex Traffic Booster
- Traffic Blaster : Menambah Pengunjung Blog
- 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
Langganan:
Posting Komentar (Atom)
0 komentar:
Ayo komentar kamu yang pertamax wa di Membuat Karikatur Menggunakan CSS