Membuat Karikatur Menggunakan CSS

Mungkin anda sering melihat film kartun seperti Spongebob Squarepants, One Piece, Naruto, dan lain-lain. Banyak sekali film kartun luar yang berdatangan di Indonesia ini, termasuk fil dari Negara tetangga.
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! . Seperti pada judul saya, karikatur ini saya buat dari CSS murni, tanpa di edit dengan Photoshop atau yang lainnya. Kalo nggak percaya coba saja klik kanan gambar di bawah ini. Pasti nggak ada Save Image.

REX
Created by:
AGENG Dwi P.

Gimana ? nggak bisa di Save kaan. Kalo Gambar di atas bentuknya acak-acakan, coba buka di Mozilla firefox, Google Chrome, atau Safari yang terbaru. Mau tau source kode nya ? tapi jangan lupa cantumin authornya.
--------------------------------------------------------------------------------------------------------------
Di bawah ini adalah kode CSS nya :

#rex{
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;
}

Panjang banget ya, hehehe. Emang gitu, dan setelah itu penerapannya di HTML seperti ini :

<div id="rex">
    <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 ADM Cekidot MasGan!

Sumber Tetangga

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 23:08 and have 0 comments