Ekspresi Wajah Lucu Spongebob ketika Digambar dengan CSS

agung wisudhatama November 26, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

SPONGEBOB Nickelodeon memang tak pernah gagal mengeluarkan serial animasi anak-anak. Spongebob, serial animasi kartun bertema kehidupan bawah laut (Bikini Bottom, red) layak menyandang gelar kartun terbaik dengan serial panjang.

Pertama kali tayang, Spongebob dalam naungan United Plankton Pictures, Inc sebuah perusahaan animasi film Stephen Hillenburg. Siapakah Stephen Hillenburg? Dialah sang pencipta kartun fenomenal ini, seorang ahli biota laut dan penggemar ilmu seni. Idenya menggabungkan dunia laut dan ilmu seni hingga melahirkan animasi kartun anak-anak S P O N G E B O B hingga sekarang ini.

Baca Juga :

• Memadukan HTML dan CSS dalam Bahasa Pemrograman Modern
• Cara Menuliskan Lambang Kimia dengan Subscript dan Superscript
• Cara Membuat Bangun Datar Dapat Tampil di Blog dengan Pure CSS

SPONGEBOB

Spongebob adalah karakter utama dari film animasi ini. Bersama dengan Patrick, Garry, Squidward, Mr. Crab, Sandy, Spongebob menghadirkan sebuah animasi yang layak ditonton. Patrick yang O'on, Garry hewan peliharaannya, Squidward yang puitis, Mr Crab yang mata duitan dan Sandy seekor tupai dengan pakaian astronot membuat kita terlena dengan sebuah animasi berlatar realitas kehidupan sehari-hari dengan sifat masing-masing pemerannya -- 7 Deadly Sin -- (tujuh tabiat manusia, red).

Beberapa kata-kata Spongebob yang sering kita dengar dalam filmnya :

Ternyata semua yang berkilau itu belum tentu emas.
Aku rasa kau harus berhenti menilai orang dari penampilannya saja.
Sebenarnya aku takut naik wahana ini, tapi aku tidak ingin membuatmu kecewa.
Aku siap, aku siap!
Bisakah aku dimaafkan seumur hidupku?
Aku jelek dan aku bangga!
Dengan imajinasi, kamu bisa menjadi apa pun yang kamu inginkan.
Lumut selalu menunjuk ke peradaban.
Kamu tidak perlu surat izin untuk mengemudikan sandwich.
Aku sangat setia. Aku tidak keberatan tidur di tanah yang dingin dan keras, sementara Kapten Krabs tidur di tendanya yang hangat dan kering.
Lebih baik tenggelam di danau prasejarah daripada menjadi penjahat seumur hidup.

Baca Juga :

• Cara Menampilkan dan Membaca Langsung File PDF di Blog
• Memasang Musik Player di Blogspot dengan Teknik Pemrograman CSS3
• Memasang Tombol Download Film Drama Korea dan Keterangannya

Ini salah satu episode Spongebob itu :

@spteys_ #spombobsquarpent #squidward ♬ original sound - favsoundds

Bikini Bottom

Berlatar belakang kehidupan biota laut, Spongebob bersama Garry peliharaannya yang bertabiat seperti kucing, beraksi menghibur dengan keceriaannya, kekonyolannya dan kehumorisannya. Spongebob bertetangga dengan Patrick yang selalu tidak akur dengan Squidward si Gurita bertentakel aneh. Tapi justru dengan sifat dan karakter masing-masing peran itulah film animasi ini sarat makna kehidupan didalamnya.

Krasty Crab

"hae hae hae -- sembari menyeringai -- uang lebih penting daripada segalanya" ya itulah yang sering dikatakan oleh Mr Crab si Kepiting mata duitan. Seorang pebisnis ulung tapi pelit menjadikan Mr Crab menjadi salah satu dari -- 7 Deadly Sin -- pada sifat manusia yang tamak akan keserakahan dan kekuasaan. Tapi untunglah Mr Crab berbaik hati kepada semua teman-teman Spongebob termasuk pada Spongebob sendiri.

"Tujuh Dosa Mematikan" -- 7 Deadly Sin -- manusia ala Spongebob :

1. SpongeBob Squarepants si Nafsu.
2. Tuan Crabs si Tamak.
3. Shandy Cheeks si Sombong.
4. Plankton si Iri Hati.
5. Gary Siput si Rakus.
6. Squidward Tentacles si Pemarah.
7. Patrick Star si Pemalas.

Dubbing Spongebob

Lalu siapakah pengisi suara karakter Spongebob? Suara unik Spongebob versi aslinya dimainkan oleh Tom Kenny. Dia memiliki suara bernada tinggi yang sangat cocok dengan peran yang dimainkannya. Sahabat Spongebob, Patrick Star, diperankan oleh aktor Bill Fagerbakke. Tetangga mereka yang menjengkelkan, Squidward Tentacles, dimainkan oleh Roger Bumpass. Krusty Krab, tempat Spongebob bekerja, dimiliki oleh Eugene Krabs yang dimainkan oleh Clancy Brown.

Pengisi suara Spongebob versi Indo :

1. Spongebob didubbing oleh Ahmad Zulkifli Lubis
2. Patrick Star didubbing oleh Darmawan Susanto
3. Mr Krab didubbing oleh Dadang Hidayat
4. Squidward didubbing oleh Jumali Prawiroredjo

Keempat dubbers ini sering dipanggil di beberapa program Talk Show di TV Indo. Dan memang ketika melihat keempatnya beradu dubbing, seperti menonton Spongebob versi -- Real Life -- dunia nyata.

Teori All Seeing Eye

Namun sayang, serunya film Spongebob terdapat beberapa episode yang dilarang tayang. Dan salah satunya ketika episode -- Plankton -- atau makhluk bermata satu sedang dipuja-puja oleh orang-orang yang ada dibawahnya. Plankton adalah karakter licik dan jahat dengan ciri-ciri fisik berwarna hijau, kecil, dan bermata satu.

Plankton bukanlah satu-satunya hal di serial Spongebob yang berkaitan dengan Illuminati. Di salah satu episodenya yang berjudul Cephalopod Lodge, Squidward bergabung dengan sebuah organisasi misterius yang berjubah merah dan mengenakan penutup kepala bersimbol mata satu. Simbol mata satu itu dikaitkan dengan All-Seeing Eye yang merupakan lambang dari Illuminati.

Spongebob dalam CSS

Lanjut lagi dengan CSS. Kali ini kita akan memberikan sentuhan berbeda dari karakter Spongebob. Dimana karakter wajah dari Spongebob akan kita gambar menggunakan CSS. Karakter yang identik dengan Spoons warna kuning memakai seragam sekolah dan bermata besar akan kita kreasi dengan sentuhan sedikit dari CSS. Seperti yang sudah-sudah, kali ini kita tetap akan menggunakan dukungan dari HTML untuk memunculkan gambar wajah Spongebob. Caranya bagaimana?

Caranya adalah :

Mohon disimak tutorialnya dibawah ini :

1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut

* {
  list-style: none;
  padding: 0;
  margin: 0;
  outline: 0;
}

body {
  background: #f8ec40;
  width: 100%;
    
}

ul.spongebob {
  position: relative;
  width: 312px;
  margin: 0 auto;
  margin-top: 10%;
}

li.eyebrow.left {
  position: absolute;
  width: 8px;
  height: 25px;
  background-color: #000;
  left: 70px;
  top: -24px;
}

li.eyebrow.left:before {
  position: absolute;
  content: " ";
  width: 8px;
  height: 25px;
  background-color: #000;
  left: -35px;
  top: 10px;
  transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
}

li.eyebrow.left:after {
  position: absolute;
  content: " ";
  width: 8px;
  height: 25px;
  background-color: #000;
  left: 35px;
  top: 10px;
    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
}

li.eyebrow.right {
  position: absolute;
  width: 8px;
  height: 25px;
  background-color: #000;
  right: 75px;
  top: -24px;
}


li.eyebrow.right:before {
  position: absolute;
  content: " ";
  width: 8px;
  height: 25px;
  background-color: #000;
  left: -35px;
  top: 10px;
    transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
}

li.eyebrow.right:after {
  position: absolute;
  content: " ";
  width: 8px;
  height: 25px;
  background-color: #000;
  left: 30px;
  top: 10px;
    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
}

li.eye {
  content: " ";
  width: 140px;
  height: 140px;
  background-color: #fff;
  border-radius: 82px;
  -moz-border-radius: 82px;
  -webkit-border-radius: 82px;
  border: 6px solid #000;
}

li.eye.left {
  float: left;
}

li.eye.left:before {
  position: absolute;
  content: " ";
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 70px;
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border: 5px solid #000;
  background-color: #64c5f2;
  top: 40px;
  left: 60px;
}

li.eye.left:after {
  position: absolute;
  content: " ";
  width: 35px;
  height: 35px;
  background-color: #fff;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  top: 60px;
  left: 80px;
  background-color: #000;
}

li.eye.right {
  float: left;
}

li.eye.right:before {
  position: absolute;
  content: " ";
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 70px;
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border: 5px solid #000;
  top: 40px;
  right: 60px;
  background-color: #64c5f2;
}

li.eye.right:after {
  position: absolute;
  content: " ";
  width: 35px;
  height: 35px;
  background-color: #fff;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  top: 60px;
  right: 80px;
  background-color: #000;
}

li.nose {
   position:absolute;
   width:60px; 
   height:70px;
   background-color:#000;
   border-radius:
    50px 80px 60px 80px/
      80px 60px 60px 80px;
   -moz-border-radius:
    50px 80px 60px 80px/
      80px 60px 60px 80px;
   -webkit-border-radius:
    50px 80px 60px 80px/
      80px 60px 60px 80px;
      left: 125px;
  top: 100px;
     z-index: 2;
}
li.nose:after {
   position:absolute;
  content: " ";
   width:50px; 
   height:70px;
   background-color:#f9ed39;
   border-radius:
    50px 80px 60px 80px/
      80px 60px 60px 80px;
   -webkit-border-radius:
    50px 80px 60px 80px/
      80px 60px 60px 80px;
   -moz-border-radius:
    50px 80px 60px 80px/
      80px 60px 60px 80px;
      left: 5px;
  top: 5px;
     z-index:5;
}

li.mouth{
  position: relative;
  width: 300px; 
  height: 280px; 
  background: #4d1015; 
  -moz-border-radius: 310px; 
  -webkit-border-radius: 310px; 
  border-radius: 310px;
  z-index: -1;
  border: 6px solid #000;
}
li.mouth:before{
  position: absolute;
  content: " ";
  width: 400px; 
  height: 200px; 
  background: #f9ed39; 
  -moz-border-radius: 200px / 100px;
  -webkit-border-radius: 200px / 100px;
  border-radius: 200px / 100px;
  z-index: 1;
  left: -50px;
  top: -20px;
  border-bottom: 8px solid #000;
  z-index:99;
}
li.teeth {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}
li.teeth:before {
  position: absolute;
  content: " ";
  top: 185px;
  left:95px;
  width: 40px;
  height: 35px;
  background: #fff;
  border: 6px solid #000;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  z-index: -1;
}
li.teeth:after {
  position: absolute;
  content: " ";
  top: 185px;
  left: 160px;
  width: 40px;
  height: 35px;
  background: #fff;
  border: 6px solid #000;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  z-index: -1;
}
li.fossettes.left {
  position: absolute;
  top:90px;
  left: -50px;
  width: 55px;
  height: 65px;
  background-color:#f9ed39;
  transform: skewX(10deg);
  -moz-transform: skewX(10deg);
  -webkit-transform: skewX(10deg);
}

li.fossettes.left:after {
  position: absolute;
  width: 0;
  content: " ";
  border-style: solid;
  border-width: 0 0 5px 30px;
  border-color: #000 transparent transparent #000;
  top: 63px;
  left: 35px;
  transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
}

li.fossettes.right {
  position: absolute;
  top:90px;
  right: -50px;
  width: 55px;
  height: 65px;
  background-color:#f9ed39;
  transform: skewX(-10deg);
  -moz-transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
}

li.fossettes.right:after {
  position: absolute;
  width: 0;
  content: " ";
  border-style: solid;
  border-width: 5px 30px 0 0;
  border-color: transparent  #000 #000 #000 ;
  top: 60px;
  right: 35px;
  transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
}

li.tongue { 
  position: absolute;
  top: 240px;
}
li.tongue:before, li.tongue:after {
    position: absolute;
  content: " ";
    background: #f59da9;
  z-index: -1;
}
li.tongue:before { 
    left: 80px;
  top: -2px;
  width: 80px;
  height: 40px;
    -moz-border-radius: 100px 50px 100px 130px / 50px 30px 30px 50px;
    border-radius: 100px 50px 100px 130px / 50px 30px 30px 50px;
    -webkit-border-radius: 100px 50px 100px 130px / 50px 30px 30px 50px;
  border-style: solid;
  border-width: 6px;
  border-color: #000;
  transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -webkit-transform: rotate(8deg);
}
li.tongue:after { 
    left: 130px;
  top: 0;
  width: 80px;
  height: 40px;
    -moz-border-radius: 110px 100px 100px 100px / 30px 50px 50px 50px;
    border-radius: 110px 100px 100px 100px / 30px 50px 50px 50px;
    -webkit-border-radius: 110px 100px 100px 100px / 30px 50px 50px 50px;
  border-style: solid;
  border-width: 6px;
  border-color: #000;
  transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -webkit-transform: rotate(-8deg);
}

li.end {
  position: absolute;
  background: #f59da9;
  width: 40px;
  height: 36px;
  content: " ";
  top: 250px;
  left: 125px;
  border-radius: 20px 10px;
  -moz-border-radius: 20px 10px;
  -webkit-border-radius: 20px 10px;
}

6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu

<ul class="spongebob">
  <li class="left eyebrow"></li>
  <li class="right eyebrow"></li>
  <li class="left eye"> </li>
  <li class="right eye"> </li>
  <li class="nose"></li>
  <li class="mouth"></li>
  <li class="teeth"></li>
  <li class="tongue"></li>
  <li class="end"></li>
</ul>

SPONGEBOB

Saya kira, animasi Spongebob tidak hanya diperuntukkan untuk anak kecil semata. Untuk dewasa pun animasi ini layak menjadi tontonan karena percakapannya yang -- American -- banget. Banyak sarkasme dalam percakapan antara karakter satu dengan lainnya. Terutama dari trio Spongebob, Patrick dan Squidward. Belum tentu anak kecil paham akan percakapannya.

Karakter awal Spoons ini awalnya diberi nama SpongeBoy. Namun Hillenburg yang seorang ahli biologi kelautan berpendapat jika nama ini memiliki kesan aneh dan kutu buku. Ia lalu mengubah nama karakter pada animasinya dengan SpongeBob yang diambil dari komik ciptaanya.

Selain itu, perubahan nama karakter ini juga didasari karena adanya masalah hak cipta dengan perusahaan pel yang memiliki identitas serupa. Kemudian bentuk karakter Spoons kotak yang menjadi ikon SpongeBob pada awalnya berasal dari kegemaran Hillenburg menggambar spons alami di lautan untuk seri komiknya. Tetapi seiring berjalannya waktu, Hillenburg menyadari, bentuk kotak untuk karakter sponsnya dianggap lebih lucu.

Proses memang tidak pernah salah mampir pada bakat dan keterampilan seseorang ya teman-teman. Seorang ahli biota laut dengan kegemaran seninya dapat menghasilkan karya masterpiece yang mendunia. Apakah kita juga bisa? Bisa. Karena kita ditakdirkan dengan bakat masing-masing, hanya bakat itu terasah atau terpendam, hanya kalian yang berhak memilihnya. Tuhan memberikan pilihan-pilihan dalam hidup yang akan dijalani oleh seorang hamba-Nya.

Dan kita berhak atas nasib kita sendiri. Jadikan proses hidupmu menjadi bekal di kehidupan keduamu nanti. Kehidupan yang kekal dan abadi dan kita akan disana selama-lamanya. Sebuah dunia baru yang tidak ada di alam semesta ini. Dunia pembalasan, amal baik dan amal buruk akan ditimbang. Dan semua harus dipertanggung jawabkan.

Sudah sekian saja artikelnya. Silakan dipraktekkan. Selamat sore. "Are you ready Kids?" - I can hear you ..

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Ekspresi Wajah Lucu Spongebob ketika Digambar dengan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts