Membuat Objek Bola dengan Css

 Author : hadinug, 11 April, 2014, Komentar



Ada dua pendekatan dalam membuat objek bola dengan CSS .Salah satunya adalah untuk menciptakan sebuah enviroment 3D yang menggunakan banyak elemen didalamnya. Namun kali ini kita tidak membahas css 3d dalam pembuatan objek bola dengan css. Tapi kali ini saya akan mencoba menggunakan pendekatan yang kedua , memanfaatkan gradien CSS untuk menambahkan shading dan menciptakan efek 3D pada satu elemen .


Di tutorial kali ini akan dijelaskan satu persatu tentang 9 macam bentuk bola dengan css, dan sebelum kita masuk ke area yang lebih sulit, mari kita mulai dengan membuat bentuk lingkaran awal yang sederhana. 



Bentuk Dasar

Mulai dengan HTML:


<figure class="circle"> </figure>


Disini kita menggunakan elemen figure dengan class="circle", yang nantinya akan mewakili objek bola pada HTML. 


.circle {
    display: block;
    background: black;
    border-radius: 50%;
    height: 300px;
    width: 300px;
    margin: 0;
}


Untuk membuat lingkaran, saya akan memberikan lebar, tinggi , dan radius sebesar 50 %. Adapun radius 50 % akan menghasilkan sudut yang sepenuhnya akan membuat sebuah objek menjadi bulat. Lihat demonya disini


Shading 

Jika kebanyakan tutorial kita diajarkan untuk menambahkan gradien radial tunggal pada sebuah objek, nah pada tutorial kali ini pertama yang akan kita buat adalah menambahkan sedikit gradient di posisi dan kiri dari pusat lingkaran. 

Kita dapat melakukan ini dengan menggunakan kode CSS berikut:

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
  background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: radial-gradient(100px 100px, circle, #5cabff, #000);
}

Lihat hasil nya disini

Gradien Radial

Properti radial-gradient membutuhkan beberapa argumen. 
  • Posisi tengah untuk memulai gradien. 
  • Jenis atau bentuk (lingkaran, atau elips). 
  • Terakhir serangkaian warna . 

Anda dapat menentukan lebih dari dua warna, kemudian anda perlu untuk memasukkan jarak dengan masing-masing sehingga gradien tersebut akan tahu kapan harus berbaur dengan warna berikutnya. 

Dalam contoh ini hanya dua warna yang ditentukan. Hal ini memungkinkan browser mengasumsikan yang pertama adalah 0% dan yang terakhir adalah 100%. Jika kita ingin langkah-langkah lain dalam gradien, kita bisa menentukan jarak dalam pixel atau persentase, seperti yang akan anda lihat selanjutnya. 

Mari kita coba untuk membuat objek bola terlihat sedikit lebih bagus dengan menambahkan efek shadow pada objek.

Shadow & 3D 

Ini tergantung pada jenis shading yang anda terapkan di awal, anda dapat membuat bola tampak berbeda dengan bola yang pertama.

Berikut kode HTML nya:

<section class="stage"> 
   <figure class="ball"><span class="shadow"></span></ figure> 
</section> 

Disini kita berikan rentang yang akan kita gunakan untuk membuat bayangan, yang dibungkus dalam sebuah elemen span. Dimana span ini akan dijadikan sebagai posisi bayangan, sehingga terlihat lebih 3D. 

.stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  -webkit-perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
}
.ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  -webkit-transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
}

Lihat demonya disini

Multiple Shader

Kali ini kita akan coba membuat bola terlihat lebih realistis, disini akan dibuat terlihat lebih bercahaya dengan dua sumber cahaya dengan menggunakan pseudo-elemen untuk menambahkan dua gradien.

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
  );
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 0px, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: 2;
}

Gradien pertama adalah efek halus di bawah pencahayaan dan diterapkan pada elemen bola. Pusat gradien diposisikan setengah pada 120% dari ketinggian bola. Ini merupakan pusat dari permukaan bola.  

Gradien kedua adalah sorotan, ditempatkan di bagian atas. Ini ditetapkan menjadi 90% dari lebar bola dan 90% dari puncaknya. Gradien ini berpusat di bagian atas sehingga terlihat sedikit memudar. Lihat demonya disini.

Shiner Efect

Kali ini kita akan coba membuat bola terlihat seperti bola biliar dalam dunia nyata. Untuk mencapai hal ini kita akan menggunakan efek cahaya yang lebih soft. Kita akan coba memanfaatkan dua pseudo-selector.

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-radial-gradient(50% 120%, circle cover, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
  content: "";
  position: absolute;
  background: -webkit-radial-gradient(50% 120%, circle cover, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 2.5%;
  left: 5%;
  opacity: 0.6;
  height: 100%;
  width: 90%;
  -webkit-filter: blur(5px);
  z-index: 2;
}
.ball:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5%;
  left: 10%;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

Lihat demo nya disini.

Bola-8

Mari sedikit berkesploarasi dengan menambahkan nomro 8 pada bola. Kita akan membutuhkan tambahan elemen yang mengandung angka 8, serta beberapa gaya untuk menempatkannya pada bola.

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="eight"></span>
  </figure>
</section>

.ball .eight {
  width: 110px;
  height: 110px;
  margin: 30%;
  background: white;
  border-radius: 50%;
  -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
}
.ball .eight:before {
  content: "8";
  display: block;
  position: absolute;
  text-align: center;
  height: 80px;
  width: 100px;
  left: 50px;
  margin-left: -40px;
  top: 44px;
  margin-top: -40px;
  color: black;
  font-family: Arial;
  font-size: 90px;
  line-height: 104px;
}

Lihat demonya disini

Menambahkan Mata Pada Bola

Salah satu hal yang paling saya kagumi di CSS adalah transform, dimana pada css transform kita bisa menambahkan sebuah animasi. Seperti dengan menambahkan CSS keyframes untuk animasi, anda dapat menggambarkan serangkaian transformasi sebagai animasi dan menerapkan disetiap elemen. Untukkasusu ini saya akan menambahkan mata pada bola.

Berikut detil kode HTML dan CSS:

<style> 
    .ball {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 50%;
        position: relative;
        background: -webkit-gradient(radial, 50% 40%, 0, 50% 40%, 100, color-stop(0%, #fcfcfc), color-stop(66%, #efeff1), color-stop(100%, #9b5050));
        background: -webkit-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
        background: -moz-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
        background: -o-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
        background: radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
    }
    .ball:after {
        content: "";
        position: absolute;
        top: 5%;
        left: 10%;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 24, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(14%, rgba(255, 255, 255, 0.8)), color-stop(24%, rgba(255, 255, 255, 0)));
        background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
        background: -moz-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
        background: -o-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
        background: radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
        -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
        -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
        -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
        -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
        transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    }

    .iris {
        width: 40%;
        height: 40%;
        margin: 30%;
        border-radius: 100%;
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #208ab4), color-stop(30%, #6fbfff), color-stop(100%, #4381b2));
        background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
        background: -moz-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
        background: -o-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
        background: radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
        -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        -moz-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        -ms-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        -o-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        position: absolute;
        -webkit-animation: move-eye-skew 5s ease-out infinite;
        -moz-animation: move-eye-skew 5s ease-out infinite;
        -o-animation: move-eye-skew 5s ease-out infinite;
        -ms-animation: move-eye-skew 5s ease-out infinite;
        animation: move-eye-skew 5s ease-out infinite;
    }
    .iris:before {
        content: "";
        display: block;
        position: absolute;
        width: 37.5%;
        height: 37.5%;
        border-radius: 100%;
        top: 31.25%;
        left: 31.25%;
        background: black;
    }
    .iris:after {
        content: "";
        display: block;
        position: absolute;
        width: 31.25%;
        height: 31.25%;
        border-radius: 100%;
        top: 18.75%;
        left: 18.75%;
        background: rgba(255, 255, 255, 0.2);
    }

    .ball .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0)));
        background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        -webkit-transform: rotateX(90deg) translateZ(-150px);
        -moz-transform: rotateX(90deg) translateZ(-150px);
        -ms-transform: rotateX(90deg) translateZ(-150px);
        -o-transform: rotateX(90deg) translateZ(-150px);
        transform: rotateX(90deg) translateZ(-150px);
        z-index: -1;
    }
    .stage {
        width: 300px;
        height: 300px;
        display: inline-block;
        margin: 20px;
        -webkit-perspective: 1200px;
        -moz-perspective: 1200px;
        -ms-perspective: 1200px;
        -o-perspective: 1200px;
        perspective: 1200px;
        -webkit-perspective-origin: 50% 50%;
        -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
        -o-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    }
    body {
        width: 300px;
        margin: 20px auto;
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(100, 100, 100, 0.2)), color-stop(40%, rgba(255, 255, 255, 0.5)), color-stop(100%, #ffffff));
        background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -o-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background-repeat: no-repeat;
    }
</style>
<section class="stage">
      <figure class="ball">
        <span class="shadow"></span>
        <span class="iris"></span>
      </figure>
</section>
Lihat demonya disini.

Mata Berjalan

Dengan menambahkan sedikti animasi, kita bisa membuat efek magtang yang berjalan. Lihat demonya disini

<style> 
    .ball {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 50%;
        position: relative;
        background: -webkit-gradient(radial, 50% 40%, 0, 50% 40%, 100, color-stop(0%, #fcfcfc), color-stop(66%, #efeff1), color-stop(100%, #9b5050));
        background: -webkit-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
        background: -moz-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
        background: -o-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
        background: radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
    }
    .ball:after {
        content: "";
        position: absolute;
        top: 5%;
        left: 10%;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 24, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(14%, rgba(255, 255, 255, 0.8)), color-stop(24%, rgba(255, 255, 255, 0)));
        background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
        background: -moz-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
        background: -o-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
        background: radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
        -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
        -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
        -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
        -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
        transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    }

    .iris {
        width: 40%;
        height: 40%;
        margin: 30%;
        border-radius: 50%;
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #208ab4), color-stop(30%, #6fbfff), color-stop(100%, #4381b2));
        background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
        background: -moz-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
        background: -o-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
        background: radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
        -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        -moz-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        -ms-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        -o-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
        position: absolute;
        -webkit-animation: move-eye-skew 5s ease-out infinite;
        -moz-animation: move-eye-skew 5s ease-out infinite;
        -o-animation: move-eye-skew 5s ease-out infinite;
        -ms-animation: move-eye-skew 5s ease-out infinite;
        animation: move-eye-skew 5s ease-out infinite;
    }
    .iris:before {
        content: "";
        display: block;
        position: absolute;
        width: 37.5%;
        height: 37.5%;
        border-radius: 50%;
        top: 31.25%;
        left: 31.25%;
        background: black;
    }
    .iris:after {
        content: "";
        display: block;
        position: absolute;
        width: 31.25%;
        height: 31.25%;
        border-radius: 50%;
        top: 18.75%;
        left: 18.75%;
        background: rgba(255, 255, 255, 0.2);
    }

    .ball .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0)));
        background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        -webkit-transform: rotateX(90deg) translateZ(-150px);
        -moz-transform: rotateX(90deg) translateZ(-150px);
        -ms-transform: rotateX(90deg) translateZ(-150px);
        -o-transform: rotateX(90deg) translateZ(-150px);
        transform: rotateX(90deg) translateZ(-150px);
        z-index: -1;
    }
    .stage {
        width: 300px;
        height: 300px;
        display: inline-block;
        margin: 20px;
        -webkit-perspective: 1200px;
        -moz-perspective: 1200px;
        -ms-perspective: 1200px;
        -o-perspective: 1200px;
        perspective: 1200px;
        -webkit-perspective-origin: 50% 50%;
        -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
        -o-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    }
    body {
        width: 300px;
        margin: 20px auto;
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(100, 100, 100, 0.2)), color-stop(40%, rgba(255, 255, 255, 0.5)), color-stop(100%, #ffffff));
        background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -o-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background-repeat: no-repeat;
    }

    @-moz-keyframes move-eye-skew {
        0% {
        -moz-transform: none;
        transform: none; }

    20% {
        -moz-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
        transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

    25%, 44% {
        -moz-transform: none;
        transform: none; }

    50%, 60% {
        -moz-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
        transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

    66%, 100% {
        -moz-transform: none;
        transform: none; } }

    @-webkit-keyframes move-eye-skew {
        0% {
        -webkit-transform: none;
        transform: none; }

    20% {
        -webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
        transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

    25%, 44% {
        -webkit-transform: none;
        transform: none; }

    50%, 60% {
        -webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
        transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

    66%, 100% {
        -webkit-transform: none;
        transform: none; } }

    @-o-keyframes move-eye-skew {
        0% {
        -o-transform: none;
        transform: none; }

    20% {
        -o-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
        transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

    25%, 44% {
        -o-transform: none;
        transform: none; }

    50%, 60% {
        -o-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
        transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

    66%, 100% {
        -o-transform: none;
        transform: none; } }

    @-ms-keyframes move-eye-skew {
        0% {
        -ms-transform: none;
        transform: none; }

    20% {
        -ms-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
        transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

    25%, 44% {
        -ms-transform: none;
        transform: none; }

    50%, 60% {
        -ms-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
        transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

    66%, 100% {
        -ms-transform: none;
        transform: none; } }

    @keyframes move-eye-skew {
        0% {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none; }

    20% {
        -webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
        -moz-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
        -ms-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
        -o-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
        transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); }

    25%, 44% {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none; }

    50%, 60% {
        -webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
        -moz-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
        -ms-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
        -o-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
        transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); }

    66%, 100% {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none; } }
</style>

<section class="stage">
      <figure class="ball">
        <span class="shadow"></span>
        <span class="iris"></span>
      </figure>
</section>

Bubble

Menggunakan kombinasi shading dan animasi dapat memproduksi segala macam bentuk efek yang menarik dan bervariasi. Nah disini kita akan coba menambahkan sebuah efek gelembung. 

Membuat tampilan mirip gelembung dengan menggunakan efek yang lebih transparan dalam warna utama dan dua pseudo-elemen untuk menambahkan efek bersinar. Di animasi kali ini kita menggunakan skala transformasi untuk membuat seluruh gelembung goyangan. Lihat demonya disni

<style>  
    .ball {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 50%;
        position: relative;
        background: -webkit-gradient(radial, 50% 55%, 0, 50% 55%, 100, color-stop(0%, rgba(240, 245, 255, 0.9)), color-stop(40%, rgba(240, 245, 255, 0.9)), color-stop(60%, rgba(225, 238, 255, 0.8)), color-stop(100%, rgba(43, 130, 255, 0.4)));
        background: -webkit-radial-gradient(50% 55%, circle cover, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
        background: -moz-radial-gradient(50% 55%, circle cover, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
        background: -o-radial-gradient(50% 55%, circle cover, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
        background: radial-gradient(50% 55%, circle cover, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
        -webkit-animation: bubble-anim 2s ease-out infinite;
        -moz-animation: bubble-anim 2s ease-out infinite;
        -o-animation: bubble-anim 2s ease-out infinite;
        -ms-animation: bubble-anim 2s ease-out infinite;
        animation: bubble-anim 2s ease-out infinite;
    }
    .ball:before {
        /* Sheen on the bottom right */
        content: "";
        position: absolute;
        top: 1%;
        left: 5%;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        -webkit-filter: blur(0);
        height: 80%;
        width: 40%;
        background: -webkit-gradient(radial, 130% 130%, 0, 130% 130%, 100, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(46%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(58%, rgba(255, 255, 255, 0.8)), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
        background: -webkit-radial-gradient(130% 130%, circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
        background: -moz-radial-gradient(130% 130%, circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
        background: -o-radial-gradient(130% 130%, circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
        background: radial-gradient(130% 130%, circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
        -webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
        -moz-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
        -ms-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
        -o-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
        transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
    }
    .ball:after {
        /* Top left highlight */
        content: "";
        position: absolute;
        top: 5%;
        left: 10%;
        width: 80%;
        height: 80%;
        border-radius: 100%;
        background: -webkit-gradient(radial, 50% 80%, 0, 50% 80%, 100, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(74%, rgba(255, 255, 255, 0)), color-stop(80%, #ffffff), color-stop(84%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0)));
        background: -webkit-radial-gradient(50% 80%, circle cover, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, #ffffff 80%, #ffffff 84%, rgba(255, 255, 255, 0) 100%);
        background: -moz-radial-gradient(50% 80%, circle cover, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, #ffffff 80%, #ffffff 84%, rgba(255, 255, 255, 0) 100%);
        background: -o-radial-gradient(50% 80%, circle cover, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, #ffffff 80%, #ffffff 84%, rgba(255, 255, 255, 0) 100%);
        background: radial-gradient(50% 80%, circle cover, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, #ffffff 80%, #ffffff 84%, rgba(255, 255, 255, 0) 100%);
        opacity: 0.6;
        -webkit-filter: blur(1px);
        z-index: 2;
        -webkit-transform: rotateZ(-30deg);
        -moz-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -o-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
    }
    .stage {
        width: 300px;
        height: 300px;
        display: inline-block;
        margin: 20px;
        -webkit-perspective: 1200px;
        -moz-perspective: 1200px;
        -ms-perspective: 1200px;
        -o-perspective: 1200px;
        perspective: 1200px;
        -webkit-perspective-origin: 50% 50%;
        -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
        -o-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    }
    body {
        width: 300px;
        margin: 20px auto;
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(100, 100, 100, 0.2)), color-stop(40%, rgba(255, 255, 255, 0.5)), color-stop(100%, #ffffff));
        background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -o-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background-repeat: no-repeat;
    }

    @-moz-keyframes bubble-anim {
        0% {
        -moz-transform: scale(1);
        transform: scale(1); }

    20% {
        -moz-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        -moz-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        -moz-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        -moz-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        -moz-transform: scale(1);
        transform: scale(1); } }

    @-webkit-keyframes bubble-anim {
        0% {
        -webkit-transform: scale(1);
        transform: scale(1); }

    20% {
        -webkit-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        -webkit-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        -webkit-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        -webkit-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

    @-o-keyframes bubble-anim {
        0% {
        -o-transform: scale(1);
        transform: scale(1); }

    20% {
        -o-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        -o-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        -o-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        -o-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        -o-transform: scale(1);
        transform: scale(1); } }

    @-ms-keyframes bubble-anim {
        0% {
        -ms-transform: scale(1);
        transform: scale(1); }

    20% {
        -ms-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        -ms-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        -ms-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        -ms-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        -ms-transform: scale(1);
        transform: scale(1); } }

    @keyframes bubble-anim {
        0% {
        transform: scale(1); }

    20% {
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        transform: scale(1); } }
    </style>
    <section class="stage">
    <figure class="ball">
        <span class="shadow"></span>
        <span class="iris"></span>
    </figure>
</section>

Semoga bermanfaat dan jika anda senang berikan sebuah komentar di kolom komentar.

Lihat Juga


 
Bagikan halaman ke sosial media
 
Tags :   css    css3       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda