Spongebob In Pure CSS

15:33:00 21 Comments
Spongebob In Pure CSS


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

 

apa kabar semua  ? ^_^
berjumpa lagi dengan saya, admin codingpintar ^_^
semoga sehat semua yah, dan masih semangat untuk belajar codingnya heheh  ^_^

nah, pada kesempatan kali ini saya akan memberikan tutorial Cara Membuat Karakter Dengan CSS3
Kalau pada tutorial sebelumnya arakter yang saya buat yaitu Karakter Minion
nah pada kesempatan kali ini saya ingin membuat karakter Spongebob In Pure CSS
Karakter ini hanya menggunakan css3, seperti tutorial sebelumnya karakter ini bukan buatan saya melainkan web developer yang bernama  Rachel Bull karya dia sengaja saya share disini agar kita semua bisa tau cara membuat karakter dengan css3.
tidak usah nerlama-lama lagi, silahkan ikuti langkah-langkah di bawah ini dengan benar.


1. Membuat File HTML
seperti tutorial sebelumnya silahkan siapkan file HTML bernama index.html, lalu ketikkan script berikut ini . 

<!DOCTYPE html>
<html>
<head>
 <title>Spongebob</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
 <h1>SpongeBob in Pure CSS</h1>
 <div class="bob">
  <div class="sponge">
   <div class="top">
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
   </div>
   <div class="left">
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
   </div>
   <div class="right">
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
   </div>
   <div class="bottom">
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
    <div class="waves"></div>
   </div>
   <div class="shape"></div>
   <div class="blobs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
   </div>
   <div class="nose"></div>
   <div class="eyelash right">
    <div class="lash"></div>
    <div class="lash"></div>
    <div class="lash"></div>
   </div>
   <div class="eye right">
    <div class="pupil">
     <div class="dot"></div>
    </div>
   </div>
   <div class="eyelash left">
    <div class="lash"></div>
    <div class="lash"></div>
    <div class="lash"></div>
   </div>
   <div class="eye left">
    <div class="pupil">
     <div class="dot"></div>
    </div>
   </div>
   <div class="cheek left">
    <div class="freckle"></div>
    <div class="freckle"></div>
    <div class="freckle"></div>
   </div>
   <div class="cheek right">
    <div class="freckle"></div>
    <div class="freckle"></div>
    <div class="freckle"></div>
   </div>
   <div class="dimple left"></div>
   <div class="dimple right"></div>
   <div class="mouth">
    <div class="tooth left"></div>
    <div class="tooth right"></div>
   </div>
   <div class="chin left"></div>
   <div class="chin right"></div>
  </div>
  <div class="bottom">
   <div class="collar left"></div>
   <div class="collar right"></div>
   <div class="sleeve left"></div>
   <div class="sleeve right"></div>
   <div class="arm left"></div>
   <div class="arm right"></div>
   <div class="hand left">
    <div class="finger"></div>
    <div class="finger"></div>
    <div class="finger"></div>
   </div>
   <div class="hand right">
    <div class="finger"></div>
    <div class="finger"></div>
    <div class="finger"></div>
   </div>
   <div class="pantsleg left"></div>
   <div class="pantsleg right"></div>
   <div class="leg left">
    <div class="sock"></div>
   </div>
   <div class="leg right">
    <div class="sock"></div>
   </div>
   <div class="foot left">
    <div class="shoe"></div>
   </div>
   <div class="foot right">
    <div class="shoe"></div>
   </div>
   <div class="border left"></div>
   <div class="border right"></div>
   <div class="border bottom"></div>
   <div class="pants">
    <div class="border"></div>
    <div class="belt"></div>
   </div>
   <div class="tie-knot"></div>
   <div class="tie-long"></div>
  </div>
 </div>
</div>
</body>
</html>

Jika file HTMLnya sudah di buat silahkan ikuti langkah yang ke dua.

2. Membuat File CSS
file css inilah file yang ter penting hehe ^_^, silahkan buat file cssnya bernama style.css, dan ketikkan script berikut .

body{
  background-image: url(1.jpg);
}

.container {
  max-width: 800px;
  margin: 15px auto;
  padding: 0 20px;
  height: 500px;
  box-sizing: border-box;
}
.container h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  letter-spacing: 0.5px;
  color: #fff;
  font-size: 40px;
  text-align: center;
}

.bob {
  position: absolute;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  height: 200px;
}
.bob .sponge {
  position: relative;
  height: 150px;
  width: 180px;
  z-index: 20;
}
.bob .sponge .shape {
  border-top: 150px solid #FEF46E;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 150px;
  z-index: -1px;
}
.bob .sponge .blobs span {
  position: absolute;
  width: 15px;
  height: 20px;
  background: #C5C75A;
  border-radius: 50%;
}
.bob .sponge .blobs span:nth-of-type(1) {
  top: 10px;
  left: 22px;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.bob .sponge .blobs span:nth-of-type(2) {
  height: 10px;
  width: 8px;
  top: 30px;
  left: 14px;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.bob .sponge .blobs span:nth-of-type(3) {
  bottom: 25px;
  left: 20px;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.bob .sponge .blobs span:nth-of-type(4) {
  height: 10px;
  width: 8px;
  bottom: 15px;
  left: 37px;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.bob .sponge .blobs span:nth-of-type(5) {
  bottom: 10px;
  right: 30px;
  -ms-transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  transform: rotate(-140deg);
}
.bob .sponge .blobs span:nth-of-type(6) {
  height: 10px;
  width: 8px;
  bottom: 30px;
  right: 20px;
  -ms-transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  transform: rotate(-140deg);
}
.bob .sponge .blobs span:nth-of-type(7) {
  top: 12px;
  right: 15px;
  -ms-transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  transform: rotate(-140deg);
}
.bob .sponge > .top .waves, .bob .sponge > .left .waves, .bob .sponge > .bottom .waves, .bob .sponge > .right .waves {
  position: absolute;
  width: 30px;
}
.bob .sponge > .top .waves:before, .bob .sponge > .left .waves:before, .bob .sponge > .bottom .waves:before, .bob .sponge > .right .waves:before {
  content: "";
  position: absolute;
  height: 3px;
  width: 15px;
  border-top: 2px solid #B1B14C;
  background: #FEF46E;
  top: -3px;
  border-radius: 20px;
  border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
}
.bob .sponge > .top .waves:after, .bob .sponge > .left .waves:after, .bob .sponge > .bottom .waves:after, .bob .sponge > .right .waves:after {
  content: "";
  position: absolute;
  height: 3px;
  width: 15px;
  border-bottom: 2px solid #B1B14C;
  background: white;
  top: -1px;
  right: 0;
  border-radius: 20px;
  border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
  -webkit-border-radius: 0 0 20px 20px;
}
.bob .sponge > .top .waves {
  top: 0;
  left: 0;
}
.bob .sponge > .top .waves:nth-of-type(2) {
  left: 30px;
}
.bob .sponge > .top .waves:nth-of-type(3) {
  left: 60px;
}
.bob .sponge > .top .waves:nth-of-type(4) {
  left: 90px;
}
.bob .sponge > .top .waves:nth-of-type(5) {
  left: 120px;
}
.bob .sponge > .top .waves:nth-of-type(6) {
  left: 150px;
}
.bob .sponge > .left .waves {
  left: -14px;
  top: 15px;
  -ms-transform: rotate(-95deg);
  -webkit-transform: rotate(-95deg);
  transform: rotate(-95deg);
}
.bob .sponge > .left .waves:nth-of-type(2) {
  top: 45px;
  left: -11px;
}
.bob .sponge > .left .waves:nth-of-type(3) {
  top: 75px;
  left: -8px;
}
.bob .sponge > .left .waves:nth-of-type(4) {
  top: 105px;
  left: -5px;
}
.bob .sponge > .left .waves:nth-of-type(5) {
  top: 135px;
  left: -2px;
}
.bob .sponge > .right .waves {
  right: -14px;
  top: 15px;
  -ms-transform: rotate(95deg);
  -webkit-transform: rotate(95deg);
  transform: rotate(95deg);
}
.bob .sponge > .right .waves:nth-of-type(2) {
  top: 45px;
  right: -11px;
}
.bob .sponge > .right .waves:nth-of-type(3) {
  top: 75px;
  right: -8px;
}
.bob .sponge > .right .waves:nth-of-type(4) {
  top: 105px;
  right: -5px;
}
.bob .sponge > .right .waves:nth-of-type(5) {
  top: 135px;
  right: -2px;
}
.bob .sponge > .bottom .waves {
  left: 15px;
  bottom: 0;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.bob .sponge > .bottom .waves:nth-of-type(3):after {
  background: #FEF46E;
}
.bob .sponge > .bottom .waves:nth-of-type(2) {
  left: 45px;
}
.bob .sponge > .bottom .waves:nth-of-type(3) {
  left: 75px;
}
.bob .sponge > .bottom .waves:nth-of-type(4) {
  left: 105px;
}
.bob .sponge > .bottom .waves:nth-of-type(5) {
  left: 135px;
}
.bob .sponge .eyelash {
  position: absolute;
  top: 22px;
}
.bob .sponge .eyelash.left {
  left: 46px;
}
.bob .sponge .eyelash.right {
  right: 46px;
}
.bob .sponge .eyelash .lash {
  height: 9px;
  width: 3px;
  background: black;
  margin-right: 9px;
  float: left;
  border-radius: 50%;
}
.bob .sponge .eyelash .lash:nth-of-type(1) {
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
  margin-top: 2px;
}
.bob .sponge .eyelash .lash:nth-of-type(2) {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.bob .sponge .eyelash .lash:nth-of-type(3) {
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
  margin-top: 2px;
  margin-right: 0;
}
.bob .sponge .eye {
  position: absolute;
  top: 30px;
  height: 55px;
  width: 58px;
  background: white;
  border: 2px solid black;
  border-radius: 50%;
}
.bob .sponge .eye.left {
  left: 30px;
}
.bob .sponge .eye.left .pupil {
  left: 45%;
}
.bob .sponge .eye.right {
  right: 30px;
}
.bob .sponge .eye.right .pupil {
  right: 45%;
}
.bob .sponge .eye .pupil {
  position: absolute;
  top: 50%;
  margin-top: -8.5px;
  height: 17px;
  width: 17px;
  background: #69CDDC;
  border: 2px solid black;
  border-radius: 50%;
}
.bob .sponge .eye .pupil .dot {
  position: absolute;
  height: 8px;
  width: 8px;
  background: black;
  top: 50%;
  margin-top: -4px;
  left: 50%;
  margin-left: -4px;
  border-radius: 50%;
}
.bob .sponge .nose {
  position: absolute;
  top: 67px;
  left: 79px;
  height: 22px;
  width: 18px;
  background: #FEF46E;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid transparent;
  border-radius: 50%;
  z-index: 10;
}
.bob .sponge .cheek {
  position: absolute;
  top: 47%;
  height: 16px;
  width: 22px;
  border-top: 2px solid #E64B39;
  border-left: 2px solid #E64B39;
  border-right: 2px solid #E64B39;
  border-radius: 50%;
  border-bottom: 2px solid transparent;
  background: #FEF46E;
  z-index: 6;
}
.bob .sponge .cheek.left {
  left: 20px;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.bob .sponge .cheek.right {
  right: 20px;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.bob .sponge .cheek .freckle {
  height: 2px;
  width: 2px;
  float: left;
  margin-right: 3px;
  background: #E64B39;
  border-radius: 50%;
  margin-top: 3px;
}
.bob .sponge .cheek .freckle:nth-of-type(1) {
  margin-top: 5px;
  margin-left: 5px;
}
.bob .sponge .cheek .freckle:nth-of-type(3) {
  margin-top: 5px;
  margin-right: 0;
}
.bob .sponge .dimple {
  position: absolute;
  top: 83px;
  width: 8px;
  height: 12px;
  border-top: 2px solid black;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-radius: 50%;
  z-index: 8;
}
.bob .sponge .dimple.left {
  left: 30px;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.bob .sponge .dimple.right {
  right: 30px;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.bob .sponge .mouth {
  position: absolute;
  bottom: 38px;
  left: 50%;
  margin-left: -82px;
  width: 160px;
  height: 180px;
  border-bottom: 2px solid black;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-radius: 50%;
  z-index: 7;
}
.bob .sponge .mouth .tooth {
  position: absolute;
  bottom: -15px;
  height: 10px;
  width: 12px;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-top: 2px solid transparent;
  background: white;
  border-radius: 0 0 30% 30%;
}
.bob .sponge .mouth .tooth.left {
  left: 38%;
  -ms-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  transform: rotate(6deg);
}
.bob .sponge .mouth .tooth.right {
  right: 38%;
  -ms-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.bob .sponge .chin {
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 25px;
  height: 10px;
  border-bottom: 2px solid #ED914A;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-radius: 50%;
  margin-left: -25px;
}
.bob .sponge .chin.right {
  left: 63%;
}
.bob > .bottom {
  width: 138px;
  height: 50px;
  position: relative;
  margin-top: -6px;
  margin-left: 21px;
  background: whitesmoke;
  border-top: 2px solid black;
  z-index: 10;
}
.bob > .bottom .border {
  position: absolute;
  z-index: 2;
}
.bob > .bottom .border.left, .bob > .bottom .border.right {
  height: 50px;
  width: 20px;
  background: white;
  top: 0;
}
.bob > .bottom .border.left {
  border-left: 2px solid black;
  left: -2px;
  -ms-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.bob > .bottom .border.right {
  border-right: 2px solid black;
  right: -2px;
  -ms-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  transform: rotate(6deg);
}
.bob > .bottom .border.bottom {
  bottom: -2px;
  left: 0;
  width: 138px;
  border-bottom: 2px solid black;
}
.bob > .bottom .collar {
  position: absolute;
  top: -12px;
  height: 20px;
  width: 30px;
  border: 2px solid black;
  z-index: 5;
}
.bob > .bottom .collar.left {
  left: 30px;
  border-radius: 20% 20% 20% 60%;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.bob > .bottom .collar.right {
  right: 30px;
  border-radius: 20% 20% 60% 20%;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.bob > .bottom .sleeve {
  position: absolute;
  top: -20px;
  height: 30px;
  width: 20px;
  border: 2px solid black;
  background: white;
  border-radius: 80% 80% 40% 40%;
  z-index: 1;
}
.bob > .bottom .sleeve.left {
  left: -15px;
  -ms-transform: rotate(8deg);
  -webkit-transform: rotate(8deg);
  transform: rotate(8deg);
}
.bob > .bottom .sleeve.right {
  right: -15px;
  -ms-transform: rotate(-8deg);
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.bob > .bottom .arm {
  position: absolute;
  top: 10px;
  height: 45px;
  width: 5px;
  background: #FEF46E;
  border-left: 2px solid black;
  border-right: 2px solid black;
  z-index: 0;
}
.bob > .bottom .arm.left {
  left: -8px;
  -ms-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.bob > .bottom .arm.right {
  right: -8px;
  -ms-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  transform: rotate(6deg);
}
.bob > .bottom .hand {
  position: absolute;
  top: 51px;
  background: #FEF46E;
  height: 16px;
  width: 12px;
  border-radius: 30px;
  border: 2px solid black;
  z-index: -1;
}
.bob > .bottom .hand.left {
  left: -7px;
}
.bob > .bottom .hand.left .finger {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.bob > .bottom .hand.left .finger:nth-of-type(1) {
  left: 6px;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.bob > .bottom .hand.left .finger:nth-of-type(2) {
  left: 3px;
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
.bob > .bottom .hand.left .finger:nth-of-type(3) {
  left: -1px;
}
.bob > .bottom .hand.right {
  right: -7px;
}
.bob > .bottom .hand.right .finger {
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}
.bob > .bottom .hand.right .finger:nth-of-type(1) {
  right: 6px;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.bob > .bottom .hand.right .finger:nth-of-type(2) {
  right: 3px;
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}
.bob > .bottom .hand.right .finger:nth-of-type(3) {
  right: -1px;
}
.bob > .bottom .hand .finger {
  position: absolute;
  top: 6px;
  height: 15px;
  width: 3px;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-top: 2px solid transparent;
  border-radius: 0 0 20px 20px;
  background: #FEF46E;
}
.bob > .bottom .hand .finger:nth-of-type(1) {
  top: 3px;
  height: 13px;
}
.bob > .bottom .hand .finger:nth-of-type(2) {
  top: 5px;
}
.bob > .bottom .hand .finger:nth-of-type(3) {
  height: 13px;
}
.bob > .bottom .tie-knot {
  border-top: 10px solid red;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  height: 0;
  width: 10px;
  position: absolute;
  left: 50%;
  top: 5px;
  margin-left: -7px;
  z-index: 11;
}
.bob > .bottom .tie-knot:before {
  position: absolute;
  content: "";
  width: 100%;
  border-bottom: 2px solid black;
}
.bob > .bottom .tie-long {
  position: relative;
  top: -8px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 30px solid red;
  z-index: 10;
}
.bob > .bottom .tie-long:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 10px solid red;
  top: 30px;
  left: -10px;
}
.bob > .bottom .pantsleg {
  position: absolute;
  bottom: -12px;
  height: 20px;
  width: 20px;
  background: #C96936;
  border: 2px solid black;
  border-radius: 80% / 30%;
}
.bob > .bottom .pantsleg.left {
  left: 30px;
}
.bob > .bottom .pantsleg.right {
  right: 30px;
}
.bob > .bottom .pants {
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 25px solid #C96936;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  height: 0;
  width: calc(100% - 6px);
  z-index: 3;
}
.bob > .bottom .pants .border {
  position: absolute;
  top: -25px;
  left: -3px;
  width: calc(100% + 6px);
  border-top: 2px solid black;
  height: 10px;
}
.bob > .bottom .pants .belt {
  position: absolute;
  top: -25px;
  left: 0;
  width: calc(100% - 10px);
  border-top: 6px dashed black;
  margin: 5px 5px;
  height: 10px;
}
.bob > .bottom .leg {
  position: absolute;
  bottom: -50px;
  height: 45px;
  width: 5px;
  background: #FEF46E;
  border-left: 2px solid black;
  border-right: 2px solid black;
  z-index: -1;
}
.bob > .bottom .leg.left {
  left: 37px;
}
.bob > .bottom .leg.right {
  right: 37px;
}
.bob > .bottom .leg .sock {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: white;
  border-top: 2px solid black;
}
.bob > .bottom .leg .sock:before, .bob > .bottom .leg .sock:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
}
.bob > .bottom .leg .sock:before {
  background: #B6EBF1;
  top: 15%;
}
.bob > .bottom .leg .sock:after {
  top: 35%;
  background: #E4473F;
}
.bob > .bottom .foot {
  position: absolute;
  bottom: -65px;
  width: 20px;
  height: 18px;
  background: black;
  border-radius: 20px;
}
.bob > .bottom .foot:after {
  content: "";
  position: absolute;
  top: 5px;
  background: white;
  border-radius: 20px;
  height: 3px;
  width: 4px;
}
.bob > .bottom .foot.left {
  left: 20px;
}
.bob > .bottom .foot.left:after {
  left: 5px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.bob > .bottom .foot.left:before {
  right: -10px;
}
.bob > .bottom .foot.left .shoe {
  right: -12px;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.bob > .bottom .foot.right {
  right: 20px;
}
.bob > .bottom .foot.right:after {
  right: 5px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.bob > .bottom .foot.right:before {
  left: -10px;
}
.bob > .bottom .foot.right .shoe {
  left: -12px;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.bob > .bottom .foot:before {
  content: "";
  position: absolute;
  bottom: 0px;
  height: 8px;
  width: 10px;
  background: black;
}
.bob > .bottom .foot .shoe {
  position: absolute;
  bottom: 3px;
  width: 30px;
  height: 14px;
  background: black;
  border-radius: 20px;
} 

ternyata banyak juga ya script cssnya heheh,
ya sudah mungkin itu dulu yang dapat saya sampaikan, :)
silahkan anda coba dan anda kembangkan sendiri :)

mohon maaf jika tidak ada demonya hehe :)
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

SHARE THIS
Unknown

Author:

Previous Post
Next Post
Unknown
14 September 2015 at 16:35

Ane coba ya gan, kalo bisa minions gan :3 ane tunggu

Reply
avatar
BacaTekno.com
14 September 2015 at 16:49

bisa gitu kang keren abis deh :D

Reply
avatar
Unknown
14 September 2015 at 17:01

BISA JADI BAHAN EKSPERIMEN ANE NIH :)

Reply
avatar
Unknown
14 September 2015 at 17:08

wih keren gan. bisa dicoba nih. mksh gan

Reply
avatar
Blog Damai Putra
14 September 2015 at 20:11

nah ini yang saya tunggu iijin bookmark

Reply
avatar
Unknown
16 September 2015 at 00:17

keren ini gan. thanx infonya

Reply
avatar
mal
19 September 2015 at 10:11

Keren nih tutorial nya

Reply
avatar
Unknown
21 September 2015 at 04:24

Ud ane coba thks tutorialnya

Reply
avatar
Unknown
22 September 2015 at 16:56

Wah Lucu y, Terimakasih Atas Tutorialnya.
Salam Mas Semut

Reply
avatar
Unknown
24 September 2015 at 07:48

keren gan tutornya :) lanjutkan

Reply
avatar
rul
25 September 2015 at 14:29

Ry-share blog personal
Wihh spongebob action in blog haha keren gan (y)

Reply
avatar
rul
25 September 2015 at 14:30

Wihh spongebob action in blog haha keren gan (y)

Reply
avatar
Unknown
27 September 2015 at 04:27

keren banget dech.......

Reply
avatar
Subscribe to: Post Comments (Atom)